1. 簡(jiǎn)介
eslint 是一個(gè)開源的 js 代碼檢查工具愚隧，初衷是為了讓程序員可以創(chuàng)建自己的檢測(cè)規(guī)則。實(shí)際生產(chǎn)中，團(tuán)隊(duì)內(nèi)往往會(huì)制訂一套統(tǒng)一的標(biāo)準(zhǔn)，讓整個(gè)團(tuán)隊(duì)的編碼風(fēng)格達(dá)到一致绪氛。
eslint 其實(shí)與 webpack 沒有任何關(guān)系，兩者并不互相依賴涝影，甚至一般情況下我們并不會(huì)在 webpack 中進(jìn)行 eslint 的配置枣察。這里我們主要是介紹一下 eslint 是如何進(jìn)行配置和使用的。
2. eslint 配置
首先安裝 eslint：
npm i eslint -D
然后利用命令初始化一個(gè)配置文件：
npx eslint --init
選擇如下：
然后選擇自動(dòng)安裝依賴，可以看到項(xiàng)目里面面為我們自動(dòng)生成了配置文件序目，.eslintrc.js：
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
我們來看一下Eslint 配置臂痕，其中所代表的含義：
- env
指定腳本的運(yùn)行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量宛琅。此處使用的 browser 預(yù)定義了瀏覽器環(huán)境中的全局變量刻蟹，es6 啟用除了 modules 以外的所有 ECMAScript 6 特性（該選項(xiàng)會(huì)自動(dòng)設(shè)置 ecmaVersion 解析器選項(xiàng)為 6）。 - globals
腳本在執(zhí)行期間訪問的額外的全局變量嘿辟。也就是 env 中未預(yù)定義舆瘪，但我們又需要使用的全局變量。 - extends
檢測(cè)中使用的預(yù)定義的規(guī)則集合红伦。 - rules
啟用的規(guī)則及其各自的錯(cuò)誤級(jí)別英古，會(huì)合并 extends 中的同名規(guī)則，定義沖突時(shí)優(yōu)先級(jí)更高昙读。 - parserOptions
ESLint 允許你指定你想要支持的 JavaScript 語言選項(xiàng)召调。ecmaFeatures 是個(gè)對(duì)象，表示你想使用的額外的語言特性蛮浑，這里 jsx 代表啟用 JSX唠叛。ecmaVersion 用來指定支持的 ECMAScript 版本 。默認(rèn)為 5沮稚，即僅支持 es5艺沼，你可以使用 6、7蕴掏、8障般、9 或 10 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號(hào)指定為 2015（同 6）盛杰，2016（同 7）挽荡，或 2017（同 8）或 2018（同 9）或 2019 (same as 10)。上面的 env 中啟用了 es6即供，自動(dòng)設(shè)置了ecmaVersion 解析器選項(xiàng)為 6定拟。 - plugins
plugins 是一個(gè) npm 包，通常輸出 eslint 內(nèi)部未定義的規(guī)則實(shí)現(xiàn)逗嫡。rules 和 extends 中定義的規(guī)則青自，并不都在 eslint 內(nèi)部中有實(shí)現(xiàn)。比如 extends 中的plugin:react/recommended祸穷，其中定義了規(guī)則開關(guān)和等級(jí)性穿，但是這些規(guī)則如何生效的邏輯是在其對(duì)應(yīng)的插件 ‘react’ 中實(shí)現(xiàn)的。
3. 運(yùn)行 eslint
npx eslint src/**/*.jsx
可以看到雷滚，為我們報(bào)了許多告警需曾。可是我們修復(fù)的時(shí)候，每次修復(fù)一下呆万，得運(yùn)行驗(yàn)證一遍商源，修復(fù)下一個(gè)時(shí)候又要來回切換，驗(yàn)證谋减，真的很繁瑣牡彻。所以我們一般會(huì)使用 ide 來進(jìn)行提示。這里我以 webstorm 為例吧出爹，其實(shí) vscode 這些也都差不多庄吼。
如圖，進(jìn)行配置后严就。我們直接在編輯界面就可以看到報(bào)錯(cuò)提示总寻。
這樣改起來就方便了許多。
4. 結(jié)合 webpack 使用
不一定每個(gè) ide 都有插件梢为，如果不想使用插件渐行，又要實(shí)時(shí)提示報(bào)錯(cuò)，我們可以結(jié)合 webpack 的打包編譯功能來實(shí)現(xiàn)铸董。
// webpack.config.common.js
...
{
test: /\.(js|jsx)$/,
exclude: /node-modules/,
use: ['babel-loader', 'eslint-loader']
},
...
然后使用 npm run dev-server 打包祟印，發(fā)現(xiàn)命令行會(huì)顯示告警，修復(fù)后粟害，重新編譯蕴忆，會(huì)顯示剩余的告警。這樣還是要去查看命令行我磁。我們可以在 webapck
的 devserver 下加一個(gè)配置參數(shù)：
overlay: true,
再次打包孽文，如圖：
會(huì)彈一個(gè)浮層來顯示告警驻襟，只有當(dāng)所有告警信息修復(fù)完畢后夺艰，才會(huì)顯示正常的頁面信息。
5. husky
真實(shí)項(xiàng)目中沉衣，很少有使用 eslint-loader 的郁副，因?yàn)椴豢杀苊鈺?huì)降低打包速度。事實(shí)上豌习，我們只要保證每個(gè)人提交的代碼是符合要求即可存谎，為了實(shí)現(xiàn)這個(gè)目的，我們只需要在開發(fā)者上傳代碼時(shí)進(jìn)行校驗(yàn)即可肥隆。提交前的代碼質(zhì)量由開發(fā)者自行安裝插件來保證既荚。
我們常用 husky 和 lint-staged 來進(jìn)行代碼提交時(shí)的 eslint 校驗(yàn)：
// package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint"
]
},
提交 commit 時(shí)，會(huì)對(duì)我們本次 commit 修改涉及到的文件進(jìn)行 eslint 校驗(yàn)栋艳，如果有報(bào)錯(cuò)恰聘，則不允許 commit。
參考
https://eslint.bootcss.com/docs/about/
https://eslint.bootcss.com/docs/user-guide/getting-started
https://github.com/webpack-contrib/eslint-loader
https://eslint.bootcss.com/docs/user-guide/configuring
vscode安裝和配置ESLint
https://www.npmjs.com/package/husky
https://www.npmjs.com/package/lint-staged
