怎么在 WebStorm 中配置 ESLint 和 Prettier 协同工作？

在 WebStorm 中实现 ESLint 与 Prettier 协同工作的核心原则是：让 ESLint 作为统一入口接管代码修复，Prettier 作为底层格式化规则被 ESLint 调用，避免 IDE 原生格式化与插件冲突。

先说结论：推荐采用"ESLint 调度 + Prettier 执行"的模式，避免两者同时接管格式化导致冲突。

适用场景：前端团队协作项目、需要统一代码风格与错误检查的场景
前置条件：安装 eslint-plugin-prettier 和 eslint-config-prettier 依赖
验收标准：保存文件时代码自动格式化且无 ESLint 格式类报错

命令速用版

在项目根目录终端执行以下命令安装核心依赖（注意命令中不要包含多余符号）：

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

如果使用 yarn：

yarn add `--dev` eslint prettier eslint-config-prettier eslint-plugin-prettier

配置 ESLint 规则文件

在项目根目录创建或修改 .eslintrc.js（或 .eslintrc.json）。关键点在于 extends 数组中 prettier 相关配置必须排在最后，以确保它覆盖之前的格式规则：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

同时，确保项目根目录存在 .prettierrc 或 .prettierrc.json 文件，即使内容为空对象 {}，也能帮助 WebStorm 识别配置存在。

WebStorm 设置路径（关键步骤）

现代版本 WebStorm（2020+）的原生集成路径已变更，请按以下步骤操作：

1. 启用 ESLint 自动修复

进入 Settings (Preferences) → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint。

勾选 Run ESLint `--fix` on save（保存时自动修复）。
确保 ESLint package 指向项目本地的 node_modules 或全局安装路径。

2. 避免格式化冲突

进入 Settings → Editor → General → Save Actions（如果存在）或 Settings → Languages & Frameworks → JavaScript → Prettier。

怎么在 WebStorm 中配置 ESLint 和 Prettier 协同工作？

不要同时勾选 IDE 原生的 Reformat code 保存动作。
如果在 Prettier 设置页启用了 "On save"，建议关闭，统一由 ESLint 的 `--fix` 触发 Prettier 规则，防止代码被处理两次导致闪烁或冲突。

怎么验证是否生效

完成配置后，按以下步骤验证：

打开任意 JavaScript 或 TypeScript 文件。
故意制造格式错误（如删除分号、错误缩进）。
保存文件（Ctrl+S / Cmd+S）。
预期结果：代码自动变整齐，底部状态栏无 ESLint 格式类报错。
进阶检查：查看 IDE 底部的 Event Log 窗口，确认保存时触发了 ESLint 修复命令，且没有重复格式化日志。

常见坑与排查

1. 配置顺序错误

在 ESLint 配置中，eslint-config-prettier 必须放在 extends 数组的最后一项。如果顺序颠倒，它关闭的规则可能会被后面的配置重新开启，导致冲突。

2. 保存动作重复

不要在 WebStorm 的保存动作中同时启用 "Run ESLint" 和 "Reformat with Prettier"。这会导致代码被处理两次，可能产生冲突或编辑器闪烁。

3. 框架特定配置

如果使用 Vue 或 TypeScript，需确保对应的插件配置（如 plugin:vue/recommended 或 plugin:@typescript-eslint/recommended）排在 prettier 之前，避免被覆盖。

4. 版本兼容性

WebStorm 2023 及以上版本对 ESLint 集成进行了优化，如果遇到设置不生效，尝试更新 IDE 或检查 ESLint 插件是否为内置版本而非第三方旧插件。

笙亿网络策划