VSCode 让 Emmet 在类名和 id 中使用单引号而不是双引号

Question

默认情况下，VSCode 中的 Emmet 在扩展类名和 ID 时使用双引号。例如，扩展

#bob.frank

创造

<div id="bob" class="frank"></div>

有没有办法让 Emmet 使用单引号，例如

<div id='bob' class='frank'></div>

Answer 1

解决方案是将这些行添加到settings.json文件中：

"emmet.syntaxProfiles": {
    "svelte": "html",
    "typescript": "html",
    "javascriptreact": "html",
    "typescriptreact": "html",
    "html": {
        "attr_quotes": "single",
        "self_closing_tag": true,
    },
},
"emmet.includeLanguages": {
    "svelte": "html",
    "typescript": "html",
    "javascriptreact": "html",
    "typescriptreact": "html",
    //"javascript": "javascriptreact"
},

（当然，您只需要包含您实际使用的语言。例如，如果您不使用svelte（为什么不？？）或 typescript，则将它们排除在外）

额外的：

如果您还想知道如何使用 Tab 键展开 Emmet 缩写，请添加以下行：

"emmet.triggerExpansionOnTab": true,

因此：对于您使用 Emmet 的每种语言，您希望将该语言类型映射到"html"，然后在"html"键中告诉它使用"attr_quotes": "single"

我在哪里进行此更改？

根据您的平台，用户设置文件 ( settings.json) 位于此处：

Windows: %APPDATA%\Code\User\settings.json
macOS  : $HOME/Library/Application Support/Code/User/settings.json
Linux  : $HOME/.config/Code/User/settings.json

在 VSCode 中打开 settings.json 文件的替代方法：

A。Ctrl + ,（逗号）打开“设置
” 工作台
C．设置编辑器
e. 在顶部的搜索框中，输入emmet.
f。在左侧，单击“工作台”，然后单击“外观”
g。单击右侧链接：在 settings.json 中编辑

参考：

https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/

Visual Studio Code 中的默认 Emmet 设置在哪里？

https://github.com/Microsoft/vscode/issues/32496

https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/

https://sudolabs.io/blog/tips-to-use-vscode-more-efficiently