VS Code中Prettier格式化缩进/间距不一致问题求助

以下是几个关键设置，可让Prettier的格式化效果保持一致：

• 控制换行触发阈值：调整prettier.printWidth配置，该值定义代码行的最大字符数，超过时自动换行。默认值为80，若希望更多属性保持单行，可将其调大（比如120）。在VS Code设置中直接搜索prettier.printWidth修改数值即可。

• 统一缩进标准：确保prettier.tabWidth设置为固定值（如2或4），同时关闭prettier.useTabs（若使用空格缩进）。通过VS Code设置搜索对应项调整，避免缩进大小混乱。

• 规范HTML空白处理：设置prettier.htmlWhitespaceSensitivity为strict或ignore：

  • strict：严格遵循HTML空白规则，避免不必要的间距变化
  • ignore：忽略空白差异，适合对空白不敏感的场景
    另外，prettier.singleAttributePerLine可控制是否强制每个属性单独一行，设为false时，属性会在不超过printWidth的情况下保持同行。

• 锁定默认格式化器：在VS Code设置中搜索editor.defaultFormatter，将其设置为esbenp.prettier-vscode，防止其他格式化插件干扰Prettier的效果。

• 检查项目局部配置：项目根目录的.prettierrc、.prettier.config.js等文件会覆盖全局设置，确保这些文件中的规则统一，示例配置：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "strict",
  "singleAttributePerLine": false
}

内容的提问来源于stack exchange，提问作者Mr. Mark Tawin