by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-8.html
本文可全文轉(zhuǎn)載，但需要保留原作者和出處。
前言
Javascript 是一門弱類型語言，所以語法檢查變得尤為重要。雖然有很多前端IDE開發(fā)工具，可以很好地幫助我們提示在編寫時(shí)的錯(cuò)誤，但是大多數(shù)開發(fā)者還是使用的像 Sublime Text、Visual Studio Code 之類的輕量級(jí)編輯器，這導(dǎo)致在開發(fā)中很容易出現(xiàn)各種錯(cuò)誤，比如單詞拼寫錯(cuò)誤，漏掉了括號(hào)等。而且每個(gè)人的代碼編寫習(xí)慣也不一樣，因此有的項(xiàng)目的代碼格式千差萬別，比如 縮進(jìn)空格數(shù)，有的習(xí)慣4個(gè)，有的習(xí)慣2個(gè)，這也導(dǎo)致項(xiàng)目維護(hù)起來越來越麻煩，遇到錯(cuò)誤也很難定位。因此對(duì) Javascript 進(jìn)行語法檢查的工具應(yīng)運(yùn)而生，目前 ESLint 使用最為廣泛。這篇將講解如何將 ESLint 集成到我們的項(xiàng)目中。
配置方式
ESLint 具有高可配置行，這就意味著你可以根據(jù)項(xiàng)目需求定制代碼檢查規(guī)則。ESLint 的配置方式可以有以下兩種方式：
- 文件注釋：在 Javascript 文件中使用注釋包裹配置內(nèi)容。
- 配置文件(推薦)：在項(xiàng)目根目錄下創(chuàng)建包含檢查規(guī)則的
.eslintrc.*文件。
擴(kuò)展配置文件
ESLint 配置文件中的 extends 字段可以擴(kuò)展集成現(xiàn)有的規(guī)則，比如著名的 Airbnb JavaScript Style，可以通過安裝 eslint-config-airbnb-base 集成使用。
開始使用
因?yàn)楸救吮容^偏向于 Airbnb JavaScript Style，所以今后的代碼規(guī)范將均使用此規(guī)范。并且我們這里是 Vuejs 項(xiàng)目，所以需要同時(shí)對(duì) .vue 文件中的 js 代碼進(jìn)行檢測(cè)，就需要利用 eslint-plugin-vue 插件來搭配使用。
首先，安裝依賴：
npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev
其次，在項(xiàng)目根目錄下新建 .eslintrc.js 文件，配置如下：
module.exports = {
extends: [ 'plugin:vue/essential', 'airbnb-base' ],
};
最后，在 package.json 中添加 lint 腳本:
// ...
"scripts": {
// ...
"lint": "eslint --ext .js,.vue src"
},
// ...
當(dāng)然你也可以全局安裝以上依賴，這樣你可以直接運(yùn)行
eslint --ext .js,.vue src命令。
Ok， 配置好了~
命令行運(yùn)行 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.
你會(huì)發(fā)現(xiàn)檢查出一堆錯(cuò)誤，不要方，輸出的錯(cuò)誤說明的非常明顯，只需要根據(jù)錯(cuò)誤提示行號(hào)去檢查，然后根據(jù)規(guī)則更改就行了。
上面的命令中 --ext 參數(shù)就是用來指定需要檢查的擴(kuò)展名的文件，src 就是指定檢查的目錄。
添加自定義規(guī)則
雖然 Airbnb 的代碼風(fēng)格已經(jīng)很成熟了，但是并不是滿足任何人需求的。有些時(shí)候，如果想修改一些規(guī)則怎么辦？這時(shí)我們可以通過在 .eslintrc.js 文件中添加 rules 字段來自定義。規(guī)則 no-console 就是用來規(guī)定禁止使用 console 來調(diào)試程序，Airbnb 代碼風(fēng)格在檢查是會(huì)輸出如下警告：
/Users/Yuga/Desktop/VueLearning/You-May-Not-Know-Vuejs/chapter2/4/src/hello1.vue
26:9 warning Unexpected console statement no-console
但是我們有些時(shí)候項(xiàng)目經(jīng)常使用到 console，所以我會(huì)關(guān)閉該條規(guī)則，修改 .eslintrc.js 文件如下：
module.exports = {
extends: [ 'plugin:vue/essential', 'airbnb-base' ],
rules: {
'no-console': 'off',
}
};
這樣在運(yùn)行 npm run lint 時(shí)，命令行就不會(huì)輸出 no-console 警告了。
有關(guān) ESLint 的基礎(chǔ)教程請(qǐng)閱讀 ESLint，關(guān)于
Airbnb代碼規(guī)范，請(qǐng)閱讀 Airbnb JavaScript Style。
總結(jié)
讀完你會(huì)發(fā)現(xiàn)，之前自己一直不敢使用的 ESLint 是如此的簡單，無論是安裝還是配置，非常的人性化。
作為一名優(yōu)秀的程序員，規(guī)范化的代碼風(fēng)格尤為重要，這不僅能降低代碼出錯(cuò)率，而且非常有益于別人閱讀你的代碼。說到代碼閱讀，代碼注釋也是必不可少的。俗話說 己所不欲，勿施于人，如果你不想閱讀 shit 一樣的代碼，那么就先從自身做起，趕緊在你的項(xiàng)目中實(shí)踐起來吧~
