WebStorm怎么设置Prettier和ESLint共存_WebStorm如何解决格式化冲突【方法】-webstorm-PHP中文网

保存时代码未自动格式化，最常见原因是webstorm未将prettier设为默认格式化器或eslint与prettier规则未对齐；需启用插件、配置文件、指定路径，并在save actions中仅启用run eslint --fix。

webstorm怎么设置prettier和eslint共存_webstorm如何解决格式化冲突【方法】

为什么保存时代码没自动格式化？

最常见原因是 WebStorm 没把 prettier 当作默认格式化器，或 eslint 和 prettier 的规则在 ESLint 配置里没对齐。WebStorm 默认只认自己的代码风格设置，不自动接管 Prettier；即使装了插件、也装了依赖，若没手动指定“保存时用哪个工具修”，它就什么也不做。

确认已安装 Prettier - Code formatter 插件（File → Settings → Plugins 搜索并启用）
确保项目根目录有 .prettierrc 或 .prettierrc.json，哪怕内容是空对象 {}
在 Settings → Editor → Code Style → JavaScript 里，勾选 Enable Prettier，并指定 Prettier package 路径（通常为 node_modules/prettier）
关键一步：打开 Settings → Editor → General → Auto Import 下方的 Optimize imports on the fly 不影响格式化，但真正起作用的是 Settings → Editor → General → Save Actions → 勾选 Run eslint --fix 或 Reformat code（二者选其一，别同时开）

ESLint 配置里怎么避免和 Prettier 冲突？

冲突不是偶然发生的，而是因为 eslint:recommended 或 airbnb 这类配置默认启用了大量格式类规则（比如 semi、quotes、comma-dangle），而 Prettier 也要管这些——结果 ESLint 报错，Prettier 又想改，保存一次弹两个提示，甚至改出反效果。

必须在 .eslintrc.js 的 extends 中靠后引入 plugin:prettier/recommended，顺序不能颠倒：['eslint:recommended', 'plugin:prettier/recommended']
必须显式添加 eslint-config-prettier 来“关掉 ESLint 自己的格式规则”，否则 plugin:prettier/recommended 只是加规则，不是关冲突项
不要手动写 "semi": "off" 这类规则——让 eslint-config-prettier 统一处理，自己加反而容易漏
如果项目用 Vue/TypeScript，extends 里还要包含 plugin:vue/recommended 或 plugin:@typescript-eslint/recommended，但它们必须排在 prettier 之前，否则会被覆盖

保存时到底该用 ESLint 还是 Prettier 修复？

答案是：只用一个，且推荐用 eslint --fix 统一驱动。因为 eslint-plugin-prettier 已把 Prettier 封装成一条 ESLint 规则（prettier/prettier），只要这条规则开启并设为 error，eslint --fix 就会顺手调用 Prettier 格式化——相当于“ESLint 负责调度，Prettier 负责干活”。

在 .eslintrc.js 的 rules 中加上："prettier/prettier": "error"
WebStorm 设置里关闭 Reformat code on save，只开 Run eslint --fix on save
这样既保证格式统一，又保留 ESLint 对逻辑问题（如 no-unused-vars）的修复能力
如果开了两个，Prettier 先动一次，ESLint 再动一次，可能互相覆盖（比如 Prettier 加了分号，ESLint 又删了）

为什么改完配置还是不生效？检查这三处

配置文件位置错、缓存没清、插件没绑定到当前项目——这三个点卡住的人最多。

.eslintrc.js 和 .prettierrc 必须放在项目**根目录**，不是 src/ 或 config/ 下；WebStorm 不会往上递归找
改完配置后，重启 WebStorm 或点击 File → Reload project from disk，否则缓存的旧配置还在用
检查 Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint 是否启用了 Automatic configuration，且 Configuration file 路径指向你刚写的 .eslintrc.js
终端里跑一次 npx eslint --fix src/，看是否报错或成功——这是最直接的验证方式，比等 WebStorm 响应更快

WebStorm 里 Prettier 和 ESLint 共存本身不难，难的是配置链路上任何一环断掉都会静默失败。尤其要注意 eslint-config-prettier 是“关开关”的角色，不是可选项；还有 WebStorm 的 Save Actions 设置，很多人只记得配 ESLint，却忘了关掉自带的 Reformat。