Angular 8项目ESLint+Prettier格式化Angular管道括号错误求助

在基于Angular 8.2.14的项目中引入Prettier+ESLint统一代码规范时，遇到了一个问题：Prettier格式化HTML模板时，会错误地给三元运算符的else分支管道添加括号，改变了原本的表达式逻辑（原本管道应作用于三元运算的整体结果，格式化后仅作用于'No'）。

问题复现 #

原始预期代码：

<td data-label="small text">
  {{ booleanValue ? 'Yes' : 'No' | ourCustomPipe }}
</td>

Prettier格式化后错误代码：

<td data-label="small text">
  {{ booleanValue ? 'Yes' : ('No' | ourCustomPipe) }}
</td>

我们需要要么保留原始逻辑的格式化规则，要么让Prettier自动将整个三元表达式括起来（使管道作用于整体结果），同时保留其他格式化规则。

解决方案1：调整Prettier配置，针对HTML禁用表达式括号自动包裹 #

在项目根目录的prettier.config.js或.prettierrc中添加HTML文件的自定义规则，禁用表达式括号的自动添加行为：

module.exports = {
  // 全局Prettier配置
  singleQuote: true,
  printWidth: 120,
  // 针对HTML文件的覆盖规则
  overrides: [
    {
      files: ["*.html"],
      options: {
        angularBracketSpacing: false,
        bracketSameLine: true,
        // 关键配置：关闭表达式括号的自动添加
        expressionBracketSpacing: false
      }
    }
  ]
};

解决方案2：用Angular ESLint规则强制表达式优先级 #

通过@angular-eslint插件的规则，强制管道的优先级逻辑，同时让Prettier遵循ESLint的规范：

1. 确保已安装依赖：

npm install @angular-eslint/eslint-plugin-template --save-dev

2. 在ESLint配置文件（.eslintrc.json）中添加规则：

{
  "plugins": ["@angular-eslint/template"],
  "rules": {
    "@angular-eslint/template/expression-operators": ["error", {
      "pipePrecedence": "all"
    }]
  }
}

这个规则会强制管道作用于整个表达式，Prettier会自动将三元表达式括起来，得到第二种预期结果：

<td data-label="small text">
  {{ (booleanValue ? 'Yes' : 'No') | ourCustomPipe }}
</td>

解决方案3：局部禁用Prettier格式化 #

如果仅需针对个别代码块保留原始格式，可在代码上方添加注释：

<!-- prettier-ignore -->
<td data-label="small text">
  {{ booleanValue ? 'Yes' : 'No' | ourCustomPipe }}
</td>

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