搞懂 ESLint 並快速打造舒適的 JavaScript 開發環境

使用 ESLint 提升程式碼品質和寫作風格使用 ESLint 提升程式碼品質和寫作風格

JavaScript 是一個動態(弱)型別的程式語言,執行期間的變數型別與數值會依照當下所給的資料型態自動改變。這是優點也是缺點,優點是開發速度快、而且容易學習;缺點是當傳入不如預期的資料型態會造成程式碼的錯誤,這個在看函式庫的 API 時常會眼殘沒看清楚資料形態造成傳錯。別懷疑,專案長大時眼睛一定會有業障。
JavaScript 在開發期間如果有一些小工具能幫你先抓出錯誤,不但能提升程式碼質量,還能糾正你寫程式碼的壞習慣,這樣不是挺好的嘛? ESLint,不但是開發 React 時期必備良藥,也是避免你寫爛扣的解藥之一。

淺談 linter 與 eslint

linter 是用於編輯器的外掛,藉由套用各種規則,讓你在開發期間檢查你程式碼的錯誤,對於不同的程式碼有不同的 linter。隨著時間的推演,程式碼檢查的輔助工具有以下幾種,我列出比較知名的品牌:

  • JSLint
    檢查工具的老牌子了,但是由於沒有設定檔,自由度比較受限制,後來就姑且不愛。

  • JSHint
    有大大從 JSLint 這個專案 fork 出來改,有了設定檔可以改,擴展了原本 JSLint 的自由度;但是由於缺乏了讓使用者自行定義的規範,也就難以延伸。

  • ESLint
    近代新起之秀,具有使用者自行定義的延展性,而且有設定檔,哪些規則要開要關自由心證,非常方便。不僅如此,還可以使用別人定義好的規範來使用,已經成為了前端專案開發的必備工具,尤其是大量運用在開發 React 專案上面。缺點是使用它還需要裝一些有的沒的,對於剛上手來說相對麻煩,但是你往下看就發現其實還好。

  • TypeScript
    TypeScript 其實算是一個全新的程式語言, M$ 所發明,基於 JavaScript 的超集合(superset),可視為靜態型別版本的 JavaScript。TypeScript 在執行前必須先編譯,程式碼也必須先宣告資料型態,就跟寫 C 一樣。由於瀏覽器不支援 TypeScript, 用它開發最終會被編譯為 JavaScript,好處是執行前在編譯期間的程式碼錯誤就會被發現,專案膨脹後會發現非常好用,如同官網所寫的: “JavaScript that scales”。缺點是對於已經熟悉 JavaScript 的開發者來說很不習慣,也有一些學習曲線在,不是大家都能接受,雖然它居然被大量用在 Angular 2 跟 4…

  • Flow
    一個靜態型別的 Type Checker, Facebook 為了對抗迎接而來的 TypeScript 所開發的工具,能讓已經習慣 JavaScript 的開發者不用去學 TypeScript,直接使用 Flow,讓你的 JavaScipt 大變身。這是開發 React 未來的趨勢和潮流,就算你不用,React 自己都用了…

以上有這麼多工具僅供參考,真的不必全部學會,也沒有必要。然而對我來說,要維持原汁原味的 JavaScript,使用 eslint 是最好的選擇,僅需要搞好開發環境就好,無須多餘的語法需要學習。eslint 根據不同的規則來制定寫程式的風格,讓 follow 同一個規則下的程式碼具有一致性的 coding style,這個在對於同一個專案的工程師合作上非常有幫助,因為你的同事不會因為你獨樹一幟的寫法而充滿問號,你也不會因為神一般的隊友寫出的 code 讓你困惑。

安裝 eslint

要使用 lint 檢查工具,必須準備好三樣東西: 編輯器外掛 + eslint + 規則與設定檔

編輯器外掛

編輯器外掛是要讓你的編輯器上面會出現不時出現 eslint 的抱怨,在開發時提出警告 on the fly。 在此紀錄前端開發時常用的這些,不外乎 Sublime TextAtom 與近期新秀 VSCode

  • Sublime Text 安裝

    1. SublimeLinter
    2. SublimeLinter-eslint
  • Atom 安裝

    1. linter
    2. linter-eslint
    • linter 是 Atom 編輯器在顯示錯誤的界面,而 linter-eslint 是它的外掛
    • 上列套件直接在 Atom 編輯器裡面的設定頁面安裝套件即可,或是使用 command line 透過 apm 安裝。
  • VSCode 安裝

    1. ESLint
    • 這個你直接在 VSCode 的 Extensions 搜尋 eslint 就找到了

安裝 eslint 函式庫

eslint 本身透過 npm 安裝即可。個人不建議全域安裝,因為他是 by 各個專案底下,而且搭配不同的規則所使用的版本可能不同。

1
npm install --save-dev eslint

規則與設定檔

網路上有非常多大神制定好的規則可以套用,現以 eslint-config-standard 為例,他是基於 JavaScript Standard Style 為出發的 coding style.

  1. 安裝規則
1
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

WTF? 嚇死了,為什麼在 eslint-config-standard 後面多出了這麼多東西?因為這些規則都是 follow eslint 的 Shareable Configs規範,他讓你允許分享你自訂的規則模組到 npm 上面給大家使用,但是相對的需要安裝很多這些所謂的 peerDependencies,安裝相對麻煩,待會底下會講更快的安裝方式。

  1. 設定檔案 .eslintrc.*

eslint 由於`自由度高,使用時需要先準備一份 global 的設定檔,讓 eslint 可以根據這個設定來看懂規則並發揮它的功能。

新增設定檔格式有兩種方式,一種是在專案根目錄新增一個隱藏檔(如同 Git 的 .gitignore 或是 Babel 的 .babelrc 的做法雷同),另一種是直接寫在 package.json裡面,使用屬性 eslintConfig。由於寫在 package.json 裡面太不明顯了,各人偏好新增隱藏檔的方式來開啟它。

新增設定檔的格式非常多樣,包含 JavaScript 物件YAMLjson,每一個副檔名都不相同,想了解進一步的寫法可以看這裡,我習慣寫成 json。

.eslint.json
1
2
3
{
"extends": "standard"
}

extends 表示延伸原本的規則,你剛剛安裝的 eslint-config-standard 就是在這裡做延伸;想看看其他全域變數可以參考這裡:Configuring ESLint

eslint環境在此設定完畢(汗),如果沒有快一點的安裝方式,你可能會殺了我。

使用 install-peerdeps 快速安裝 peer dependencies

由於上述第二點在安裝 eslint 規則的 peer dependencies 實在太繁瑣,而且有些規則還有指定相依套件的版本號,這種指令誰鬼才記得起來,還要常常造訪官方的 Github Repo 看有沒有更新版本。 好在 npm 其中有指令是可以查看該模組的詳細資訊,包含相依套件及其版本號,我們來試試,使用 info,並查看 peerDependencies

1
2
3
4
5
6
7
8
$ npm info eslint-config-standard peerDependencies
# npm 搭配 info, view, v, 或是 show 都是相同的
{ eslint: '>=3.19.0',
'eslint-plugin-import': '>=2.2.0',
'eslint-plugin-node': '>=4.2.2',
'eslint-plugin-promise': '>=3.5.0',
'eslint-plugin-standard': '>=3.0.0' }

原來這個 eslint-config-standard 所搭配的相依套件及其版本號都在這裡,那我要安裝一個規則這麼麻煩阿?不但要先安裝 eslint,還要裝 eslint-config-standard 及其相依套件,最好版本還要正確。這樣搞豈不崩潰。在這個時候一定有 shell 魔人說話,我把這段資訊抓出來一次安裝:

1
2
3
4
(
export PKG=eslint-config-standard;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

先生,你這樣做是很 hardcore 沒錯,但是 bash 在 M$ Windows 下就是不 work 阿!(就跟 rm -rf 在 Windows 下毫無用處一樣)。既然你有了 npm,何不好好運用一下?接下來介紹使用 install-peerdeps 真的是秒安裝 eslint,而且指令跨平台。

  1. 安裝 install-peerdeps

install-peerdeps 顧名思義,就是 Install Peer Dependencies 的意思,在安裝 npm 底下的 eslint 規則非常迅速。他根據檢查 npm info 裡面的 peerDependencies 來判定安裝的相依套件。重點!除此之外,他還可以使用 Yarn 來安裝套件!不就超快嘛!趕快來試試:

1
2
npm install -g install-peerdeps # install globally
npm install --save-dev install-peerdeps # install locally
  1. 安裝 eslint-config-* 及其相依套件

在全域安裝install-peerdeps後就可以直接使用:

1
2
3
4
5
$ install-peerdeps eslint-config-standard --dev
# 執行結果 #
install-peerdeps v1.1.3
Installing peerdeps for [email protected]
npm install eslint-config-standard [email protected]>=3.19.0 [email protected]>=2.2.0 [email protected]>=4.2.2 [email protected]>=3.5.0 [email protected]>=3.0.0 --save-dev

see? 一次把 eslint-config-standard 及相依套件安裝完畢,當然包含了 eslint 本身。

如果你今天是開發 React, 那你一定要使用 Airbnb 出的 JavaScript Style Guide,他們制定的規則全世界的 JavaScript 開發者都在用。因為它們太哈 React 了,基於愛屋及烏的心態,我也跟風(茶)。

這一套 eslint-config-airbnb 規則就是 JavaScript Style Guide 基於 eslint 的實作,看他專案的星星數已經跟 Angular 1 差不多了,就可以知道他受歡迎的程度。

安裝它一樣很簡單,雖然它相依套件很多,但是我們有了它,使用 install-peerdeps:

1
install-peerdeps eslint-config-airbnb --dev

一樣,他自動幫我們安裝了 eslint, eslint-plugin-import, eslint-plugin-react, 以及eslint-plugin-jsx-a11y

最後記得,在 .eslintrc.json 做延伸:

1
2
3
{
"extends": "airbnb"
}

如果你也有好用的工具,歡迎留言分享囉。