ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具,它的目標是保證代碼的一致性和避免錯誤。node
在本文開始前, 咱們假設您已經有一個webpack + react 的 初始項目。react
首先, 如今 項目中 安裝 eslint 和 eslint-loaderwebpack
yarn add eslint eslint-loader -D
複製代碼
在webpack中,經過 .eslintrc 文件 對 eslint 進行配置。在根目錄下 執行 touch .eslintrc
在根目錄下生成 .eslintrc 配置文件git
在 webpack.config.js 中 配置 eslint-loader.es6
module: {
// ...
rules: [
// ...
{
test: /\.(js|jsx)$/,
enforce: 'pre',
loader: 'eslint-loader',
include: path.resolve(__dirname, './src/**/*.js'),
exclude: /node_modules/
},
]
}
複製代碼
咱們的項目中以前已經使用了 babel-loader對咱們的代碼進行轉譯, 咱們能夠把 eslint-loader 和他一塊兒使用。web
module: {
// ...
rules: [
// ...
{
test: /\.(js|jsx)$/,
loader: ['babel-loader', 'eslint-loader'],
include: path.resolve(__dirname, './src/**/*.js'),
exclude: /node_modules/
},
]
}
複製代碼
咱們的項目中使用了 es6 的語法, 能夠經過 babel-eslint 進行檢測。json
yarn add babel-eslint -D
複製代碼
.eslintrc瀏覽器
{
parser: "babel-eslint",
"rules": {
}
}
複製代碼
而後, 即可以添加 rules 來檢測咱們代碼,更多規則可參考官方文檔bash
{
"parser": "babel-eslint",
"rules": {
"indent": ["error", 4, {
"SwitchCase": 1
}],
"no-extra-boolean-cast": "error",
"no-cond-assign": "error",
"no-magic-numbers": ["off", {
"ignoreArrayIndexes": true,
"ignore": [0, 1],
"enforceConst": true
}],
"max-params": ["error", 6],
"no-var": "error",
"no-console": "off",
"no-alert": "off",
"no-debugger": "off",
// ...
}
}
複製代碼
咱們能夠使用eslint-plugin-react 來檢測 react 的一些語法規則babel
yarn add eslint-plugin-react -D
複製代碼
.eslintrc
{
// ...
"plugins": [
"react",
],
"rules": {
"react/jsx-uses-react": "error",
"react/prop-types": "error",
// ...
}
}
複製代碼
env: 指定腳本的運行環境。每種環境都有一組特定的預約義全局變量。
browser - 瀏覽器環境中的全局變量。
node - Node.js 全局變量和 Node.js 做用域。
commonjs - CommonJS 全局變量和 CommonJS 做用域 (用於 Browserify/WebPack 打包的只在瀏覽器中運行的代碼)。
shared-node-browser - Node.js 和 Browser 通用全局變量。
es6 - 啓用除了 modules 之外的全部 ECMAScript 6 特性(該選項會自動設置 ecmaVersion 解析器選項爲 6)。
worker - Web Workers 全局變量。
amd - 將 require() 和 define() 定義爲像 amd 同樣的全局變量。
複製代碼
更多環境變量請參考 官方文檔
.eslintrc
{
// ...
"env": {
"browser": true,
"node": true,
"es6": true,
"amd": true
},
}
複製代碼
在配置文件裏配置全局變量時,使用 globals 指出你要使用的全局變量。將變量設置爲 true 將容許變量被重寫,或 false 將不容許被重寫。
.eslintrc
{
// ...
"globals": {
"var1": true,
"var2": false,
}
}
複製代碼
咱們在使用 eslint 的時候 能夠使用別人配置好的 配置, 咱們能夠選用 Airbnb 標準。
使用 Airbnb標準,還須要 兩個 必須的 插件。
yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import -D
.eslintrc
{
// ...
"extends": "airbnb",
}
複製代碼
咱們的項目使用了git, 能夠經過設置pre-commit 來對咱們的代碼 每次提交時 進行檢測,若是檢測到 代碼 不符合 eslint規範,則不容許 提交, 這樣能夠很大程度上保證咱們的代碼質量。
yarn add pre-commit -D
複製代碼
而後咱們在 package.json 中 添加pre-commit配置
// ...
"scripts": {
// ...
"eslint": "eslint --ext .js src"
},
"pre-commit": [
"eslint"
]
複製代碼