[JS] 使用 ESLint 提高程式碼品質
ESLint 是一個 Javascript Linter，他能確保你的程式碼品質在一定的水準之上，是我自己寫 JS 時一定會使用的工具之一，在團隊內也很建議使用他以確保被提交上去的程式碼品質
Linter 可以幹嘛
Linter 會幫你做靜態語法分析，在你執行之前抓出可能的錯誤，大部分的 Linter 會有以下幾個功能：
1. 幫你找出語法錯誤
沒宣告變數就拿來用、少了括號等等常見的語法錯誤
2. 確保你遵循最佳實踐
不使用全域變數、建議使用 === 而非 ==、不使用 eval …
3. 提醒你刪掉多餘的程式碼
有些變數宣告了卻沒有使用、import 了沒有使用的模組、空的 class constructor …
4. 統一基本的 coding style
要不要加分號、使用單引號或雙引號、縮排使用 space 或 tab 等等
ESLint
ESLint 是眾多 Javascript Linter 中的其中一個，其他比較常見的還有 JSLint 跟 JSHint（名字都好像 XDD），之所以會推薦 ESLint 是因為他可以自由選擇要使用哪些規則，也有很多現成的 plugin 可以使用，另外他對 ES6 還有 JSX 的支援度跟其他 linter 相較之下也是最高的
如何在現有的專案中導入 ESLint
如果你手邊已經有一個專案，那就先全域安裝 ESLint
npm install eslint -g初始化 ESLint
在專案目錄下跑 eslint --init，這邊你可以選擇直接使用比較熱門的 style guide 或是自訂規則
目前比較熱門的 style guide 有 Google、Airbnb 跟 Standard 三個，使用 style guide 的好處就是不用自己設定規則，但彈性稍低
選擇自訂規則的話他會問你幾個問題，包刮會不會使用 ES6 module、跑在什麼環境、需不需要分號等等，有些選項可以按空白鍵多選，如下圖我就希望我的程式可以同時跑在 browser 跟 node 環境
初始化完畢後目錄下會多一個 .eslintrc.js，裡面就是 ESLint 的設定，以我剛剛自訂的規則來說好了
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "never"]
}
};env
env 是指要在哪些環境執行，譬如說如果你的程式沒有要在瀏覽器執行，那就不應該有 window 或是 document 物件，ESLint 會幫你挑出這些錯誤
extends
extends: "eslint:recommend" 是代表使用推薦的 ESLint 設定，可以點進去看那些打勾的就是，如果不想要其中某些規則（rule）等等自己做更改
parseOptions
這是指 parser 要怎麼把你的程式碼切成 AST（抽象語法樹），像簡單的一句 a = 1 就會被切成下面這個物件，有興趣的話可以到這裡玩玩看
這裡把 experimentalObjectRestSpread 跟 jsx 設為 true 可以讓 parser 支援 Object rest spread 跟 jsx 的語法知道怎麼切他
{
...
"body": [
{
...
"expression": {
"type": "AssignmentExpression",
"start": 0,
"end": 5,
"operator": "=",
"left": { ... },
"right": { ... }
}
}
],
...
}plugins
因為 react 有些語法長得不太像平常的 javascript，這時候就要用 plugins 讓他對 react 的支援度更高，詳情可以參考 eslint-plugin-react 這個專案，除了 react 之外還有其他很多 plugin 像是 Angular、Mocha、Chai 等等，可以自己選用
rules
如果上面的 extends 或是 plugins 有你不想要的規則，這時候就可以用 rules 把它蓋掉，譬如說這邊設定 quotes: ["error", "single"]，那就代表你一定要使用單引號，否則就會跳出 error，如果只想要跳出警告的話可以把它改成 quotes: ["warn", "single"]，或是想取消這條規則的話就改成 quotes: ["off", "single"]，這是全部的規則，可以根據你的喜好調整
開始靜態分析程式碼
設定好之後就可以開始分析你的程式碼，譬如說我的程式碼都放在 src 這個資料夾下面好了，那就在 package.json 內的 scripts 加上 lint 指令
"scripts": {
"lint": "eslint src/*.js"
}接著就跑 npm run lint 分析程式碼，如果有任何錯誤的話他就會跟你說哪個檔案哪一行出錯，像我這裡就是 src/index.js 這個檔案的第一行宣告了一個沒有使用到的變數
如果希望他可以自動修錯誤的話就在 script 裡面加個 --fix，他但有些錯誤（使用 eval、變數沒定義等等）沒辦法自動修的還是要自己修
"scripts": {
"lint": "eslint --fix src/*.js"
}與 git 整合
雖然已經有了 npm run lint 這個 script，但如果是在團隊中一定一定一定會有人忘記 lint 自己的程式碼就 commit 然後 push 上去，這時候就可以使用 pre-commit 這個工具，他會在 git commit 之前先跑某個腳本，如果沒過的話就不允許 commit，所以很適合跟 lint 做搭配
先跑 npm install --save-dev pre-commit 安裝他，安裝完之後在 package.json 加上 "pre-commit": ["lint"] 就完成了，整個檔案會長這樣
"name": "...",
"scripts": {
"lint": "eslint src/*.js"
},
"pre-commit": ["lint"],
"dependencies": {
...
}
"devDependenceies": {
"pre-commit": "^1.2.2",
...
}那以後當任何人在專案下跑 git commit -m "message …" 就會先觸發 ESLint 檢查程式碼，通過之後才會成功 commit
總結
這篇跟大家分享我平常是怎麼使用 ESLint 確保我自己的程式碼品質，如果是在團隊中的話 ESLint 也很適用，避免有人寫出很爛的 code 影響整體的效能，如果你最近正在尋找類似的工具的話，不妨用用看 ESLint 吧！
