执行ng lint时ESLint提示/src文件被忽略的问题求助

问题场景 #

运行ng lint时触发以下错误：

Error when running ESLint: All files matching the following patterns are ignored:
- '/src/**/*.ts'
- '/src/**/*.html'

Please check your '.eslintignore' file.

已尝试以下操作但未解决：

• 无.eslintignore文件，创建后问题依旧
• 尝试添加--no-ignore参数，但该参数不被@angular-eslint/builder支持
• 移除angular.json中的lintFilePatterns配置，触发Schema验证错误：

  Error: Schema validation failed with the following errors:
    Data path "" must have required property 'lintFilePatterns'.
  

当前配置文件内容 #

angular.json中的lint配置 #

...
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "/src/**/*.ts",
              "/src/**/*.html"
            ]
          }
        }
...

eslint.config.mjs配置 #

import typescriptEslint from 'typescript-eslint';

export default typescriptEslint.config(
  { ignores: [ '.angular/**', 'dist/**', 'node_modules/**' ] },
  {
    name: 'Basic JS/TS PIT ESLint config',
    files: [ '**/*.js', '**/*.cjs', '**/*.mjs', '**/*.ts' ],
    rules: {
      'arrow-body-style': [ 'warn', 'as-needed' ],
      'capitalized-comments': [
        'warn',
        'always',
        { line: { ignoreConsecutiveComments: true } },
      ],
      'constructor-super': 'error',
      curly: 'error',
      complexity: 'off',
      eqeqeq: [ 'error', 'always' ],
      'guard-for-in': 'error',
      'max-classes-per-file': 'off',
      'no-bitwise': 'error',
      'no-caller': 'error',
      'no-cond-assign': [ 'error', 'always' ],
      'no-console': [ 'error', { allow: [ 'error', 'info', 'warn' ] } ],
      'no-debugger': 'error',
      'no-empty': 'error',
      'no-eval': 'error',
      'no-fallthrough': 'error',
      'no-new-wrappers': 'error',
      'no-shadow': 'off',
      'no-undef-init': 'warn',
      'no-unsafe-finally': 'error',
      'no-unused-expressions': 'error',
      'no-unused-labels': 'error',
      'no-use-before-define': 'off',
      'no-var': 'error',
      'object-shorthand': 'warn',
      'prefer-template': 'warn',
      radix: 'error',
      'use-isnan': 'error',
      'valid-typeof': 'off',
    },
  }
);

问题原因 #

1. 路径格式错误：angular.json中lintFilePatterns使用了根路径绝对路径（开头带/），Angular项目中需使用相对路径才能让ESLint正确匹配文件，绝对路径会导致文件被误判为忽略。
2. 缺少HTML文件支持：当前ESLint配置仅处理JS/TS文件，未配置Angular HTML模板的检查规则，导致ng lint无法识别HTML文件。

解决方案步骤 #

1. 修正angular.json中的路径格式 #

将lintFilePatterns的绝对路径改为相对路径：

...
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
...

2. 安装HTML模板检查依赖 #

执行以下命令安装Angular HTML模板的ESLint插件：

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

3. 更新eslint.config.mjs添加HTML支持 #

修改配置文件，引入模板插件并添加HTML规则：

import typescriptEslint from 'typescript-eslint';
import angularEslintTemplate from '@angular-eslint/template';

export default typescriptEslint.config(
  { ignores: [ '.angular/**', 'dist/**', 'node_modules/**' ] },
  {
    name: 'Basic JS/TS PIT ESLint config',
    files: [ '**/*.js', '**/*.cjs', '**/*.mjs', '**/*.ts' ],
    rules: {
      // 保留原有TS/JS规则
      'arrow-body-style': [ 'warn', 'as-needed' ],
      'capitalized-comments': [
        'warn',
        'always',
        { line: { ignoreConsecutiveComments: true } },
      ],
      'constructor-super': 'error',
      curly: 'error',
      complexity: 'off',
      eqeqeq: [ 'error', 'always' ],
      'guard-for-in': 'error',
      'max-classes-per-file': 'off',
      'no-bitwise': 'error',
      'no-caller': 'error',
      'no-cond-assign': [ 'error', 'always' ],
      'no-console': [ 'error', { allow: [ 'error', 'info', 'warn' ] } ],
      'no-debugger': 'error',
      'no-empty': 'error',
      'no-eval': 'error',
      'no-fallthrough': 'error',
      'no-new-wrappers': 'error',
      'no-shadow': 'off',
      'no-undef-init': 'warn',
      'no-unsafe-finally': 'error',
      'no-unused-expressions': 'error',
      'no-unused-labels': 'error',
      'no-use-before-define': 'off',
      'no-var': 'error',
      'object-shorthand': 'warn',
      'prefer-template': 'warn',
      radix: 'error',
      'use-isnan': 'error',
      'valid-typeof': 'off',
    },
  },
  // 引入Angular模板推荐规则
  ...angularEslintTemplate.configs['flat/recommended'],
  // 自定义HTML规则
  {
    files: ['**/*.html'],
    rules: {
      '@angular-eslint/template/no-duplicate-attributes': 'error',
      '@angular-eslint/template/banana-in-box': 'error',
    },
  }
);

4. 验证修复效果 #

运行ng lint命令检查是否正常执行：

ng lint

若仍有问题，可清理缓存后重试：

npm cache clean --force
ng cache clean

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