logo标签列表

Visual Studio Code Emmet无法工作

visual-studio-codeemmet
47

我正在使用 VisualStudioCode 1.20.1版本。根据VSC网站，Emmet是内置的。但当我在VSC IDE上尝试使用锚点标记并引用类下拉菜单时，该类未被自动建议或识别。

21个回答
109
在您的 VS Code 用户设置中添加以下内容：

"emmet.includeLanguages": { "javascript": "html" }

这样，您就可以在 JavaScript 文件中使用 Emmet。
3
谢谢，这个解决了我的问题。 - Deelux
1
这个链接展示了启用Emmet支持的语言和我们选择的语言之间映射的配置。然而，我无法从Emmet中获得建议，所以我不得不像@tienl建议的那样添加一个“javascript”的重复条目才能使其正常工作。 - nishant kumar
四年后，这仍然为我解决了问题。 - Laz Austin
64

在 VS Code 用户设置中添加以下内容：

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}
5
这段代码 "emmet.triggerExpansionOnTab": true 对我很有效。当你不小心打错单词（例如段落标签中输了pa而非p），删掉"a"后再按Tab键，如果没有这个代码，Emmet将无法生效。 - Blues Clues
嘿，它在.html文件的脚本标签内部不起作用，你能帮忙解决一下吗？使用上述代码，我可以在js、vue和HTML文件中获得emmet自动建议，但不能在<script>它在这里不起作用</script>之间工作。 - Kunal Rajput
33

以下是我使用的方法：

  1. 打开命令面板（Ctrl + Shift + P）

  2. 打开设置（JSON）

  3. 在末尾添加：

"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
    "*html": "html", 
    "*njk": "html"
},
谢谢。这已经成功地将mustache模板添加为HTML。 - Matteus Barbosa
16

我想在其他人发布有关 emmet.includeLanguages 的帖子中添加一些内容，你还可以添加"vue": "html"，像这样：

"emmet.includeLanguages": { 
        "vue-html": "html",
        "vue": "html",
        "javascript": "html"
    }
2
这是我解决问题的方法，仅使用"vue-html"是不够的，还需要添加"vue"条目，这样就可以了。 - JL Peyret
14

默认情况下Emmet不适用于js文件。 要解决此问题，您需要在vscode的设置中启用Emmet缩写。

首先，从任何目录打开settings.json：

vim ~/.config/Code/User/settings.json

更具体地说，在Windows上，您需要转到文件 > 首选项 > 设置 > 输入“Launch” > 点击“在settings.json中编辑”。

现在，您必须在settings.json中声明将在js文件中使用emmet： （非常简单，只需将高亮显示的代码复制并粘贴到代码设置文件中即可）

{
    /*here are your existing settings*/
    /*THE CODE BELOW*/
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "razor": "html",
        "plaintext": "jade"
    }
     /*^^^^THE CODE ABOVE^^^^*/
}

现在只需保存它。不需要重新启动vscode。

有关更多详细信息，请参见该文章，位于vscode官方网站上。

9
问题在于您需要在设置文件中包含语言。
在较新版本的VSCode中，您可以通过选择“代码”>“首选项”>“设置”，然后搜索“Emmet：Include Languages”，并在其中添加您的语言来打开设置。
我刚刚这样做，使得emmet在我的react代码中工作。 我刚刚这样做，使得emmet在我的react代码中工作。
7

请检查文件扩展名图标，它是否显示为html5或dj(代表django)?

enter image description here

如果显示为“dj”，则表示您安装了Django VSCode扩展。您可以执行以下两个操作：
  • 删除Django扩展
  • 将"django-html": "html"添加到emmet.includeLanguages中（根据此issue），我的现在看起来像这样：
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "django-html": "html",
  },
谢谢！：D 添加了 django-html": "html，没有删除 Django 扩展或其他任何内容，它可以工作！谢谢！ - M.Ionut
6

我遇到的令人疯狂的问题是，设置"emmet.showExpandedAbbreviation"会影响在JavaScript文件中使用Emmet。

要解决这个问题，请从您的settings.json中删除该设置或将其设置为："emmet.showExpandedAbbreviation":"always"

亲爱的上帝...这基本上也是我的情况。尽管在使用VSCode UI切换设置时它似乎存在于我的settings.json中，但该设置实际上并不存在。因此，一旦我打开了settings.json，我发现它确实缺失了，于是我添加了它，重新启动...终于我得到了emmet智能感知功能！非常感谢您。 - Christopher
2
请找到setting.json文件并添加以下代码，保存。如果您不知道如何操作，请观看此视频：https://www.youtube.com/watch?v=AUuP_hriEc4`

"files.associations": {"*html":"html"}, "emmet.triggerExpansionOnTab": true

`

1
这种情况在HTML文件中发生，因为另一个扩展（用于Django，一个Python web框架）覆盖了.HTML文件类型，而没有关闭的方法。我删除了该扩展，重新启动了VSCode，现在它又可以正常工作了。
1
在VSCode的用户设置中简单地添加 "django-html": "html"，正如@Ben Butterworth所建议的那样，对我起了作用。 - M.Ionut
删除扩展名并不是一个解决方案，因为扩展名在许多方面都非常有用。 - Ajay Sahu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接