程序員優(yōu)雅哥(youyacoder)簡(jiǎn)介：十年程序員，呆過(guò)央企外企私企，做過(guò)前端后端架構(gòu)。分享vue、Java等前后端技術(shù)和架構(gòu)。本文摘要：主要講解運(yùn)用Webpack 5 中集成 ESLint 的方法與步驟
ESLint 是前端 JS 代碼檢查常用的工具，使用 ESLint 可以使不同的開(kāi)發(fā)人員遵循統(tǒng)一的開(kāi)發(fā)規(guī)范、有統(tǒng)一的代碼風(fēng)格。關(guān)于 ESLint 的詳細(xì)介紹，參考《ESLint是什么》一文。本文詳細(xì)介紹如何在 webpack 5 中集成 ESLint。
1 安裝依賴
在 webpack 4 中，ESLint 是通過(guò) loader 的方式集成到 webpack 中的。在 webpack 5 中，是通過(guò) plugins（插件）的形式進(jìn)行集成。插件名稱為 eslint-webpack-plugin。該插件又依賴 eslint 包，故需要安裝兩個(gè)開(kāi)發(fā)依賴包：
yarn add eslint eslint-webpack-plugin -D
2 添加配置文件
在項(xiàng)目的根路徑下添加 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 插件是通過(guò)構(gòu)造函數(shù)方式提供的，引入該插件后，得到的是一個(gè)構(gòu)造函數(shù)，通過(guò) new來(lái)創(chuàng)建對(duì)象。插件配置在webpack 配置對(duì)象的 plugins節(jié)點(diǎn)下，該節(jié)點(diǎn)是一個(gè)數(shù)組，數(shù)組每個(gè)元素都是一個(gè)插件。配置如下：
…const ESLintWebpackPlugin = require(‘eslint-webpack-plugin’)module.exports = { … plugins: [ new ESLintWebpackPlugin({ context: path.resolve(__dirname, ‘src’) }) ], …}
4 測(cè)試運(yùn)行
執(zhí)行之前配置的 webpack 編譯打包命令：yarn build。
此時(shí)會(huì)看到報(bào)錯(cuò)信息，因?yàn)?ESLInt 檢查沒(méi)有通過(guò)：
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語(yǔ)句造成的。
修改 ESLint 的配置文件 .eslintrc.js中的規(guī)則配置，將 no-console關(guān)閉：
‘no-console’: ‘off’
重新執(zhí)行打包命令，成功。
今日優(yōu)雅哥（youyacoder）學(xué)習(xí)結(jié)束，期待留言分享~~
