在 Visual Studio Code 中集成 ESLint新手教程_eslint.config.mjs 文件使用

本文将指导您在 Angular 项目中集成 ESLint，并在 Visual Studio Code (VS Code) 中配置和使用 ESLint。

1. 安装必要的依赖项
   首先，确保您已在项目中安装 Angular CLI。如果还没有，请运行以下命令：

npm install -g @angular/cli
1

然后，进入您的项目目录并安装以下必要的 ESLint 相关依赖项：

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

2. 配置 ESLint
   创建或修改项目根目录下的 eslint.config.mjs 文件，内容如下：

import typescriptEslintPlugin from '@typescript-eslint/eslint-plugin';
import typescriptEslintParser from '@typescript-eslint/parser';

/** @type {import('eslint').Linter.FlatConfig[]} */
const config = [
  {
    files: ['**/*.ts'], // 仅针对 TypeScript 文件
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      parser: typescriptEslintParser,
    },
    plugins: {
      '@typescript-eslint': typescriptEslintPlugin,
    },
    rules: {
      'semi': ['error', 'always'], // 确保使用分号
      // 在此添加其他 ESLint 规则
    },
  },
];

export default config;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 更新 Angular 项目配置
   编辑 angular.json 文件，将 TSLint 配置替换为 ESLint：

{
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "tamalelibs": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/tamalelibs",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "tamalelibs:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "tamalelibs:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "tamalelibs:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/ut.dev.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:eslint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    },
    "tamalelibs-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "tamalelibs:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "tamalelibs:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:eslint",
          "options": {
            "lintFilePatterns": [
              "e2e/**/*.ts"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "tamalelibs"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

4. 更新 VSCode 设置
   打开 VSCode 设置 (settings.json)，确保 ESLint 插件已启用，并配置保存时自动修复代码：

{
    "window.zoomLevel": 0,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "editor.renderWhitespace": "boundary",
    "editor.formatOnSave": false,
    "typescript.preferences.quoteStyle": "single",
    "typescript.preferences.importModuleSpecifier": "relative",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "files.trimTrailingWhitespace": true,
    "editor.guides.indentation": true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

确保已安装 ESLint VSCode 扩展程序。在 VSCode 中打开扩展视图，搜索 “ESLint” 并安装。

5. 运行 ESLint
   在终端中运行以下命令以 lint TypeScript 文件并自动修复问题：

npx eslint "src/**/*.ts" --fix
1

您还可以通过在 package.json 中添加脚本来简化这个过程：

"scripts": {
  // 其他脚本
  "lint": "eslint \"src/**/*.ts\" --fix"
}
1
2
3
4

然后，您可以使用以下命令来运行 ESLint：

npm run lint
1

通过以上步骤，您已经在您的 Angular 项目中成功集成并配置了 ESLint，并在 VSCode 中设置了保存时自动修复代码。这将有助于确保您的代码风格一致，并减少代码中的潜在错误。