如何配置让ESLint在VSCode保存文件时自动修复检测到的问题？

1. 配置VSCode保存时自动触发ESLint修复 #

打开VSCode设置（快捷键Ctrl+, / Cmd+,），编辑settings.json，添加以下配置：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  "javascript",
  "typescript",
  "typescriptreact"
]

• source.fixAll.eslint：开启保存时自动修复所有ESLint可修复问题
• eslint.validate：确保ESLint能识别你需要检测的文件类型

2. 解决ESLint与Prettier的规则冲突 #

由于你同时使用Prettier，两者规则冲突可能导致ESLint无法正常修复，需要整合两者规则：

1. 在项目根目录安装依赖：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 修改项目的ESLint配置文件（比如.eslintrc.js）：

{
  "extends": [
    // 保留你原有的基础配置，比如"eslint:recommended"、"plugin:@typescript-eslint/recommended"
    "plugin:prettier/recommended"
  ]
}

这个配置会让ESLint继承Prettier的格式规则，同时把Prettier的格式问题转为ESLint错误，这样ESLint修复就能同时处理两类问题。

3. 验证与排查 #

• 保存有ESLint问题的文件，查看标记的问题是否自动修复
• 如果无效，打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），执行ESLint: Fix all auto-fixable problems手动触发修复，测试是否生效
• 确保ESLint扩展在VSCode中处于激活状态，没有被禁用
• 注意：部分ESLint规则本身不支持自动修复，这类问题只能手动修改

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