VSCode 让 Emmet 在 class 名称和 ID 中使用单引号而不是双引号

Question

默认情况下，VSCode 中的 Emmet 在扩展 class 名称和 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，则保留 ' em out)

额外:

如果您还想知道如何使用 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

打开 settings.json 文件的备用方法 VSCode:

一个。 Ctrl + ,（逗号）打开设置
b. Workbench
C。设置编辑器
e.在顶部的搜索框中，输入 emmet.
F。在左侧，单击 Workbench，然后单击外观
G。点击右边的link：在settings.json

中编辑

参考文献：

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

Where are the default Emmet settings in Visual Studio Code?

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

Answer 2

只是想补充一点，如果您想在 JSX/TSX 中对属性值使用单引号，同时仍想保留 .html 文件的现有行为（例如，在属性值周围使用双引号），您可以使用：

{
  "emmet.includeLanguages": {
    "javascriptreact": "xml",
    "typescriptreact": "xml"
  },
  "emmet.syntaxProfiles": {
    "xml": {
      "attr_quotes": "single"
    }
  }
}

参考文献：

Answer 3

如果您使用的是 prettier，请在设置中搜索单引号并检查更漂亮：Jsx 单引号

VSCode 让 Emmet 在 class 名称和 ID 中使用单引号而不是双引号

VSCode Make Emmet use single quotes instead of double quotes in class names and ids

visual-studio-code

vscode-settings

emmet