如何在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進行代碼檢查了。