如何在Angular项目中使用ESLint替代TSLint

从Angular 11版本开始，Angular团队已经宣布停止支持TSLint，并推荐使用ESLint作为代码检查工具。使用ESLint替代TSLint需要一些配置步骤，以下是在Angular项目中使用ESLint的一般步骤：

1. 安装ESLint和相关插件：

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

2. 创建.eslintrc.json配置文件： 在项目根目录下创建一个.eslintrc.json文件，并添加以下配置：

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
      },
      "plugins": ["@angular-eslint/eslint-plugin"],
      "extends": [
        "plugin:@angular-eslint/recommended"
      ]
    }
  ]
}

3. 配置lint脚本： 在package.json文件中的"scripts"中添加lint脚本：

"lint": "eslint . --ext .ts"

4. 移除TSLint配置： 如果项目中已经有TSLint配置文件（tslint.json），需要将其删除或者将其重命名为tslint.json.disabled等。

5. 运行lint检查： 运行以下命令进行lint检查：

npm run lint

6. 可选步骤 - 集成ESLint到VSCode： 如果使用VSCode作为IDE，可以安装ESLint插件，并在settings.json中添加以下配置：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

通过以上步骤，您就可以在Angular项目中使用ESLint替代TSLint进行代码检查了。