WebStorm 2023 怎么配置 ESLint 自动修复保存时触发？

在 WebStorm 2023 版本中，最推荐通过「Actions on Save」面板统一勾选 ESLint 来实现保存自动修复，这比旧版的 File Watcher 或插件内设置更稳定且不易冲突。

先说结论：2023.1 及以后版本优先使用 Actions on Save，若该面板无 ESLint 选项，需检查 ESLint 插件设置页。

适合：WebStorm 2023.1+ 新建或升级项目
先准备：确保项目根目录有 .eslintrc 配置文件（如 .eslintrc.js）
验收：保存含语法错误的文件，观察是否自动修正

核心配置步骤

这不是命令行操作，而是 IDE 界面配置。核心是找到统一的动作面板，而不是分散在各个语言设置里。

打开设置：Windows/Linux 按 Ctrl+Alt+S，macOS 按 Cmd+,。
进入面板：导航到 Tools > Actions on Save。
勾选选项：找到 ESLint 并勾选。
- 情况 A：若右侧有动作下拉框，选 Fix 或 Fix and organize imports。
- 情况 B：若右侧无下拉框，请前往 Languages & Frameworks > JavaScript > Code Quality Tools > ESLint，勾选 Run eslint `--fix` on save。
基础检查：确认 ESLint 设置页中已启用 ESLint 且指向正确的配置文件路径。

ESLint 配置文件最小示例

若保存后无反应，常因缺少配置文件导致 ESLint 未启动。确保项目根目录存在以下任一文件，并包含基本 rules 配置：

// .eslintrc.js 示例
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'no-unused-vars': 'warn',
    'semi': ['error', 'always']
  }
};

验证与排查

故意写一行能被 ESLint 修复的代码，比如多余的分号或未使用的变量。保存文件后，观察代码是否立刻变回规范格式。

未生效排查：查看底部 Event Log 或 ESLint 工具窗口是否有报错。
选项找不到：若 Actions on Save 中无 ESLint 选项，请确认已安装 ESLint 插件且项目被识别为 Node 或 JavaScript 项目。

常见冲突与解决

与 Prettier 冲突：如果同时开了 Prettier 自动格式化，两者可能互相覆盖。建议只在 Actions on Save 中保留一个，或在 ESLint 配置中集成 Prettier（使用 eslint-config-prettier）。
性能问题：大型文件保存时可能卡顿，这是 ESLint 扫描导致的。可在 Actions on Save 中设置仅对特定文件类型生效，或配置 ESLint ignore 文件。
配置未加载：如果项目没有 .eslintrc 文件，ESLint 不会运行。确保根目录有配置文件。

参考来源

1. JetBrains Official Help - ESLint: https://www.jetbrains.com/help/webstorm/eslint.html

2. JetBrains Official Help - Actions on Save: https://www.jetbrains.com/help/webstorm/actions-on-save.html