TypeScript實戰-25-ESLint代碼檢測

一,前言

使用Vue和React開發時,通常使用ESLint做代碼檢測
TypeScript有自己的檢查工具TSLint
但由於ESLint在Vue和React的影響及更好的性能
TypeScript也決定使用ESLint做TS的代碼檢測工具

---

二,ESLint

TypeScript + ESLint:

TypeScript編譯器主要做兩件事,即類型檢查和語言轉換
	1,類型檢查
	2,語言轉換
	也會對語法錯誤做一些檢查
而ESLint除了檢查語法,還能夠保持代碼風格統一

問題:ESLint不能直接檢查TS語法

ESLint不能直接檢查TS語法,因爲TypeScript和ESLint兩種語法樹AST是不兼容的
(之前的TSLint是基於TS抽象語法樹工作的,不會有兼容性問題,但不能被重用)

解決:typescript-eslint插件

引入typescript-eslint插件解決兼容性問題
爲ESLint提供解析TS代碼的編譯器
將TS語法樹轉換爲ESLint語法樹

---

三,ESLint配置

package.json:

"scripts": {
	...
    "lint": "eslint src --ext .js,.ts" // 自動檢查js,ts
    ...
},
"devDependencies": {
	...
    "@typescript-eslint/eslint-plugin": "^1.10.2",// 識別TS語法
    "@typescript-eslint/parser": "^1.10.2",	// TS解析器
    "eslint": "^5.16.0",	// eslint
    ...
  },

.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" // 關閉類型推斷
  }
}

執行:

npm run lint

---

四,使用ESLint插件

setting.json:

{
    "files.autoSave": "onWindowChange",
    "editor.quickSuggestions": {
        "strings": true
    },
    "window.zoomLevel": 0,
    "typescript.updateImportsOnFileMove.enabled": "never",
    "typescript.locale": "zh-CN",
    // add...
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

---

五,babel-eslint

babel-eslint與typescript-eslint區別:

由於Babel拋棄了TypeScript,所以Babel-eslint不支持類型檢查,支持TS沒有的額外語法檢查

typescript-eslint基於typescript-eslint的AST,支持創建基於類型信息的規則(tsconfig.json)

如果使用Babel體系建議使用babel-eslint,否則可以使用typescript-eslint