保存时代码未自动格式化，最常见原因是WebStorm未将Prettier设为默认格式化器或ESLint与Prettier规则未对齐；需启用插件、配置文件、指定路径，并在Save Actions中仅启用Run eslint --fix。
为什么保存时代码没自动格式化？
最常见原因是 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。
