webstorm 可实现保存时自动修复 eslint 问题，但需手动配置：先在 eslint 设置中启用本地配置，再通过 file watchers 绑定 eslint --fix 命令，同时必须在 code style 中选择“set from eslint”以统一格式规则。
WebStorm 保存时自动修复 ESLint 问题，能实现但需手动配
WebStorm 本身不提供“保存即修复”的开箱即用开关，必须通过 File Watchers 或 Code Style + 快捷键组合来模拟。它默认只做实时标红和右键手动修复，自动修复逻辑完全依赖你是否把 ESLint 配置为代码风格源，以及是否绑定了触发时机。
- 必须先在
Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint中启用并正确指向项目本地的eslint包和配置文件（如eslint.config.js或.eslintrc.js），否则所有后续操作都无效 - 推荐选 “Automatic ESLint configuration”，WebStorm 会自动识别
node_modules/eslint和最近的配置文件；若项目用了 ESLint v9+ 的扁平配置（eslint.config.js），要额外在Extra ESLint options里加--flag unstable_ts_config，否则无法加载 - 常见失败现象：右键没有
Fix ESLint Problems，或点了没反应——大概率是 ESLint 没装在本地、路径没对上，或配置文件名/格式不被当前 WebStorm 版本支持（比如 v2025.3 支持eslint.config.ts，但老版本不认）
用 File Watchers 实现「保存即修复」的实操步骤
这是最接近“保存时自动修复”的方案，本质是监听文件变更后自动执行 eslint --fix 命令。它不依赖编辑器内置逻辑，稳定性高，但要注意触发范围和冲突风险。
- 路径：
Settings > Tools > File Watchers > + > Custom -
Program填：$ProjectFileDir$/node_modules/.bin/eslint（Windows 下可能是$ProjectFileDir$/node_modules/.bin/eslint.cmd） -
Arguments填：--fix $FilePath$（只修当前文件，避免误改其他文件） -
Output paths to refresh填：$FilePath$（确保 WebStorm 知道文件已被修改，及时重载） - 勾选
Auto-save edited files to trigger watcher和Trigger the watcher on external changes - ⚠️ 注意：如果同时启用了 Prettier 或其他格式化工具，可能因顺序冲突导致代码被反复改写，建议禁用 Prettier 的 onSave，或统一用 ESLint 管理格式规则（如开启
prettier/prettier规则）
为什么「Set from ESLint」比快捷键更关键
很多人配了快捷键 Alt+F 修问题，却忽略真正决定“修成什么样”的是代码风格来源。WebStorm 的格式化行为（缩进、空格、分号、引号等）默认走自己的规则，除非你明确告诉它：“请以 ESLint 配置为准”。
- 路径：
Settings > Editor > Code Style > JavaScript > Set from… > ESLint - 这一步会让
Reformat Code（Ctrl+Alt+L）、粘贴自动调整、甚至部分自动补全都遵循你的eslint.config.js中的规则（比如semi: ["error", "always"]） - 若跳过此步，即使
Fix ESLint Problems能修掉no-unused-vars这类语义错误，也无法修正格式类问题（如单双引号、结尾空格），因为那些由 Code Style 控制，而非 ESLint 扫描器 - 验证方法：删掉一行末尾分号 → 触发 ESLint 报错 → 右键
Fix ESLint Problems→ 如果没加回来，说明Set from ESLint没生效或规则没启用
Vue/React 项目里容易漏掉的规则适配点
ESLint 默认规则对框架组件不友好，比如 Vue 模板中 <el-button></el-button> 被强制要求改成 <elbutton></elbutton>，或者 React JSX 中 onClick 报 camelcase 错误——这些不是 WebStorm 的问题，而是配置没对齐框架习惯。
- Vue 项目常需关掉或调优的规则：
vue/multi-word-component-names（允许单字组件名）、vue/html-self-closing（控制标签闭合方式）、vue/attribute-hyphenation（允许 kebab-case 属性） - React 项目注意：
react/prop-types若关闭，需同步关掉react/no-unused-prop-types，否则报错逻辑矛盾 - 务必在配置文件里显式声明
parserOptions.parser：Vue 用"@babel/eslint-parser"或"vue-eslint-parser"，TS 项目必须配project: "./tsconfig.json"，否则类型相关规则（如@typescript-eslint/no-explicit-any）压根不触发
