如何避免Prettier破坏Angular模板对象绑定？

问题场景 #

使用Prettier格式化Angular内联模板后，构建过程触发NG5002解析错误，格式化后的代码不符合Angular模板解析器的语法要求。

原始可运行代码 #

<a class="main-color"
          [routerLink]="'/lessons/view/' + data.id"
          [queryParams]="{ lessonId: data.id, studentId: (currentRoleId == 3 && data?.student_id ) ? data?.student_id : null }"
        >
            <span nz-icon nzType="eye" nzTheme="outline"></span
            ></a>

Prettier格式化后的代码 #

<a
            class="main-color"
            [routerLink]="'/lessons/view/' + data.id"
            [queryParams]="{
              lessonId: data.id,
              studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
            }"
          >
            <span nz-icon nzType="eye" nzTheme="outline"></span
          ></a>

构建错误信息 #

error NG5002: Parser Error: Unexpected token }, expected identifier, keyword, or string at column 139 in [{
              lessonId: data.id,
              studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
            }] in
148             [queryParams]="{
                               ~
149               lessonId: data.id,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
150               studentId: currentRoleId == 3 && data?.student_id ? data?.student_id : null,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
151             }"
    ~~~~~~~~~~~~~

当前ESLint配置 #

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "prettier/prettier": [
          "error",
          {
            "printWidth": 100,
            "tabWidth": 2,
            "tabs": false,
            "singleQuote": true,
            "semicolon": true,
            "quoteProps": "preserve",
            "bracketSpacing": true,
            "overrides": [
              {
                "files": "*.html",
                "options": {
                  "parser": "angular"
                }
              }
            ]
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "printWidth": 100,
            "tabWidth": 2,
            "tabs": false,
            "singleQuote": true,
            "semicolon": true,
            "quoteProps": "preserve",
            "bracketSpacing": true,
            "overrides": [
              {
                "files": "*.html",
                "options": {
                  "parser": "angular"
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

问题分析与临时方案 #

问题分析 #

Prettier格式化时给[queryParams]绑定的对象字面量最后一个属性添加了尾逗号，而Angular的模板解析器不支持内联对象字面量中的尾逗号语法，因此触发NG5002解析错误。

临时解决方法 #

• 格式化后手动删除对象最后一个属性后的尾逗号
• 保持对象字面量在同一行，避免Prettier换行并添加尾逗号

但这两种方法在大型团队或CI自动化环境中并不适用，无法保证所有成员都能遵守手动修改规则。

核心疑问 #

是否可以通过配置Prettier，避免给Angular模板中的对象字面量添加尾逗号？或者有没有专门针对Angular [queryParams]绑定的解决方法，抑制这种导致错误的格式化行为？

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