VSCode中使用Prettier格式化HTML文件时无法保留单引号问题

我懂你遇到的糟心情况——在VSCode里用Prettier格式化HTML文件时，明明想保留单引号，结果每次格式化都被强制改成双引号，但JS/TS文件却能正常遵守单引号设置，就连Emmet生成的单引号也逃不过被替换的命运。别慌，咱们来搞定这个问题。

问题的核心在于：Prettier默认对HTML文件的引号规则是双引号，你全局设置的prettier.singleQuote只会作用于JS/TS/JSX/TSX这类文件，对HTML不生效。要让Prettier在HTML里也乖乖用单引号，得单独给HTML文件配置规则。

具体解决方案 #

修改你的settings.json，在针对HTML的配置块里添加Prettier的单引号规则：

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true
},

结合你已有的配置，关键部分应该是这样的：

"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true,
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true
},
"html.completion.attributeDefaultValue": "singlequotes",
"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}

配置细节解释 #

• [html]块里的prettier.singleQuote: true：专门给HTML文件单独开启单引号规则，直接覆盖Prettier对HTML的默认引号设置
• html.completion.attributeDefaultValue: "singlequotes"：让VSCode自带的HTML自动补全功能生成单引号
• emmet.syntaxProfiles.html.attr_quotes: "single"：确保Emmet缩写生成的HTML属性用单引号

验证步骤 #

1. 保存修改后的settings.json
2. 打开任意HTML文件，手动输入带单引号的属性，或者用Emmet生成一段代码
3. 触发格式化（快捷键Ctrl+Shift+I/Cmd+Shift+I），或者依靠editor.formatOnSave自动格式化
4. 检查属性引号是否稳定保持为单引号

这样调整后，Prettier格式化HTML时就会尊重你的单引号偏好，不会再强制转成双引号了。

内容的提问来源于stack exchange，提问作者gonkeykong