Emmet 扩展缩写在 Visual Studio 具有属性的代码中不起作用

Question

我开始为我的 Web 项目使用 Visual Studio 代码，没有 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>

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

p[align="center"]

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

p{Test}

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

此致，

Answer 1

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

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

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

Answer 2

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

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

"emmet.triggerExpansionOnTab": true

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

Answer 3

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

中编辑

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

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

希望对大家有所帮助。

Answer 4

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

中编辑

find file settings.json Edit file settings.json

Answer 5

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

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

显然 typescript 不是 emmet 的默认设置。

Answer 6

关于描述如何配置您的 settings.json 文件以启用/配置 Emmet 的 above/below 答案：

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

当您启动一个新的编辑器选项卡时 （Ctrl+N 或其他） -- 在空白页面的最左上角，您可能会看到：“Select一种入门语言”。单击粗体“Select 一种语言”并选择一种在 Settings.json 文件中为 Emmet 配置的语言，如其他几个答案 above/below.[=12= 中所述]

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

Answer 7

在 Visual Studio 代码中：文件 > 首选项 > 设置 > 扩展 > Emmet > 在 settings.json 文件中编辑删除以下行并保存。

"emmet.triggerExpansionOnTab": true,

Emmet 扩展缩写在 Visual Studio 具有属性的代码中不起作用

Emmet expand abbreviation doesn't work in Visual Studio Code with the attributes

html

visual-studio-code

emmet