[JS] 使用 ESLint 提高程式碼品質
ESLint
ESLint 是眾多 Javascript Linter 中的其中一個，其他比較常見的還有 JSLint跟 JSHint（名字都好像 XDD），之所以會推薦 ESLint 是因為他可以自由選擇要使用哪些規則，也有很多現成的 plugin 可以使用，另外他對 ES6 還有 JSX 的支援度跟其他 linter 相較之下也是最高的
如何在現有的專案中導入 ESLint
如果你手邊已經有一個專案，那就先全域安裝 ESLint
npm install eslint -g
初始化 ESLint
在專案目錄下跑
eslint --init，這邊你可以選擇直接使用比較熱門的 style guide 或是自訂規則
初始化完畢後目錄下會多一個
.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
{
...
"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 吧！
留言
張貼留言