Prettier未遵循.prettierrc中singleAttributePerLine配置的问题

我在使用Prettier格式化HTML代码时遇到问题：已经在.prettierrc中显式设置singleAttributePerLine: false（默认值），但Prettier仍然将每个HTML元素的属性拆分为单独行。

我的.prettierrc配置：

{
    "printWidth": 120,
    "singleQuote": true,
    "useTabs": true,
    "tabWidth": 2,
    "semi": true,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "singleAttributePerLine": false
}

原始代码：

<ng-template #formAction>
  <ng-container *ngIf="userService.isImplementationManager()">
    <button class="btn btn-sm btn-link no-underline hover:underline text-error mr-3" (click)="disableImplementation()"
      type="button">Cancel</button>
    <button class="btn btn-sm btn-link no-underline hover:underline" type="submit"
      [disabled]="implementationDetailForm.invalid">Save</button>
  </ng-container>
</ng-template>

格式化后结果：

<ng-template #formAction>
    <ng-container *ngIf="userService.isImplementationManager()">
        <button
            class="btn btn-sm btn-link no-underline hover:underline text-error mr-3"
            (click)="disableImplementation()"
            type="button"
        >
            Cancel
        </button>
        <button
            class="btn btn-sm btn-link no-underline hover:underline"
            type="submit"
            [disabled]="implementationDetailForm.invalid"
        >
            Save
        </button>
    </ng-container>
</ng-template>

我已经确认使用的是最新版本的Prettier。

解决思路及方案 #

1. 排查配置覆盖问题 #

• 确认项目中不存在其他优先级更高的Prettier配置文件（如prettier.config.js、.prettierrc.json），这类文件会覆盖当前.prettierrc的设置。
• 检查IDE的Prettier插件配置，比如VS Code中是否在工作区设置里单独修改了singleAttributePerLine，或者开启了其他强制换行的选项。

2. 验证printWidth的实际限制 #

Prettier的printWidth计算包含缩进字符（你设置了useTabs: true+tabWidth: 2，每个tab按2字符算）。如果原始代码中元素的缩进+属性总长度超过120，即使singleAttributePerLine: false，Prettier也会触发换行。可以临时将printWidth调至180测试，若属性能保持单行，说明是行宽限制导致的。

3. 处理Angular插件的特殊逻辑 #

如果使用prettier-plugin-angular格式化Angular模板：

• 确保插件是最新版本，旧版本可能存在属性换行的bug
• 在配置中添加"angularAttributeIndentation": "none"，关闭属性的额外缩进

4. 局部跳过格式化 #

如果只需要特定元素保持单行，可在元素前添加<!-- prettier-ignore -->注释，强制Prettier跳过该部分：

<!-- prettier-ignore -->
<button class="btn btn-sm btn-link no-underline hover:underline text-error mr-3" (click)="disableImplementation()" type="button">Cancel</button>

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