eslint是識別和報告js代碼模式匹配的工具，目標是保證代碼的一致性和避免錯誤。
eslint作用：
- js代碼語法校驗
- js代碼格式校驗
安裝
用yarn安裝eslint
yarn add eslint --dev
設(shè)置配置文件
npx eslint --init
通過該命令，引導用戶定制js的運行環(huán)境是Browser還是Node，采用的模塊化方案是commonjs還是import/export等，最終生成一個配置文件。配置文件示例：
{
env: {
browser: true,
es6: true,
},
rules: {
semi: ["error", "never"],
quotes: ["error", "double"],
},
}
到目前位置該配置文件定義了解析js文件的策略，根據(jù)這個策略可以將js文件轉(zhuǎn)換未抽象語法樹。
在任何js文件上使用eslint:
npx eslint yourfile.js
有錯誤控制臺會報錯，--fix可以自動修復錯誤：
npx eslint yourfile.js --fix
配置eslint
extends
配置文件可以被基礎(chǔ)配置的規(guī)則繼承。extends屬性值可以是：
- 配置的字符串
- 字符串數(shù)組，每個配置繼承前面的配置
plugins
eslint支持第三方插件，插件名稱可以省略eslint-plugin-：
plugins:['prettier']
parser
eslint parser主要任務(wù)是將源碼解析為抽象語法樹，eslint默認采用Espree作為其解析器。
{
parser: 'espree'
}
parser options
parser options是對應(yīng)解析器的選項，espree可用的解析選項有：
-
ecmaVersion，設(shè)置3, 5 (default), 6, 7, 8, 9, or 10 -
sourceType，設(shè)置為scriptormodule； -
ecmaFeatures，你想使用的語言特性-
jsx，是否啟動jsx
-
parser options示例：
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
},
}
完整espree parse options可參考：https://github.com/eslint/espree
rules
可以使用注釋或配置文件修改項目中要使用的規(guī)則。規(guī)則的值必須為下列值之一：
- "off"或0，關(guān)閉規(guī)則
- "warn"或1，視為警告
- "error"或2，視為錯誤
eslint默認規(guī)則：
- 潛在的js語法或邏輯錯誤
- no-constant-condition：禁止在條件中使用常量表達式；
- no-direction: 循環(huán)停止條件永遠達不到，無限循環(huán)是個bug。
- 最佳實踐，幫助避免一些錯誤
- eqeqeq：要求使用 === 和 !==；
- array-callback-return：強制數(shù)組的回調(diào)方法有return語句；
- 與變量聲明有關(guān)
- no-unused-vars：禁止出現(xiàn)未使用的變量
- no-shadow-restricted-names：關(guān)鍵字不能被遮蔽
- 代碼風格準則
- array-bracket-newline：在數(shù)組開括號后和閉括號前強制換行；
- brace-style：大括號風格要求；
- 與es6相關(guān)
- constructor-super：驗證構(gòu)造函數(shù)中 super() 的調(diào)用；
- no-class-assign：不允許修改類聲明的變量；
eslint默認規(guī)則完整列表：https://eslint.bootcss.com/docs/rules/
集成
vscode eslint extension
安裝
eslint插件依賴于eslint library，所以項目要安裝eslint:
yarn add eslint --dev
項目需要一個.eslintrc配置文件，可以通過手動創(chuàng)建也可以借助eslint --init創(chuàng)建。
當項目中的js文件代碼風格不一致，工作區(qū)的文件會有錯誤提示，控制臺problems也會給出詳細的錯誤。
settings options
- 啟動自動修復
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
eslint-loader
eslint-loader用于打包前檢測代碼是否符合項目代碼風格。
安裝
項目需要安裝eslint和eslint-loader。
使用
webpack配置：
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
}
]
}
Options
- fix，eslint是否要修復代碼
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true
}
}
]
}
};
開發(fā)
可共享的配置
可以將配置文件發(fā)布到npm以共享。模塊名稱以eslint-config-開頭。示例配置：
module.exports = {
rules: {
semi: ["warn", "never"],
},
};
開發(fā)插件
插件名稱必須以eslint-plugin-開頭，如果ESLint要使用插件中規(guī)則，可以使用不帶前綴的插件名，后跟/，最后加規(guī)則名。示例：rules:{myplugin/rule1:"error"}。插件示例：
module.exports = {
rules: {
"rule1": {
create: function (context) {
// rule implementation ...
}
}
}
};
FAQ
- eslint檢測代碼是否符合規(guī)范的原理
eslint parser 將源碼編譯為ast，遍歷ast驗證節(jié)點與配置的規(guī)則是否符合。
