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

yugasun發表於2018-03-13

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

前言

Javascript 是一門弱型別語言,所以語法檢查變得尤為重要。雖然有很多前端IDE開發工具,可以很好地幫助我們提示在編寫時的錯誤,但是大多數開發者還是使用的像 Sublime TextVisual 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

相關文章