ESLint規範TypeScript程式碼使用方法

2022-11-21 14:01:50

前導

ESLint 是一種 JavaScript linter，可以用來規範 JavaScript 或 TypeScript 程式碼，本文教你怎麼在專案中快速把 ESLint 安排上。

怎麼寫出優雅的程式碼是一個老生常談的話題，這其中包含了太多內容可聊，但搞一套標準規範絕對是萬里長征第一步。ESLint 致力於如何把規範落地到你的專案中，讓你的程式碼清清爽爽。

ESLint 作為一種 JavaScript linter，它能強制幫你遵循一套特定的程式碼書寫風格和標準，並且會在不符合標準的地方貼心地給出提示。

你可能也聽說過 TSLint，很可（不）惜（錯），已經掛了。原因是考慮到 ESLint 的存在，並且兩個專案之間存在大量的重複工作，TSLint 團隊在 2019 年宣佈不再維護該專案。

也就是說，你可能會搜到很多已存的 TSLint 周邊生態包，但在使用之前，你得掂量一下，它們可是沒有人在維護了哦。

所以，ESLint 就成為了事實上的標準，幫你規範 JavaScript 和 TypeScript 程式碼。

安裝依賴

在你的工程下執行下面的程式碼，安裝 ESLint 及其它依賴包

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

.eslintrc.js

建立 .eslintrc.js 檔案

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

.eslintignore

再建一個忽略檔案 .eslintignore，忽略不想加入限制的檔案，比如 node_modules，打包產物檔案等

node_modules
dist

package.json scripts

在 package.json 檔案中新建一條 lint 命令

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

執行 npm run lint 試試看

假如我們的工程下只有 index.ts 檔案，內容如下

console.log('Hello world!')

因為我們目前還沒有建立任何規則，所以看不出什麼變化。

Rules

eslint 的 rules 有三種模式，off，on 和 warn

"off" means 0 (turns the rule off completely)

"warn" means 1 (turns the rule on but won't make the linter fail)

"error" means 2 (turns the rule on and will make the linter fail)

如果想禁用 console，可以這樣設定

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { 
    "no-console": 2 // Remember, this means error!  }
}

再執行 npm run lint

2:1  error  Unexpected console statement  no-console
    ✖ 1 problem (1 error, 0 warnings)

lint 報錯了...

關掉 no-console

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {     "no-console": 0 
  }
}

npm run lint

世界安靜了...

fix

我們可以利用 ESLint 的 fix 功能，自動修復報 warn 或 error 的程式碼

改造一下 package.json

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
    "lint-and-fix": "eslint . --ext .ts --fix"  },
}

執行 npm run lint-and-fix 可以檢查和自動修復有問題程式碼

聊一聊原理

parser

ESLint 原理需要結合 parser 設定項來講。

首先，ESLint 為什麼需要一個解析器？ 簡單來講，ESLint 做規則校驗的前提是將語言轉變為抽象語法樹（AST），它的校驗規則是用於適配 AST 的，在遍歷 AST 節點的過程中，找到該節點適配的規則，並判斷是否滿足規則。

plugins

ESLint 能火起來的很大原因，在於它的外掛式設計，這種設計使得他能快速的響應變化。外掛是什麼？外掛就是規則，任何外掛想要在 ESLint 中生效，需要規定兩點內容。

該規則針對的是 AST 的那些節點。
該節點需要滿足怎樣的條件。

有了這兩點，ESLint 就會在遍歷 AST 的過程中，找出不符合規則的節點，將其報告出來。

預設情況下，ESLint 中的規則會對 JS 進行校驗，如果我們想對 React 進行校驗的話，就需要增加 eslint-plugin-react 外掛，如下所示，在 plugins 中增加這個外掛，eslint-plugin 的字首是可以省略的。

"plugins": [
    "react"
]

有了規則是不夠的，我們還需要開啟這些規則，可以在 rules 中設定，更好的方法就是在 extends 中加入以下程式碼。

"extends": [
    "plugin:react/recommended"
]

extends

ESLint 中的規則很多，但是預設都不會開啟的，我們需要在 rules 中設定這些規則開關，這個環節非常繁瑣。因此 ESLint 設計了 extends 這個欄位，用於繼承別的檔案中已經設定好的的規則。在不加入任何外掛的情況下，extends 可以設定為 eslint:recommended 或 eslint:all。recommended 是 ESLint 官方推薦的設定，校驗的規則比較少，eslint:all 則會開啟全部的規則校驗。

如果你想了解這兩者的區別，你可以去官方規則檔案檢視。更快的方法是將 "eslint:recommended" 變成 "eslint:all"。修改後的結果非常誇張，我總共 3 行程式碼 ESLint 檢測出 10 個錯誤。

extends 是一個陣列，可以設定多組規則，每個設定繼承它前面的設定。實際開發中，我們會繼承一些優秀的 ESLint 方案，比如 airbnb，然後結合自己的實際情況，在 rules 中進一步設定。