代碼檢查工具！從 TSLint 到 ESLint

2019 年 1 月，TypeScript 官方決定全面採用 ESLint，以後也發佈 typescript-eslint 項目，以集中解決 TypeScript 和 ESLint 兼容性問題。而以前的兩個 lint 解決方案都將棄用：javascript

typescript-eslint-parser 已中止維護
在完成 ESLint 功能後，將棄用 TSLint 並幫助用戶遷移到 ESLint

TS 官方轉向 ESLint 的緣由:

TSLint 執行規則的方式存在一些框架問題，從而影響性能，而修復這些問題會破壞現有的規則。
ESLint 的性能更好，而且社區用戶一般擁有 ESLint 的規則配置（好比 React 和 Vue 的配置），而不會擁有 TSLint 的規則配置。

已經有 TypeScript，爲何須要 ESLint ？

ts 編譯器主要作類型檢查和語言轉換，ESLint 則能夠保持代碼風格的統一；二者的功能有部分重合，但也各有職責。html

可是，ESLint 處理 ts 代碼會遇到一些問題？由於 ts 編譯器和 ESLint 在開始各自的工做以前都會將代碼轉換成 AST（抽象語法樹），而兩種語法樹是不兼容的。這時，咱們可使用 typescript-eslint 項目，它爲 ESLint 提供了專門解析 ts 代碼的編譯器，來解決 TypeScript 和 ESLint 兼容性問題。vue

在 TypeScript 中使用 ESLint

安裝

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
複製代碼

@typescript-eslint/parser爲 ESLint 提供解析器。（別忘了同時安裝 typescript） @typescript-eslint/eslint-plugin 它做爲 ESLint 默認規則的補充，提供了一些額外的適用於 ts 語法的規則。java

建立配置文件

ESLint 須要一個配置文件來決定對哪些規則進行檢查，配置文件的名稱通常是 .eslintrc.js 或 .eslintrc.json。react

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": { "@typescript-eslint/no-inferrable-types": "off" }
}
複製代碼

rules 的取值通常是一個數組，其中第一項是 off、warn 或 error 中的一個，表示關閉、警告和報錯。後面的項都是該規則的其餘配置。typescript

若是沒有其餘配置的話，則能夠將規則的取值簡寫爲數組中的第一項（上例中的 @typescript-eslint/no-inferrable-types）。npm

off、warn 和 error的含義以下：json

off：禁用此規則
warn：代碼檢查時輸出錯誤信息，可是不會影響到 exit code
error：發現錯誤時，不只會輸出錯誤信息，並且 exit code 將被設爲 1（通常 exit code 不爲 0 則表示執行出現錯誤）

檢查整個項目的 ts/js 文件

// package.json
{
  ...
  "script": {
    ...
    "lint": "eslint src --ext .js,.ts"
  }
}
複製代碼

npm run lint
複製代碼

在 VSCode 中集成 ESLint 檢查

安裝 ESLint 插件，點擊「擴展」按鈕，搜索 ESLint，而後安裝便可。數組

VSCode 中的 ESLint 插件默認是不會檢查 .ts 後綴的，須要在「文件 => 首選項 => 設置 => 工做區」中（也能夠在項目根目錄下建立一個配置文件 .vscode/settings.json），添加如下配置：babel

{
  ...
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    "typescript"
  ]
}
複製代碼

比較 babel-eslint 和 typescript-eslint

babel-eslint: 支持 TypeScript 沒有的額外的語法檢查，拋棄 TypeScript，不支持類型檢查。
typescript-eslint: 基於 TypeScript 的 AST，支持建立基於類型信息的規則（tsconfig.json）

二者底層機制不同，不要一塊兒用。Babel 體系建議用 babel-eslint，不然能夠用 typescript-eslint。