概念
在團隊中，每個人的代碼風格都不盡相同。自然的，提交到代碼庫裏的代碼也就風格多樣。
這不是一個好事，統一的代碼風格有助於團隊成員理解他人寫的代碼，也易於維護。
那麼想要所有人的代碼風格統一，我們就需要用到ESLint。
使用
首先得要安裝eslint：
yarn add eslint
然後進行ESLint的初始化：
npx eslint --init
初始化過程會讓我們根據實際情況做幾個選擇，例如我們用的模塊引入方式、用了什麼框架、有沒有用TypeScript之類的。
接着在項目根目錄下就會生成一個.eslintrc.js文件：
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
這個時候就可以通過npx eslint src(源碼目錄)來對代碼進行一個檢查了：
實際上，如果用的是VS Code這樣的IDE，可以去安裝一個ESLint的插件：
這樣一旦代碼出現什麼不符合在ESLint中設置的代碼風格的情況就會在對應代碼下出現紅色波浪線提醒。
說了這麼久似乎跟Webpack也沒什麼關係。也確實，ESLint與Webpack的確是沒什麼關係的，不過如果我們想在Webpack打包過程中對代碼進行一個風格檢查就有關係了。
爲了做到這一點，我們需要eslint-loader這個loader。
安裝之後，對Webpack的配置文件進行配置：
{
...,
module: {
rules: [
{
test: /\.jsx$/,
exlcude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
]
}
}
這樣再次打包就可以在命令行中看見代碼風格檢測出的問題了。
不過這樣有個問題，這跟通過npx eslint src沒有區別。
解決這個問題可以通過將devServer.overlay設置爲true解決。注意：模式要是在開發模式下。
那麼這個配置項的作用就是將編譯過程中出現的所有ERROR顯示在網頁中：
如果還想顯示WARNING，則這樣設置：
{
devServer: {
overlay: {
errors: true,
warnings: true
}
}
}