Emmet 展开缩写在带有属性的 Visual Studio Code 中不起作用

问题描述 投票:0回答:9

我开始在我的 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
9个回答
24
投票

几天后,在 Visual Studio Code 网页中的 Emmet 中进行调查,我找到了解决方案。

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

"emmet.triggerExpansionOnTab": true

这是因为默认情况下在 Visual Studio Code 上处于禁用状态。


15
投票

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

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

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

我希望它对某人有帮助。


1
投票

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

所以 p>{text here} 将产生

<p>text here</p>

如果您仍需要更多帮助,请查看 emmet 缩写语法文档:Emmet 文档 - 缩写语法


1
投票

有同样的问题,但使用打字稿。 将

"typescript": "typescriptreact"
添加到 settings.json 有帮助。

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

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


0
投票

上面/下面的答案描述了如何配置

settings.json
文件以启用/配置 Emmet:

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

当您启动新的编辑器选项卡时(Ctrl+N 或等) - 在空白页面的左上角,您可能会看到:“选择要开始的语言”。单击粗体的“选择语言”,然后选择在 Settings.json 文件中为 Emmet 配置的语言之一,如上面/下面的几个其他答案中所述。

现在,再试一次:输入

.test
并按 Tab 键,您应该会看到 Emmet 展开您的缩写。


0
投票

转到“扩展”面板:搜索@builtin:这将显示 VS Code 中已安装的扩展。滚动查看 emmet,因为 emmet 是预先构建并安装的,但已禁用,因此您必须在不更改用户设置或其他任何地方的任何内容的情况下启用它。就用这个方法吧。


-1
投票

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

"emmet.triggerExpansionOnTab": true,

-1
投票

无论如何,我遇到了同样的问题,但在将上面的代码片段添加到 Settings.json 后通过强制退出应用程序来修复它


-2
投票

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

找到文件settings.json 编辑文件settings.json

© www.soinside.com 2019 - 2024. All rights reserved.