脚手架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,
}
}
})
},
- eslint-webpack-plugin的文档地址链接: https://www.npmjs.com/package/eslint-webpack-plugin