Vue开启ESLint autofix引发无限编译循环，如何设置单次修复？

你的判断没错，无法自动修复的ESLint错误会触发无限编译循环：每次webpack编译时执行ESLint修复，修改文件后触发热更新，再次编译又执行修复，循环往复。以下是几种可行的解决方案：

方案一：拆分修复与服务启动流程 #

在package.json中新增单独的修复脚本，让服务启动前先执行一次自动修复，后续开发过程不再自动修复：

"scripts": {
  "lint:fix": "eslint --fix src/**/*.{vue,js,jsx,ts,tsx}",
  "serve": "npm run lint:fix && vue-cli-service serve"
}

之后执行npm run serve时，会先一次性修复所有可自动修复的问题，再启动开发服务，避免循环。

方案二：配置ESLint插件仅首次编译时修复 #

通过标记首次编译状态，让ESLint只在启动服务的第一次编译时执行自动修复：

修改vue.config.js：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack: config => {
    let isFirstCompile = true

    config.plugin('eslint').tap(args => {
      // 仅首次编译开启自动修复
      args[0].fix = isFirstCompile
      // 保留错误/警告输出，方便排查未修复问题
      args[0].emitError = true
      args[0].emitWarning = true
      return args
    })

    // 监听编译完成事件，首次编译后关闭自动修复
    config.plugin('eslint').after('done', () => {
      isFirstCompile = false
    })
  },
})

方案三：从根源消除循环（推荐） #

手动修复所有无法自动修复的ESLint错误（比如给缺失type的prop补充类型定义），或者将这类规则降级为警告：

修改.eslintrc.js（或对应的ESLint配置文件）：

module.exports = {
  rules: {
    // 将无法自动修复的规则设为警告，避免阻断编译循环
    'vue/require-prop-types': 'warn'
  }
}

手动修复错误后，ESLint自动修复不会再触发文件变更，自然终止循环。

内容的提问来源于stack exchange，提问作者user1664377