WebStorm如何使用自定义.prettierrc配置进行代码格式化并同步？

1. 确保Prettier插件已启用 #

• 打开WebStorm设置（快捷键 Ctrl + Alt + S）
• 进入Plugins面板，搜索Prettier，确认插件已启用；未安装则点击安装后重启IDE

2. 配置WebStorm读取项目的.prettierrc文件 #

• 打开设置，导航到Languages & Frameworks > JavaScript > Prettier
• 在Prettier package选项中，选择项目本地安装的prettier包（推荐本地安装，避免版本不一致问题）
• 在Configuration file区域，选择Project或直接指定项目根目录下的.prettierrc文件（支持.json/.yml/.js等格式），确保WebStorm优先使用自定义配置而非默认规则
• 可选：勾选Run on save，实现文件保存时自动格式化

3. 设置格式化快捷键 #

• 进入设置的Keymap面板：
  • 搜索Reformat Code，确认其快捷键为Ctrl + Alt + L，并确保该操作关联Prettier作为格式化工具
  • 若要将Ctrl + Alt + P设置为Prettier专属格式化快捷键，搜索Reformat with Prettier，为该命令绑定Ctrl + Alt + P
• 补充：若想让Ctrl + Alt + L完全遵循Prettier规则，可进入Settings > Tools > Actions on Save，勾选Reformat code并调整优先级，让Prettier覆盖WebStorm默认格式化逻辑

4. 处理配置同步与变更 #

• 将.prettierrc加入版本控制（如Git），确保团队成员或多设备同步代码时配置一同更新
• 配置文件变更后，WebStorm会自动检测到修改，无需重启IDE，下次格式化直接生效
• 若配置未生效，可尝试File > Invalidate Caches... > Invalidate and Restart刷新IDE缓存

内容的提问来源于stack exchange，提问作者Garo Gabrielyan