ZWH ZONE

[JavaScript] 維持 JavaScipt 代碼品質的神器 ESLint (基本使用)

zhiwei. huang -

代碼的品質 的好壞，是會嚴重影響到 後續開發 維護成本 的

而 JavaScript 又是一個十分靈活的語言，但因為其 靈活 的特性，也偷偷埋下了不少的地雷

所以我們往往在撰寫 JavaScrip 代碼的同時，會去定義一些關於 JavaScript 代碼的規範，以維持代碼的 可讀性 和減少一些 非預期 的錯誤

尤其是一整個團隊在進行開發的時候，更需要大家共同維持 代碼的規範

但問題來了～

我們總不能都用 肉眼盯著看 來檢查我們的 代碼是否有維持我們所定義的規範吧

這這這～ 太尼瑪 的痛苦了 ～

這時候當然是需要有一套可以自動幫我們檢查我們代碼的 工具 啦！

ESLint

ESLint 就是為了讓我們達到上述的目的所存在的，簡單的概述下：

他可以讓我們 自行定義我們自己的 代碼規範 於一個檔案中 (.eslintrc.js)

在藉由 ESLint 來對我們的 JavaScript 腳本，根據我們所定義的規範，來進行檢查

接著我們就來實際操作看看吧

安裝 ESLint

使用 npm 來進行 全域 的安裝：

$ npm install -g eslint

接著就可使用一下代碼，來測試是否安裝成功

$ npm eslint -v

如果上述都沒問題了話，就讓我繼續往下看

使用 ESLint

首先我們先建立一個測試用的專案

$ mkdir project
$ cd project

建立完後，我們在專案底下新增一個 script.js 的檔案，內容如下：

var message = "hello world";
console.log(message);

並且我們使用 nodejs 來測試我們的程式是可以運行的

$ node script.js

接著我們在建立我們要定義的規範的檔案 .eslintrc.js :

內容如下：

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

在這裡，我們先使用了 ESLint 內建規範的配置 eslint:recommended，裡面涵蓋了一些在撰寫 JavaScript 時的常見規範

接著我們就可以使用 ESLint 來檢查我們的代碼規範了，如下：

$ eslint scripts.js

可以看到輸出了兩個錯誤：

/Users/roxas_huang/www/eslint/script.js
  2:1  error  Unexpected console statement  no-console
  2:1  error  'console' is not defined      no-undef

這兩條訊息跟我們說明了，錯誤的原因，一下是對照：

  • Unexpected console statement no-console – 不能使用 console
  • ‘console’ is not defined no-undef - console console 沒有被定義

修改定義的規範

延續上方的結果，我們用上面的 錯誤 來進行說明：

* Unexpected console statement `no-console`

注意 最後面單引號 的內容，為 ESLint 的 規則項目
可以到 ESLint Rules 來查看 規則 的項目 （竟然有 中文 的）

一般情況來說，console 的代碼，都是用來 測試 的功用居多，並不會影響到專案開發後的結果

但為了避免 js 的腳本裡，有過多多餘的 console 的代碼

所以在 ESLint 的預設規範中，是禁止使用的

讓你養成使用 console 測試後，就把 console 的代碼拿掉的好習慣，能有效避免多餘的代碼

現在切回來，如果我想要 更改 這個規則，怎麼辦？ 如下：

module.exports = {
  extends: 'eslint:recommended',
  rules: {
    'no-console': 'off', //注意這邊
  },
};

我們針對了 no-console 這條規則，進行編輯，將這條規則給 off 掉

如此一來 no-console 這條規則將會被 ESLint 給無視掉， ESLint 就不會有這條錯誤了

另外 rule 中，每個項目都有三種狀態，分別是 off、warn 和 error，下面將進行說明：

  • off： 關閉 這條規則
  • warn: 會顯示出 警告 訊息，但還是 可以通過 ESLint 的審核
  • error : 會顯示出 錯誤 訊息，且 無法通過 ESLint 的審核

設置環境參數

現在我們切換到另外一篇的錯誤訊息：

‘console’ is not defined no-undef - console` 
// console 沒有被定義

針對這個問題，進行簡單的說明

JavaScript 有很多的運行環境，例如常見的：瀏覽器 和 Node.js

但是並不是每個環境都會有 console 這個方法

所以在 ESLint 這邊，我們要明確的指定目前針對哪個 對象 的運行環境，如下：

module.exports = {
  extends: 'eslint:recommended',
  env: {
    node: true,
  },
  rules: {
    'no-console': 'off',
  },
};

在這邊我們指定 ‘node’ 為我們 JavaScript 的運行環境

修改完成後，在 Run 一次 ESLint

$ eslint scripts.js

就會沒有任何錯誤了

結語

總結來說，ESLint 真的是個不錯的東西，他可以大幅提升 JavaScript 的 可讀性 與 維護性

而且在市面上很多主流的 編輯器 如 ： Atom、VScode、sublime 都有 ESLint 的套件，可以在撰寫 程式碼 時，幫你檢查 coding 的規範

甚至現在有些公司在進行 git 版本控制時，在 commit 的瞬間，都會有腳本來 啟用 ESLint ， 需要通過 ESLint 後，才能進行 commit 和 push 的工作

說明了 ESLint 在業界中，也是非常普遍的，非常值得一學

這篇文章只有對 ESLint 的基本操作進行概述，如果想要進一步深入了解

可以參考這篇文章：利用 ESLint 检查代码质量

版主在這邊對 ESLint 有個 淺寫易懂 且 非常詳細的說明，非常值得一看

Facebook 功能：