create-react-app开发服务器遇ESLint错误时自动刷新失效解决方案

现象对应根因 #

语法错误修复后热更新正常、ESLint规则类错误修复后热更新卡壳的差异表现，是create-react-app内置热更新管线的已知状态异常：当ESLint上报error级别问题时，开发服务器会给热更新管线加状态锁，暂停后续的文件变更检测流程；正常逻辑下锁会在所有ESLint错误修复完成后自动释放，但部分场景下锁状态无法自动复位，就会出现代码已经全部修复、页面仍不自动刷新的问题，也就是观察到的“仅第一次ESLint修复能触发一次刷新、后续所有修复操作都无响应，服务端残留旧报错提示”的表现。

可落地的解决步骤 #

1. 调整开发阶段ESLint的报错拦截逻辑 #

• 打开项目根目录的package.json，定位到eslintConfig配置块
• 将不影响代码实际运行的风格类规则（如no-trailing-spaces）从error级别下调为warn级别

CRA内置的开发服务器仅会对ESLint上报的error级别问题触发热更新锁，warn级别问题不会阻塞后续的文件检测和自动刷新流程

• 想要临时快速生效，可在启动命令中加入内置环境变量：执行ESLINT_NO_DEV_ERRORS=true npm start，该开关为CRA官方内置能力，开启后所有ESLint上报的问题都会降级为警告，从根源上避免触发热更新锁

2. 清理异常锁死的构建缓存 #

针对服务端残留旧报错、监听器状态死锁的问题：

• 终止当前运行的开发服务器进程
• 删除项目根目录下的node_modules/.cache文件夹，该目录存储了webpack编译缓存、ESLint检测结果缓存、热更新管线的状态锁记录，异常锁死状态会长期存在于缓存中不会自动清除
• 校验项目本地安装的ESLint版本与当前react-scripts内置ESLint版本的大版本一致性，版本不匹配会导致ESLint检测结果上报异常，直接触发监听器死锁
• 重新执行npm start启动服务，此时所有ESLint修复操作都会正常触发自动刷新

3. 优化VS Code端的文件写入触发规则 #

部分热更新失效问题由编辑器连续写入操作干扰文件检测导致：

• 打开VS Code设置，找到Files: Save Delay配置项，将自动保存延迟从默认100ms调整为500ms以上
• 调整ESLint插件的自动修复逻辑，避免短时间内对同一文件连续写入多次代码变更——开发服务器的文件监听器会把短时间内的连续写入判定为冗余事件，仅识别第一次变更，后续操作都不会触发热更新
• 排查其他代码格式化插件，确认不会在文件保存时产生二次写入操作，干扰开发服务器的文件变更检测

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