協(xié)同開發(fā)過程中灭贷，不同的編碼習(xí)慣寫出的代碼，差異很大略贮。日常維護(hù)代碼或者修復(fù)bug的時(shí)候時(shí)候，看各種風(fēng)格的代碼仗岖，影響效率不說逃延，還有可能改出低級(jí)問題。目前我們的項(xiàng)目還沒有代碼規(guī)范轧拄，我決定要做點(diǎn)改變揽祥，于是考慮使用 ESlint 來做代碼規(guī)范檢查。
考察了ESlint的官方網(wǎng)站和一些技術(shù)貼檩电，決定先給我們其中的一個(gè) Vue2.0 項(xiàng)目配置 ESLint拄丰。在配置 ESLint 過程中走了一些彎路，把配置過程記錄下來俐末，方便日后查看料按。
預(yù)測(cè)獲得的收益：
- 項(xiàng)目編碼風(fēng)格統(tǒng)一，師出一人卓箫；
- 開發(fā)過程中修復(fù)語法錯(cuò)誤载矿，減少潛在
bug； - 規(guī)定規(guī)范編碼烹卒，減少代碼冗余闷盔，提高代碼質(zhì)量；
預(yù)期風(fēng)險(xiǎn)：
擔(dān)心整個(gè)項(xiàng)目添加了 ESLint旅急，其他同事冒火逢勾，因?yàn)槭嵌囗撁鎽?yīng)用，在項(xiàng)目根目錄下做了配置藐吮，新需求可以使用新配置溺拱，老項(xiàng)目可以自行選擇要不要改一輪eslint的報(bào)告提示，這次給我們的 Vue2.0 項(xiàng)目配置了 ESLint 也算是給團(tuán)隊(duì)做點(diǎn)小貢獻(xiàn)谣辞，后面計(jì)劃把單元測(cè)試加上盟迟，在團(tuán)隊(duì)里推廣。
配置ESLint
咳咳潦闲，配置流程來了攒菠。
1. 安裝 eslint
既然要用 ESLint ，就要安裝它歉闰，通過命令： cnpm I eslint -D 安裝辖众。
2. 初始配置 eslint
eslint 安裝好之后卓起，運(yùn)行 eslint —init命令做些簡(jiǎn)單配置，我們可以選擇我們需要的檢測(cè)的環(huán)境凹炸、文件類型等等戏阅。這步完成，在項(xiàng)目根目錄下會(huì)生成一個(gè) eslintrc.js 文件啤它。
3. 安裝 eslint-loader
我們的項(xiàng)目需要webpack來編譯奕筐，需要對(duì)應(yīng)的loader，安裝 eslint-loader变骡，運(yùn)行命令 cnpm I eslint-loader -D离赫。
如果有
command not found: eslint的報(bào)錯(cuò)提示，可以運(yùn)行./node_modules/.bin/eslint --init來進(jìn)行eslint配置化安裝
4. 配置 webpack
打開 webpack 的 config 配置文件配置：
obj.module = {
rules: [
// ...
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], //
options: {
formatter: require('eslint-friendly-formatter')
}
}
]
};
5. 安裝 eslint-friendly-formatter
eslint-friendly-formatter這個(gè)模塊是為了方便本地規(guī)范檢查代碼塌碌。記得運(yùn)行cnpm i eslint-friendly-formatter -D安裝上渊胸。
6. 安裝 babel-eslint
操作到這里關(guān)于 eslint 的基本配置就完成了，把項(xiàng)目跑起來台妆，咿竟然有 parset 的報(bào)錯(cuò)翎猛，說最新的eslint解析有問題。查詢資料是說需要 babel-eslint接剩，按依賴安裝的方式安裝上切厘。
7. 安裝 eslint-plugin-vue
Vue.js 的官方 ESLint 插件： eslint-plugin-vue ，這個(gè)插件允許 我們使用 ESLint 檢測(cè) .vue 文件的 <template> 和 <script>懊缺，有助于實(shí)時(shí)檢測(cè)代碼迂卢。 把這個(gè)插件安裝上，最終的 .eslintrc.js:
module.exports = {
"root": true,
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": 'babel-eslint',
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
};
配置參數(shù)：
- root 為true根配置文件桐汤，否則會(huì)按照目錄樹向上搜索
- env 執(zhí)行環(huán)境
- extends 對(duì)基礎(chǔ)配置進(jìn)行擴(kuò)展而克，可以配置共享配置包
eslint-config-airbnb等。配置包需要安裝怔毛。 - globals 指定全局變量员萍，無視 no-undef 規(guī)則
- parserOptions 語法解析器選項(xiàng)
- plugins 插件 ，插件命名規(guī)范是
eslint-plugin-為前綴 - rules 校驗(yàn)規(guī)則
8. 配置小結(jié)
- 需要安裝的依賴有
cnpm i eslint eslint-loader eslint-friendly-formatter babel-eslint eslint-plugin-vue -D
- webpack 配置
- .eslintrc.js 配置
配置完事拣度，項(xiàng)目跑起來一堆的報(bào)錯(cuò)碎绎，來來來格郁，??開始自我折磨吧汤功。經(jīng)歷磨練才能寫出更優(yōu)雅更規(guī)范的代碼寿冕∽ǚ荆看著頁面不多，花了幾個(gè)小時(shí)來處理 ESLint 的警告和報(bào)錯(cuò)婉徘。??
配置問題
Use the latest vue-eslint-parser
在eslint-plugin-vue官網(wǎng)看到關(guān)于這個(gè)問題的解釋和解決方案:
eslint-plugin-vue 里的大多數(shù)規(guī)則都需要 vue-eslint-parser 來解析 template 的AST杭煎， 然而 babel-eslint 和 vue-eslint-parser 在解析上有沖突纽哥，解決辦法是把 "parser": "babel-eslint", 移入到 parserOptions 內(nèi)。
- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
"parserOptions": {
+ "parser": "babel-eslint",
"sourceType": "module"
}
疑問
這次配置ESLint代箭，留下了一些疑惑墩划，得空扒源碼吧。
-
eslint是如何檢查代碼的嗡综？ -
eslint-loader都處理了什么乙帮？ - 為什么需要
eslint-friendly-formatter？ - 為什么用
babel-eslint极景，它是怎樣工作的察净？ - 為什么需要
eslint-plugin-vue？
1. ESLint 是如何檢查代碼的
出于對(duì)這個(gè)問題的疑惑盼樟，去查了一些資料氢卡，了解了 JS Linter 進(jìn)化史。ESLint 的核心訴求是將代碼解析與代碼檢查邏輯分開恤批，支持自定義規(guī)則，每個(gè)規(guī)則是一個(gè)插件裹赴，超強(qiáng)的開發(fā)能力讓ESLint變的更好用喜庞。
引用JS Linter 進(jìn)化史的一段話：
ESLint 核心部分專注于配置生成、規(guī)則管理棋返、上下文維護(hù)延都、遍歷 AST、報(bào)告產(chǎn)出等主流程睛竣。目前 ESLint 支持自定義的解析器晰房、規(guī)則插件、預(yù)編譯插件射沟、結(jié)果報(bào)告殊者，它更像是一個(gè)平臺(tái)，對(duì)核心的流程設(shè)定約束验夯，并開放各方面的能力猖吴，從而適應(yīng)復(fù)雜多變的實(shí)際場(chǎng)景。
2. 為什么需要 eslint-loader
eslint-loader 的作用是讓 webpack 可以處理eslint挥转。
3. 為什么需要 eslint-friendly-formatter
看 eslint-friendly-formatter介紹的時(shí)候海蔽，該插件的作者說了下面這段話：
大概意識(shí)說，他使用eslint的時(shí)候绑谣，發(fā)現(xiàn)eslint的報(bào)告提示在命令行中不友好党窜，他不能在命令行中直接點(diǎn)擊跳轉(zhuǎn)到報(bào)錯(cuò)的代碼處，沒有記錄報(bào)錯(cuò)的行列借宵，對(duì)應(yīng)的報(bào)錯(cuò)提示相關(guān)文檔也不方便直接查看幌衣。于是他寫了這個(gè)插件來處理以上問題。
現(xiàn)在這個(gè)插件被 eslint 官方推薦了壤玫。
4. 為什么用 babel-eslint泼掠，它是怎樣工作的
通常情況下 eslint 使用默認(rèn)的解析器 babel怔软。但是 eslint 本身不能檢測(cè)實(shí)驗(yàn)階段的語法，ESNext 的很多實(shí)驗(yàn)階段的語法瀏覽器廠商支持了择镇，開發(fā)者也在用挡逼。剛好 eslint 允許使用自定義解析器，所以就有了 babel-eslint 插件來處理這個(gè)事腻豌。
babel-eslint 導(dǎo)出了 eslint 可以使用的AST家坎。
AST 是 Abstract Syntax Tree（抽象語法樹）
5. 為什么需要 eslint-plugin-vue
Vue 單文件組件不是普通的 Javascript，不能使用默認(rèn)的解析器吝梅。所以不得不有了 eslint-plugin-vue 用于對(duì) template 和 <script> 進(jìn)行解析生成特定的增強(qiáng)的 AST虱疏。
可以對(duì)比著 vue風(fēng)格指南看。目前我們使用的 優(yōu)先級(jí)A：必要的 的規(guī)范苏携，即 plugin:vue/essential 做瞪。plugin:vue/essential 的具體規(guī)則可以訪問eslint-plugin-vue官網(wǎng)。
