你也許不知道的Vuejs - 使用ESLint檢查程式碼質量

yugasun發表於2018-03-13
VueJSEsLint

by yugasun from yugasun.com/post/you-ma… 本文可全文轉載，但需要保留原作者和出處。

前言

Javascript 是一門弱型別語言，所以語法檢查變得尤為重要。雖然有很多前端IDE開發工具，可以很好地幫助我們提示在編寫時的錯誤，但是大多數開發者還是使用的像 Sublime Text、Visual Studio Code 之類的輕量級編輯器，這導致在開發中很容易出現各種錯誤，比如單詞拼寫錯誤，漏掉了括號等。而且每個人的程式碼編寫習慣也不一樣，因此有的專案的程式碼格式千差萬別，比如 縮排空格數，有的習慣4個，有的習慣2個，這也導致專案維護起來越來越麻煩，遇到錯誤也很難定位。因此對 Javascript 進行語法檢查的工具應運而生，目前 ESLint 使用最為廣泛。這篇將講解如何將 ESLint 整合到我們的專案中。

配置方式

ESLint 具有高可配置行，這就意味著你可以根據專案需求定製程式碼檢查規則。ESLint 的配置方式可以有以下兩種方式：

  • 檔案註釋：在 Javascript 檔案中使用註釋包裹配置內容。
  • 配置檔案(推薦)：在專案根目錄下建立包含檢查規則的 .eslintrc.* 檔案。

擴充套件配置檔案

ESLint 配置檔案中的 extends 欄位可以擴充套件整合現有的規則，比如著名的 Airbnb JavaScript Style，可以通過安裝 eslint-config-airbnb-base 整合使用。

開始使用

因為本人比較偏向於 Airbnb JavaScript Style，所以今後的程式碼規範將均使用此規範。並且我們這裡是 Vuejs 專案，所以需要同時對 .vue 檔案中的 js 程式碼進行檢測，就需要利用 eslint-plugin-vue 外掛來搭配使用。

首先，安裝依賴：

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev
複製程式碼

其次，在專案根目錄下新建 .eslintrc.js 檔案，配置如下：

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
};
複製程式碼

最後，在 package.json 中新增 lint 指令碼:

// ...
"scripts": {
  // ...
  "lint": "eslint --ext .js,.vue src"
},
// ...
複製程式碼

當然你也可以全域性安裝以上依賴，這樣你可以直接執行 eslint --ext .js,.vue src 命令。

Ok， 配置好了~

命令列執行 npm run lint，輸出如下：

$ npm run lint

> vue-webpack-demo@0.0.1 lint /Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4
> eslint --ext .js,.vue src

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue
  17:16  error    Missing trailing comma        comma-dangle
  26:9   warning  Unexpected console statement  no-console
  38:9   warning  Unexpected console statement  no-console

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/utils.js
  15:3  warning  Unexpected console statement  no-console

✖ 4 problems (1 error, 3 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.
複製程式碼

你會發現檢查出一堆錯誤，不要方，輸出的錯誤說明的非常明顯，只需要根據錯誤提示行號去檢查，然後根據規則更改就行了。

上面的命令中 --ext 引數就是用來指定需要檢查的副檔名的檔案，src 就是指定檢查的目錄。

新增自定義規則

雖然 Airbnb 的程式碼風格已經很成熟了，但是並不是滿足任何人需求的。有些時候，如果想修改一些規則怎麼辦？這時我們可以通過在 .eslintrc.js 檔案中新增 rules 欄位來自定義。規則 no-console 就是用來規定禁止使用 console 來除錯程式，Airbnb 程式碼風格在檢查是會輸出如下警告：

/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue
  26:9  warning  Unexpected console statement  no-console
複製程式碼

但是我們有些時候專案經常使用到 console，所以我會關閉該條規則，修改 .eslintrc.js 檔案如下：

module.exports = {
  extends: [ 'plugin:vue/essential', 'airbnb-base' ],
  rules: {
    'no-console': 'off',
  }
};
複製程式碼

這樣在執行 npm run lint 時，命令列就不會輸出 no-console 警告了。

有關 ESLint 的基礎教程請閱讀 ESLint，關於 Airbnb 程式碼規範，請閱讀 Airbnb JavaScript Style。

總結

讀完你會發現，之前自己一直不敢使用的 ESLint 是如此的簡單，無論是安裝還是配置，非常的人性化。

作為一名優秀的程式設計師，規範化的程式碼風格尤為重要，這不僅能降低程式碼出錯率，而且非常有益於別人閱讀你的程式碼。說到程式碼閱讀，程式碼註釋也是必不可少的。俗話說 己所不欲，勿施於人，如果你不想閱讀 shit 一樣的程式碼，那麼就先從自身做起，趕緊在你的專案中實踐起來吧~

原始碼在此

專題目錄

You-May-Not-Know-Vuejs

相關文章