如何配置VS Code在保存时修复ESLint错误但忽略警告？

要实现VS Code保存时仅修复ESLint错误、忽略所有警告（包括你配置的react/self-closing-comp在开发环境的警告），你只需要调整VS Code的ESLint相关设置，完全可以保留现有.eslintrc.js里的规则配置。

步骤1：修改VS Code的设置（settings.json） #

打开VS Code的设置文件（可以通过Ctrl+,快捷键打开设置界面，再点击右上角的{}图标进入JSON编辑模式），更新或添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.codeActionsOnSave.mode": "problems",
  "eslint.codeActionsOnSave.filter": {
    "level": "error"
  }
}

配置解释 #

• "source.fixAll.eslint": true：这是你原本就有的配置，用来启用保存时自动修复ESLint可修复问题的功能。
• "eslint.codeActionsOnSave.mode": "problems"：告诉ESLint扩展只针对检测到的具体问题执行修复，而非遍历所有规则。
• "eslint.codeActionsOnSave.filter": { "level": "error" }：核心配置——把修复范围严格限制为错误级别的问题，完全忽略所有警告级别的内容。

为什么不用改动.eslintrc.js？ #

你当前在.eslintrc.js里的规则配置：

'react/self-closing-comp': process.env.NODE_ENV === 'production' ? 'error' : 'warn'

这个逻辑非常合理：开发环境下仅做警告提示，不强制修复；生产环境下升级为错误，确保代码规范。我们只需要通过VS Code的设置让保存动作不处理警告级别的修复即可，没必要修改ESLint的规则定义。

验证效果 #

保存设置后回到代码文件测试：

• 故意写一个ESLint错误（比如未声明就使用的变量），保存文件后错误会被自动修复（或明确标记为无法自动修复的错误）。
• 写一段触发react/self-closing-comp警告的代码（比如写<div></div>而非<div />），保存后这个警告不会被自动修复，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Mr. Robot