如何在Angular项目中配置Prettier使其支持单引号规则

故障排查步骤 #

• 检查项目内优先级更高的配置文件
  Prettier读取配置的优先级为：项目根目录下的.prettierrc、prettier.config.js、.prettierrc.json等独立配置文件 > VS Code工作区设置 > VS Code全局设置。如果项目根目录存在上述配置文件，且内部声明了"singleQuote": false，会直接覆盖你在VS Code设置中填写的参数，将该配置项修改为true即可。
  额外注意：如果项目存在.editorconfig文件，也需要检查其中是否有引号相关的配置，避免冲突。
• 处理TSLint与Prettier的规则冲突
  如果你开启了保存时自动修复TSLint问题的配置（VS Code中对应editor.codeActionsOnSave下的source.fixAll.tslint参数），而tslint.json中的quotemark规则配置为要求双引号，就会出现Prettier先把引号改为单引号，TSLint又自动修复回双引号的冲突。
  解决方法：将tslint.json中的quotemark规则修改为["error", "single"]，和Prettier规则对齐；如果要彻底避免两类工具的规则冲突，可引入tslint-config-prettier关闭TSLint中与Prettier重叠的格式规则。
• 确认格式化工具与配置生效范围
  1. 右键任意.ts文件的代码区域，选择「使用...格式化文档」，确认默认格式化器确实为esbenp.prettier-vscode，避免其他格式化插件抢占执行。
  2. 打开VS Code设置，切换到「工作区」标签页，检查是否有prettier.singleQuote被覆盖为false，工作区配置的优先级高于全局配置。

特殊说明 #

Prettier的singleQuote规则存在默认例外：如果字符串内容本身包含单引号，Prettier会自动使用双引号避免转义，你提供的示例代码不存在该情况，可直接排除。

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