webpack配置eslint检查

最新推荐文章于 2026-05-02 07:21:41 发布

原创最新推荐文章于 2026-05-02 07:21:41 发布 · 957 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

webpack 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍如何在Webpack中配置ESLint，实现JavaScript代码的语法检查与自动修复，包括使用html-webpack-plugin插件和airbnb-eslint规范。

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /**
             * 语法检查： eslint-loader eslint
             * 注意： 只检查写的代码，第三方的代码库是不检查的
             * 设置检查规则：
             *  package.json中eslintConfig中设置
             *  "eslintConfig": {
             *      "extends": "airbnb-base"
             *   }
             *  airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
             */
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                options: {
                    // 自动修复eslint的错误
                    fix: true
                },
                exclude: /node_modules/
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
    ],
    // 模式 development 开发， production 生产
    mode: 'development',
}

package.json

"eslintConfig": {
	"extends": "airbnb-base"
}

index.js

function add(x, y) {
  return x + y;
}

// 下一行eslint所有规则都失效，下一行不进行eslint检查
// eslint-disable-next-line
console.log(add(3, 5));

注意：nodejs版本最好 10 以上。低版本的nodejs会报错。