如何配置Prettier实现HTML属性缩进（Angular场景）

嘿，我懂你想要让Angular模板里的HTML元素属性排版更清爽、每个属性单独缩进一行的需求！别担心，通过调整Prettier的配置就能轻松实现，咱们一步步来：

首先，你得找到项目里的Prettier配置文件——一般是.prettierrc或者.prettierrc.json，如果还没有的话，直接在项目根目录新建一个就行。

接下来把下面这些配置项加进去，这是适配Angular场景的关键设置：

{
  "singleAttributePerLine": true,
  "printWidth": 80,
  "htmlWhitespaceSensitivity": "css",
  "parser": "angular",
  "tabWidth": 2
}

我给你拆解下每个配置的作用：

• singleAttributePerLine: 这是核心！开启后，HTML元素的每个属性都会单独占一行，并且自动缩进，完美匹配你想要的排版效果
• printWidth: 控制代码换行的宽度阈值，配合上面的选项，能确保即使短属性也能按预期排版
• htmlWhitespaceSensitivity: 设置为css是为了让Prettier遵循CSS的空白处理规则，避免破坏Angular模板的样式逻辑
• parser: 指定用angular解析器，确保Prettier能正确识别Angular的模板语法（比如(click)这种事件绑定）
• tabWidth: 控制缩进的空格数，这里设为2，你也可以根据自己的习惯改成4

配置好之后，不管是手动触发格式化，还是在VS Code里设置保存自动格式化，你的Angular模板代码就会变成这样：

<button
  class="drop-down"
  (click)="showMenuPopup()"
  tabindex="-1"
>
  <img
    src="assets/dots.svg"
    alt="↓"
  />
</button>

如果之后你想调整排版细节，比如要不要让短元素保持一行，只需要把singleAttributePerLine改成false，再微调printWidth的值就行啦。

内容来源于stack exchange