vue-cli5配置eslint的autofix (与之前版本有区别)

处理方法

由于之前vue-cli版本(<5)的eslint插件使用的是eslint-loader, 所以我们需要在vue.config.js中对eslint-loader进行参数修改, 例如

module.exports = {
  chainWebpack: config => {
    // 保存时自动格式化代码
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap(options => {
        options.fix = true
        return options
      })
  }
}

而现在eslint-loader被废弃了

image.png

在vue-cli5中改用了eslint-webpack-plugin

image.png

所以需要重新修改成下面

config.plugin('eslint').tap((options) => {
  options[0].fix = true
  return options
})

image.png

参考资料

1. https://blog.csdn.net/qq_21567385/article/details/107677261
2. https://webpack.js.org/plugins/eslint-webpack-plugin/#fix