如何为Angular 15项目添加旧版预制ESLint配置（升级至16）

1. 创建自定义兼容配置文件 #

在项目根目录新建eslint-configs文件夹，里面创建两个配置文件，复制以下内容：

eslint-configs/ng-cli-compat.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@angular-eslint/recommended',
    'plugin:@angular-eslint/template/process-inline-templates',
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    '@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'app', style: 'camelCase' }],
    '@angular-eslint/component-selector': ['error', { type: 'element', prefix: 'app', style: 'kebab-case' }],
    // 可根据原项目需求添加更多v15版本的默认规则
  },
};

eslint-configs/ng-cli-compat--formatting-add-on.js

module.exports = {
  extends: [
    './ng-cli-compat.js',
    'plugin:@angular-eslint/template/recommended',
    'plugin:@angular-eslint/template/accessibility',
  ],
  rules: {
    '@angular-eslint/template/no-unused-expressions': 'error',
    '@angular-eslint/template/eqeqeq': 'error',
    // 可根据原项目需求添加更多格式化相关规则
  },
};

2. 更新项目ESLint配置 #

打开项目根目录的.eslintrc.json（或.eslintrc.js），将原来的@angular-eslint/ng-cli-compat和@angular-eslint/ng-cli-compat--formatting-add-on替换为自定义配置路径：

示例（.eslintrc.json）

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "extends": [
    "./eslint-configs/ng-cli-compat--formatting-add-on.js"
  ],
  "parserOptions": {
    "project": ["tsconfig.json", "e2e/tsconfig.json"],
    "createDefaultProgram": true
  },
  // 保留项目原有其他配置
}

3. 确保依赖版本匹配 #

运行以下命令安装v16版本的angular-eslint相关依赖，避免版本不一致：

npm install @angular-eslint/eslint-plugin@16 @angular-eslint/eslint-plugin-template@16 @angular-eslint/template-parser@16 @typescript-eslint/eslint-plugin@6 @typescript-eslint/parser@6 eslint@8 --save-dev

4. 验证配置 #

运行ESLint检查命令确认配置生效：

ng lint

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