iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

前端建置工具完全手冊系列 第 29

Day 29: eslint

eslint 是很有名的 linter ,如果有在寫 JavaScript 應該多多少少都會知道,雖然它不該被歸類來這系列的主題「建置工具」中,不過它也算是很常用的一個工具,所以我就把它放進這個系列了

linter 這種工具是一種程式碼的靜態分析工具,它可以幫你抓出程式碼可能存在的錯誤與 bug ,也能找出程式碼風格的問題,不過也因為只是靜態分析,對 js 這種動態型別的語言能做的就比較有限了,畢竟在 js 中,變數的型態如果不執行就不容易知道,有些錯誤就不是那麼容易抓出來,雖說如此,能做的檢查還是很多就是了

安裝

安裝 eslint 本身只需要安裝 eslint 一個套件而已,而且 eslint 有自帶一些規則,所以也可以不安裝任何 plugin 就做到基本的檢查,只是通常還是會安裝 plugin 來使用

$ yarn add --dev eslint

eslint 除了可以安裝 plugin 來搭配使用外,也可以安裝另外兩種東西,加起來共 3 種:

  • plugin: eslint 的 plugin 可以幫 eslint 增加規則,另外它其實也可以帶有設定檔讓使用者使用, plugin 可以提供一份自己推薦的設定
  • config: 可以重覆使用的設定檔,比較有名的有 standardairbnb ,設定檔有可能會有需要的 plugin ,使用者要自己去安裝
  • parser: 擴充 eslint 可以處理的語法,比如有 babel-eslint 用 babel 來轉換 js ,讓 eslint 可以處理實驗性的語法,或是 @typescript-eslint/parser ,讓 eslint 可以處理 typescript ,還有 vue-eslint-parser 是處理 vue 的檔案的

使用

雖然安裝很簡單,但 eslint 是不設定就什麼事都不會做的,所以還是要提供一個基本的設定,而 eslint 有提供一個簡單的初始化設定的指令,只要下這個指令,並回答幾個問題, eslint 就會產生一個基本的設定:

$ yarn eslint --init

eslint 的設定檔可以是 js, json 或 yml 的格式,這邊用 js 的格式,檔名要取叫 .eslintrc.js ,這邊就用基本的設定,就是只用 eslint:recommended 這組設定,有不少的 plugin 也會像這樣提供自己的基本設定:

module.exports = {
  extends: 'eslint:recommended',
}

eslint 的設定檔有幾個基本的欄位,另外這邊也順便講幾個我自己慣用的 config 的 plugin,首先是 config 的部份:

  • eslint-config-standard: 有名的設定檔,它目前還有另外 4 個必須要裝的 plugin ,要使用的要自己裝
  • eslint-config-prettier: 一個關掉跟排版相關的選項的設定檔,因為要交給 prettier 處理,關掉就不會發生衝突了

plugin 這邊我並沒有列出 standard 所相依的 plugin:

  • eslint-plugin-simple-import-sort: 能自動排序 import 的一個 plugin
  • eslint-plugin-eslint-comments: 檢查 eslint 的特殊註解的一個 plugin , eslint 可以用特殊的註解開關規則,這等下會講到,而這個 plugin 基本上就是不允許關了規則就不開,跟關掉所有規則的 plugin

把上面的都寫進設定檔就會像:

module.exports = {
  // 設定要拿來當基底的設定檔
  extends: [
    'standard',
    // 加上 prettier 的設定,關掉部份的樣式檢查,這順序很重要的
    // 因為設定是照順序套用的,如果讓 standard 在後面的話,就沒辦法蓋過去了
    'prettier',
    'prettier/standard',
    // 如果是 plugin 提供的設定就要加上 `plugin:` 的開頭
    'plugin:eslint-comments/recommended',
  ],
  // 額外的規則,這邊也可以決定要不要再關掉某些規則
  rules: {
    // 設定 plugin `eslint-plugin-simple-import-sort` 的 `sort` 規則是 `error` 也就是不符合時是會報錯的
    // 另外還可以設定為 `warn` 只警告,或是 `off` 來關掉
    // 有的規則也有選項,這時就是用 ['error', {<options>}] 像 babel 的格式了
    'simple-import-sort/sort': 'error',
  },
  // 設定執行的環境,這會影響到有哪些是全域變數的判斷
  env: {
    browser: true
  },
  // 設定 eslint 自己的 parser 用的是哪一版的 js ,這通常就照 eslint --init 的設定就行了
  parserOptions: {
    ecmaVersion: 12,
  },
}

運作原理

其實 eslint 跟 babel 還挺像的,同樣都是先把檔案轉成 AST ,如果想看 eslint 轉出來的 AST 的話,可以到 AST Explorer ,上面的 parser 選擇 espree ,這是 eslint 內部使用的 parser ,它跟 babel 的 parser 有點不太一樣,應該說是 babel 的 parser 跟其他人不一樣才是, ECMAScript (js 的標準) 有訂一套 js 的 AST 該有哪些節點,怎麼命名的,是 babel 跟別人不同,另外 eslint 的 parser 需要很詳細的資訊,不能只有程式碼的節點本身而已,這樣它才能做好 lint 的工作

它的運作方式也是像 babel 一樣,讓 plugin 註冊 visitor ,對特定的節點進行檢查,如果有問題就透過它的 API 做回報,也可以透過它的 API 提供修正的程式,這在下一篇再來說明


上一篇
Day 28: gulp 是怎麼運作的
下一篇
Day 30: 實作個 eslint plugin
系列文
前端建置工具完全手冊30

尚未有邦友留言

立即登入留言