webpack使用ESLint

使用ESLint

首先需要暗转ESLint的插件，通过命令npm install eslint -D安装eslint最新的版本

然后通过命令npm install eslint-webpack-plugin -D安装eslint的webpack插件

接下来需要在webpack.config.js中导入该插件

const ESLintPlugin = require('eslint-webpack-plugin') // 导入eslint插件

module.exports =  {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'static/js/main.js',
        clean: true
    },
    module: {
		...
    },
    //导入ESLint插件
    plugins: [
        new ESLintPlugin({
        	// context属性指定eslint插件扫描的文件根目录
            context: path.resolve(__dirname, 'src')
        })
    ],
    mode: 'development'
}

最后在根目录下添加.eslintrc.js文件并在里面添加eslint配置，详细规则文档可访问以下链接 eslint中文文档

module.exports = {
	// env配置什么环境启用
    "env": {
        "browser": true,
        "es2021": true
    },
    // extends 继承eslint规则
    "extends": "eslint:recommended",
    // 解析选项
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module" 
    },
    // eslint规则
    rules: {
        'no-var': 2
    }
}

最后运行命令npx webpack即可