Visual Studio Code 中的 Emmet 有问题答案

【问题标题】：Something is wrong with Emmet in Visual Studio CodeVisual Studio Code 中的 Emmet 有问题
【发布时间】：2018-01-22 03:56:58
【问题描述】：

在上次更新后，Emmet 以某种不同（不正确）的方式工作。

如果我在 Emmet 语法中键入常用代码，例如：

.row>.col*2

然后按 Tab 不起作用。

如果我输入：

h1{Some title}

然后按 Tab 它也不起作用，但是如果我将光标放在括号内，然后按 Tab - 在这种情况下它会起作用。

这是我的 Visual Studio Code 配置：

"editor.fontSize": 12,
"editor.wordWrap": "on",
"editor.wrappingIndent": "indent",
"editor.minimap.enabled": true,
"workbench.iconTheme": "material-icon-theme",
"window.zoomLevel": 0,
"window.openFilesInNewWindow": "off",
"window.openFoldersInNewWindow": "on",
"workbench.welcome.enabled": false,
"workbench.colorTheme": "Default Light+",
"[stylus]": {
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    }
},
"emmet.preferences": {
    "stylus.valueSeparator": ": "
},
"git.enableSmartCommit": true

我该如何解决？

【问题讨论】：

标签： visual-studio-code emmet vscode-settings

【解决方案1】：

从 1.15.1 版开始，这对我有用：

打开你的偏好并添加

"emmet.triggerExpansionOnTab": true

似乎 Tab 不再与 Emmet 关联。

如果您使用的是v1.33.0 或更新版本，您还可以打开首选项并输入trigger expansion 之类的内容，现在这只是一个简单的切换。当然，您仍然可以在settings.json 文件中执行上述操作。

【讨论】：

谢谢！更具体地说，在 Windows 上，您需要转到文件 > 首选项 > 设置 > 输入“启动”> 单击“在 settings.json 中编辑”
这是唯一对我有用的东西 :) 顺便说一句，我正在使用 macOS。

【解决方案2】：

我刚刚遇到了同样的问题，但我的原因略有不同。我不仅需要将 triggerExpansionOnTab 设置为 true，还需要在 settings.json 文件中设置包含的语言。

在我的例子中，没有为 blade.php 文件激活 Emmet。所以，我需要在includedLanguages 部分中添加"blade":"html"。

完整示例：

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascript",
    "vue-html": "html",
    "php": "html",
    "blade": "html",
}

添加它也可能有帮助：

"emmet.useNewEmmet": true,

【讨论】：

【解决方案3】：

我阅读了更新评论，发现 Visual Studio Code 删除了 Tab 键以扩展缩写 Emmet 2.0 in Visual Studio Code。

【讨论】：

【解决方案4】：

Tab 不再作为 Lukavis mentioned 用于 Emmet。很伤心，但你仍然可以：

转到菜单文件 → 首选项 → 键盘快捷键
搜索“emmet”
查找 editor.emmet.action.expandAbbreviation
使用 Ctrl + Tab 或任何你喜欢的键绑定...

【讨论】：

这有点不对劲。请参阅 Brad Ahrens 对 "emmet.triggerExpansionOnTab" 的回答，这将允许您再次使用选项卡。