Vue-CLI项目在GitHub Actions中ESLint未中断构建的问题

核心配置偏差点 #

• 对CI环境的运行逻辑存在误解：GitHub Actions的任务运行在临时隔离的容器里，就算lint命令在容器里自动修复了代码问题，这些修改也只会留在临时运行环境中，不会自动回写到你的远端仓库，所以你从仓库侧永远看不到“自动修复”的效果，这也是你感觉修复逻辑没生效的根本原因。
• Vue-CLI内置的vue-cli-service lint默认行为和CI场景的校验要求不匹配：这个命令默认会带上--fix参数做自动修复，且默认仅当存在error级别规则问题时才返回非零退出码，warning级别的问题不会触发流程中断；如果自动修复完成后没有剩余的无法修复的error问题，整个命令的退出码就是0，GitHub Actions会直接判定步骤执行成功，完全匹配你看到的“流程始终显示成功、存在问题也不中断”的现象。
• 依赖安装逻辑存在漏洞：使用npm install安装依赖时，会根据版本范围自动拉取最新的符合要求的依赖版本，容易造成CI环境和本地开发环境的ESLint版本、规则集版本不一致，出现本地跑lint报错、CI却判定通过的偏差。

可直接落地的修正配置 #

1. 拆分本地开发和CI场景的lint脚本，避免复用本地带自动修复逻辑的脚本：
   在package.json的scripts配置中新增CI专用的lint校验脚本：

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lint:ci": "vue-cli-service lint --no-fix --max-warnings=0"
   }
   

   新增参数的作用：

   • --no-fix：完全关闭自动修复逻辑，遇到可修复的问题也不修改临时环境中的文件，直接报出问题，避免在CI环境中做无意义的文件变更
   • --max-warnings=0：只要出现任何级别的ESLint warning，就直接让进程返回非零退出码，触发流程中断，不会出现“存在warning但流程判定成功”的情况

2. 调整GitHub Actions工作流配置，替换原有执行逻辑：

   name: Lint files on push
   
   on: push
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - name: Install modules
           run: npm ci
         - name: Run ESLint Check
           run: npm run lint:ci
   

   配置调整说明：

   • 将actions/checkout从旧版v2升级到稳定的v3版本，避免旧版本的兼容性问题
   • 用npm ci代替npm install，严格按照package-lock.json中锁定的版本安装所有依赖，保证CI环境的依赖版本和本地开发环境完全一致
   • 执行CI专用的lint:ci脚本，只要存在ESLint判定的error或者warning，命令就会返回非零退出码，GitHub Actions会直接标记步骤执行失败，中断后续整个流程。

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