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

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 + ,（逗号）打开“设置”
b.工作台
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

Answer 2

只是想补充一点，如果您想在 JSX/TSX 中的属性值周围使用单引号，同时仍想保留

.html

文件的现有行为（例如属性值周围的双引号），您可以使用：

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

参考资料：

• 其他文件类型中的 Emmet 缩写
• syntaxProfiles.json

Answer 3

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

Answer 4

在 VSCode 中，要自动补全带有单引号/双引号的属性，请根据文件类型在

File > Preferences > Settings

中搜索以下属性，并将下拉值更新为

single

或

double

。

1. 对于 HTML 文件：

   html.completion.attributeDefaultValue

2. 对于 JavaScript 文件：

   javascript.preferences.quoteStyle

3. 对于 TypeScript 文件：

   typescript.preferences.quoteStyle