主要講解運用Webpack 5 中集成 ESLint 的方法與步驟 ...
程式員優雅哥(youyacoder)簡介：十年程式員，呆過央企外企私企，做過前端後端架構。分享vue、Java等前後端技術和架構。
本文摘要：主要講解運用Webpack 5 中集成 ESLint 的方法與步驟
ESLint 是前端 JS 代碼檢查常用的工具，使用 ESLint 可以使不同的開發人員遵循統一的開發規範、有統一的代碼風格。關於 ESLint 的詳細介紹，參考《ESLint是什麼》一文。本文詳細介紹如何在 webpack 5 中集成 ESLint。
1 安裝依賴
在 webpack 4 中，ESLint 是通過 loader 的方式集成到 webpack 中的。在 webpack 5 中，是通過 plugins（插件）的形式進行集成。插件名稱為 eslint-webpack-plugin。該插件又依賴 eslint 包，故需要安裝兩個開發依賴包：
yarn add eslint eslint-webpack-plugin -D
2 添加配置文件
在項目的根路徑下添加 ESLint 的配置文件：.eslintrc.js:
module.exports = {
env: {
node: true,
browser: true
},
extends: ['eslint:recommended'],
parserOptions: {
ecmaVersion: 6,
sourceType: "module"
},
rules: {
'no-var': 'error',
'no-console': 'error'
}
}
3 修改 webpack 配置
修改 webpack.config.js，首先在文件頂部引入插件：
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
Webpack5 插件是通過構造函數方式提供的，引入該插件後，得到的是一個構造函數，通過 new來創建對象。插件配置在webpack 配置對象的 plugins節點下，該節點是一個數組，數組每個元素都是一個插件。配置如下：
...
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
module.exports = {
...
plugins: [
new ESLintWebpackPlugin({
context: path.resolve(__dirname, 'src')
})
],
...
}
4 測試運行
執行之前配置的 webpack 編譯打包命令：yarn build。
此時會看到報錯信息，因為 ESLInt 檢查沒有通過：
ERROR in
xxxxxxx/Webpack_Learning/src/main.js
12:1 error Unexpected console statement no-console
15:1 error Unexpected console statement no-console
這是在main.js中有 console.log語句造成的。
修改 ESLint 的配置文件 .eslintrc.js中的規則配置，將 no-console關閉：
'no-console': 'off'
重新執行打包命令，成功。
今日優雅哥（youyacoder）學習結束，期待留言分享~~
