脚手架vue-cli创建的项目如何基于eslint-webpack-plugin配置eslint在保存时自动修复错误

需求描述

脚手架vue-cli创建的项目如何基于eslint-webpack-plugin配置eslint在保存时自动修复错误

配置

由于脚手架本身在配置项目时，选择了eslint配置，会自动下载好了eslint-webpack-plugin插件并配置好了的，因此，我们如果按照官网的方式直接配置是不会生效的，因为配置的时候会位于原本的之后，因此调用不到，我们只需要直接获取到已经配置好了的插件相关配置信息，进行修改成我们想要的配置就可以达到目的。

vue.config.js文件中配置

configureWebpack: (config) => {
    config.plugins.map(item => {
        if (item.key === 'ESLintWebpackPlugin') {
            item.options = {
                ...item.options,
                context: path.join(__dirname, 'src'), 
                extensions: ['js', 'vue', 'html'],
                fix: true,
            }
        }
    })
},

1. eslint-webpack-plugin的文档地址链接: https://www.npmjs.com/package/eslint-webpack-plugin