能否仅在IDE中使用ESLint而不配置到Angular项目？

核心思路 #

只让IDE通过ESLint插件实时检测代码问题并高亮显示，完全不把ESLint集成到Angular的编译、构建流程中，既不影响现有项目的正常编译，又能在开发时看到规范提示。

具体步骤 #

1. 安装ESLint及Angular相关依赖
   执行以下命令安装所需开发依赖：

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

   也可以用Angular官方schematics快速初始化，但后续不要将ESLint绑定到构建流程：

   ng add @angular-eslint/schematics
   

2. 配置ESLint规则文件
   在项目根目录创建或修改.eslintrc.json，根据需求开启严格规则（比如禁用any、强制返回类型等），示例配置如下：

   {
     "root": true,
     "ignorePatterns": ["projects/**/*", "dist/**/*"],
     "overrides": [
       {
         "files": ["*.ts"],
         "parserOptions": {
           "project": ["tsconfig.json"],
           "createDefaultProgram": true
         },
         "extends": [
           "eslint:recommended",
           "plugin:@typescript-eslint/recommended",
           "plugin:@typescript-eslint/recommended-requiring-type-checking",
           "plugin:@angular-eslint/recommended"
         ],
         "rules": {
           "@typescript-eslint/no-explicit-any": "error",
           "@typescript-eslint/explicit-function-return-type": "error",
           "@typescript-eslint/no-unused-vars": "warn"
         }
       },
       {
         "files": ["*.html"],
         "extends": ["plugin:@angular-eslint/template/recommended"],
         "rules": {}
       }
     ]
   }
   

3. 配置IDE（以VS Code为例）单独启用ESLint检测

   • 安装VS Code的「ESLint」插件（作者：Dirk Baeumer）
   • 在项目根目录创建.vscode/settings.json，添加以下配置，确保IDE单独处理ESLint检测，不关联项目构建：

     {
       "eslint.enable": true,
       "eslint.validate": ["javascript", "typescript", "html"],
       "eslint.run": "onType",
       "eslint.lintTask.enable": false,
       "angular-eslint.enable": true
     }
     

     其中eslint.run: onType会在输入代码时实时检测高亮问题，也可设为onSave仅在保存时检测。

4. 确保ESLint不参与Angular编译流程

   • 检查angular.json，确认build、test等目标配置中，没有添加@angular-eslint/builder:lint相关的步骤或builder
   • 检查package.json的scripts，确保build、start等命令仅执行Angular原生命令（比如ng build、ng serve），没有附加ESLint检查命令

5. 可选：渐进式整改旧代码
   如果旧文件问题太多，可以通过以下方式逐步处理：

   • 在.eslintignore文件中添加暂时忽略的文件/目录，比如src/legacy/**/*
   • 在单个文件顶部添加注释临时禁用特定规则，比如/* eslint-disable @typescript-eslint/no-explicit-any */
   • 新代码严格遵循ESLint规则，旧代码在迭代时逐步重构

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