Webpack乾貨系列 | 在 Webpack 5 集成 ESLint 的方法

2022 年 7 月 20 日
筆記
VUE, webpack 5, 前端

程式設計師優雅哥(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）學習結束，期待留言分享~~

Tags: VUE webpack 5 前端