程式員優雅哥(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）學習結束，期待留言分享~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499907.html
標籤：其他
上一篇：Object.defineProperty方法 與 資料代理
下一篇：記錄--WebSocket 原理