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

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