Angular项目配置Linter与Prettier实现指定HTML格式化规则

针对你提出的两条HTML格式化规则，结合ESLint（@angular-eslint）和Prettier可以实现自动检查/修复，具体方案如下：

一、强制class属性置于元素末尾（检查+自动修复） #

这个需求靠ESLint的Angular模板规则实现，步骤如下：

1. 确保项目已安装@angular-eslint（Angular初始化时选ESLint的话默认已装，否则执行ng add @angular-eslint/schematics安装）

2. 在项目根目录的.eslintrc.json中，修改overrides里的HTML规则配置，添加属性排序规则，把class放在最后：

{
  "overrides": [
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "@angular-eslint/template/attributes-order": [
          "error",
          {
            "order": [
              "structuralDirectives", // 结构型指令（如*ngIf、*ngFor）
              "attributeDirectives",  // 属性型指令（如ngModel）
              "bindings",             // 绑定语法（如[input]、(output)）
              "attributes",           // 普通HTML属性
              "class"                 // class属性放在最后
            ]
          }
        ]
      }
    }
  ]
}

配置完成后，运行ng lint会检查class位置是否合规，执行ng lint --fix可以自动把class移到末尾。

二、元素属性超过2个时逐行排列（检查+自动修复） #

这个需求可以结合Prettier和ESLint规则实现：

方式1：用Prettier实现近似效果（自动格式化） #

Prettier没有直接的"超过N个属性换行"配置，但可以通过调整打印宽度实现：

修改根目录的.prettierrc.json：

{
  "printWidth": 80, // 属性总长度超过这个值时自动换行，可根据团队需求调整
  "singleAttributePerLine": false, // 短元素保持单行，多属性长元素自动换行
  "htmlWhitespaceSensitivity": "css"
}

方式2：用ESLint规则强制超过2个属性必须换行（精准控制） #

如果需要严格要求"≥3个属性必须逐行排列"，可以安装eslint-plugin-template-rules插件：

1. 安装依赖：npm install eslint-plugin-template-rules --save-dev

2. 在.eslintrc.json的HTML规则中添加：

{
  "overrides": [
    {
      "files": ["*.html"],
      "plugins": ["template-rules"],
      "rules": {
        "template-rules/attribute-newline": [
          "error",
          {
            "minAttributes": 3 // 超过2个属性时强制逐行排列
          }
        ]
      }
    }
  ]
}

这个规则会检查属性数量，执行ng lint --fix可以自动把多属性元素拆成逐行排列。

三、整合ESLint与Prettier避免冲突 #

为了防止两个工具的规则冲突，需要安装并集成相关依赖：

1. 安装依赖：npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 修改.eslintrc.json的extends：

{
  "extends": [
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/recommended",
    "plugin:prettier/recommended" // 让ESLint兼容Prettier规则
  ]
}

四、日常使用验证 #

• 运行ng lint检查所有模板文件是否符合规则
• 运行ng lint --fix自动修复所有可自动修正的问题
• 在VS Code等IDE中安装ESLint和Prettier插件，开启"保存时自动修复"，可以实时应用规则

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