VScode下使用ESLint檢查typescript代碼

初始化項目：

npm init --y

全局或本地安裝typescript：

npm install typescript -g

創建tsconfig.json文件：

tsc --init

本地安裝eslint：

npm install eslint --save-dev

安裝eslint之後，新建並配置.eslintrc.json（不是.eslintrc.js）文件。recommonded表示使用默認推薦的檢查規則。

{
    "extends": [
        "eslint:recommended"
    ]
}

安裝@typescript-eslint/parser，自定義的解析器，用於替代ESLint默認的解析器，結合了typescript-estree，幫助eslint檢查typescript代碼。

npm install @typescript-eslint/parser --save-dev

此處需要考慮typescript-eslint/parser與typescript版本的兼容性。

在eslintrc.文件中添加parser屬性聲明：

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended"
    ]
}

安裝@typescript-eslint/eslint-plugin，幫助應用typescript的檢查規則

npm i @typescript-eslint/eslint-plugin --save-dev

在eslintrc.文件中添加plugins屬性聲明以及extends中添加plugin的兩項屬性值

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "plugins": ["@typescript-eslint"]
}

最後補充其他需要的配置聲明。

parserOptions用於指定你想要支持的 JavaScript 語言選項，比如ECMAScript的版本，文件類型等等。env包含了代碼中可以使用的全局變量，例如包含了browser纔可以使用console。rules是最基本的功能，可以添加或者修改檢查規則。

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "env": {
        "node": true,
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jquery": true
    },
    "rules": {
        "linebreak-style": ["error", "windows"],
        "no-console": 0
    }
}

VScode配置文件中添加對.ts文件的自動檢測：

{
      "language": "typescript",
      "autoFix": true
}

一定要注意各版本兼容性，package.json：

{
  "name": "ts-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.19.0",
    "@typescript-eslint/parser": "^2.19.0",
    "eslint": "^6.8.0",
    "typescript": "^2.9.2"
  }
}

修改.eslintrc.json中的“outDir”後一定要在後面添加：

"include": [
    "src/**/*"
],
"exclude": [
    "node_modules"
]

否則會報錯！