Emmet 扩展缩写在具有属性的 Visual Studio Code 中不起作用答案

【问题标题】：Emmet expand abbreviation doesn't work in Visual Studio Code with the attributesEmmet 扩展缩写在具有属性的 Visual Studio Code 中不起作用
【发布时间】：2019-04-04 14:35:19
【问题描述】：

我开始在我的 Web 项目中使用 Visual Studio Code，没有 Emmet 我就活不下去，但是当我尝试使用属性扩展 HTML 标记中的缩写时遇到了问题。只是一个例子。如果我写 html:5 并按 TAB 键，它会展开所有 HTML5 模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

并使用 id 和 class 编写标签，例如 p#id.class，它会正确生成下一段代码

<p id="id" class="class"></p>

但是当我想用方括号内的其他属性扩展相同的标签时，它不起作用。只需在代码中添加一个制表符即可。

p[align="center"]

如果我尝试使用大括号在标签中添加文本，同样的事情

p{Test}

你能帮我知道如何配置它，或者我的软件/扩展是否有问题？

问候，

【问题讨论】：

标签： html visual-studio-code emmet

【解决方案1】：

以上/以下描述如何配置您的 settings.json 文件以启用/配置 Emmet 的答案的进一步说明：

如果您尝试在未保存的新文档中使用 Emmet... 您必须选择一种（支持的）语言才能激活 Emmet。 （您也可以只保存文档，VSCode 会从扩展中知道您使用的是什么语言。）

当您启动一个新的编辑器选项卡时（Ctrl+N 等） -- 在空白页面的最左上角，您可能会看到：“选择一种语言以开始使用”。单击加粗的“选择一种语言”，然后选择在 Settings.json 文件中为 Emmet 配置的语言之一，如上面/下面的其他几个答案中所述。

现在，再试一次：输入 .test 并按 Tab，您应该会看到 Emmet 展开您的缩写。

【讨论】：

【解决方案2】：

有同样的问题，但打字稿。将 "typescript": "typescriptreact" 添加到 settings.json 有帮助。

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "razor": "html",
    "plaintext": "pug"
}

显然打字稿不是 emmet 的默认设置。

【讨论】：

【解决方案3】：

在 Visual Studio 代码中：文件 > 首选项 > 设置 > 扩展 > Emmet > 在 settings.json 文件中编辑

添加以下对我有用的代码。

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

我希望它对某人有所帮助。

【讨论】：

【解决方案4】：

在 Visual Studio Code 中编辑文件 settings.json 的路径文件 > 首选项 > 设置 > 扩展 > Emmet > 在 settings.json 中编辑

find file settings.json Edit file settings.json

【讨论】：

您不是在重复 2018 年 11 月之前的回答吗？

【解决方案5】：

几天后，在Emmet in Visual Studio Code webpage中调查我找到了解决方案。

您需要在用户设置文件中添加下一行以使用 Tab 键扩展 Emmet 缩写：

"emmet.triggerExpansionOnTab": true

这是因为默认情况下在 Visual Studio Code 上是禁用的。

【讨论】：

将此行添加到我的 settings.json 后，我仍然遇到问题。我得到的错误是command 'emmet.expandAbbreviation' not found。
@KshitijSaraogi "emmet.expandAbbreviation" 已弃用，您需要从 settings.json 中删除并添加 "emmet.triggerExpansionOnTab" 而不是
方括号后的制表符在启用此选项时仍然不起作用
@podlec 我再次检查了我的 VS Code，我可以确认它仍在工作
值得注意的是，对我来说，错误来自引用 emmet.expandAbbreviation 的键绑定，因此其他人也可能会检查键绑定。

【解决方案6】：

我认为方括号在 emmet 中不再起作用... 但是，您应该使用 p>{text} 作为大括号。据我了解，它用于在元素中添加文本。

所以 p>{text here} 将产生<p>text here</p>

如果您仍需要更多帮助，请查看 emmet 缩写语法文档：The Emmet Docs - Abbreviations Syntax

【讨论】：

您好，感谢您的回答。我尝试了你告诉我的方法，但也不起作用。与另一个结果相同......你的意思是方括号在 Emmet 上不再起作用了吗？我检查了文档，它仍然出现在那里......
哦，好吧...我认为您应该重新安装扩展程序...如果您检查了我发送给您的链接，它不存在
是的......事情是Visual Studio Code默认集成了Emmet
请停用扩展程序，重新加载 VS Code，然后在扩展程序商店中找到它并重新安装....
不幸的是它不起作用。我卸载了VS Code并删除了User文件夹和AppData中与配置相关的所有文件夹，重新安装它，问题仍然存在。