Angular 14手动迁移ESLint移除TSLint依赖报错解决方案

故障原因 #

ng add @angular-eslint/schematics执行失败由三类明确问题导致：

• 项目中@ngrx/effects@13.2.0的peer依赖要求为@angular/core@^13.0.0，和当前Angular 14环境的@angular/core@14.0.2版本不兼容，npm v7+默认开启的严格peer依赖校验直接阻断安装流程
• 项目残留的旧版ESLint插件eslint-plugin-import@2.22.1、eslint-plugin-jsdoc@30.7.6最高仅支持ESLint 7版本，和Angular 14配套的ESLint 8版本存在依赖冲突
• 之前执行schematic中途失败，已经写入了14.0.0-alpha.3预览版的@angular-eslint依赖，但没有完成配置文件替换和angular.json构建配置修改，因此当前代码校验仍由TSLint接管，迁移未实际生效。

分步修复操作 #

1. 修复核心框架依赖版本不匹配问题 #

首先将所有NgRx相关依赖升级到适配Angular 14的v14正式版本，执行命令：

ng update @ngrx/store@14 @ngrx/effects@14

如果执行时仍报peer依赖错误，追加--legacy-peer-deps参数即可，升级完成后NgRx会自动匹配Angular 14的core版本要求，不会出现运行时兼容问题。

2. 清理半安装状态的冲突依赖 #

先删除残留的旧版ESLint插件、未安装完成的alpha版@angular-eslint包：

npm uninstall eslint-plugin-import eslint-plugin-jsdoc @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics @angular-eslint/template-parser

执行完成后，删除项目根目录下的node_modules文件夹和package-lock.json文件，执行一次干净的基础依赖安装，清除旧依赖缓存：

npm install

3. 安装适配Angular 14的稳定版@angular-eslint套件 #

Angular 14对应的@angular-eslint稳定版本为14.x，禁止使用alpha预览版，执行安装命令：

ng add @angular-eslint/schematics@14 --legacy-peer-deps

追加--legacy-peer-deps参数是为了跳过npm严格peer依赖校验，避免项目中其他未及时升级的小众插件阻断安装流程，不会影响ESLint核心校验功能。

4. 手动补全缺失的配置（若schematic未自动生成） #

如果命令执行完成后项目根目录没有生成.eslintrc.json文件，手动在根目录创建该文件，写入Angular项目基础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"
      ],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

接着打开angular.json文件，找到对应项目的architect节点，删除原有的tslint配置项，替换为ESLint的builder配置：

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

5. 彻底移除TSLint相关内容 #

卸载TSLint及Angular专属的TSLint规则包，删除项目根目录的tslint.json配置文件：

npm uninstall tslint codelyzer

打开package.json的scripts节点，将原有lint命令替换为：

"lint": "ng lint"

6. 验证迁移结果 #

执行lint命令验证配置是否正常生效：

npm run lint

验证通过后，故意在代码中写入不符合规范的语法，若由ESLint捕获报错，说明迁移完成。如果IDE中仍显示TSLint报错，在IDE插件管理页禁用TSLint插件、启用ESLint插件即可。

后续注意事项 #

• 后续新增ESLint插件时，选择支持ESLint 8的版本即可，避免再次出现版本冲突
• 如果需要自定义校验规则，直接在.eslintrc.json的rules节点添加配置即可，不需要重新执行schematic命令

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