PhpStorm配置Prettier格式化工具_保存时自动美化代码-phpstorm-PHP中文网

prettier在phpstorm中保存无反应，主因是未设为默认格式化器（仅启用插件无效），须在code style中手动指定javascript/typescript等语言的formatter为prettier，并确保本地安装prettier、配置文件命名正确（如.prettierrc.json）、.vue等混合文件需手动注入语言。

phpstorm配置prettier格式化工具_保存时自动美化代码

Prettier 在 PhpStorm 中保存时没反应，基本是因为它根本没被设为默认格式化器，或者 WebStorm 风格的配置逻辑被直接套用到了 PhpStorm 上——这两者不兼容。

PhpStorm 里 Prettier 不是插件开关开了就生效

很多人在 Settings > Languages & Frameworks > JavaScript > Code Quality Tools > Prettier 里勾上 Enable，就以为万事大吉。其实这只是让 PhpStorm “知道” Prettier 存在，Ctrl+Alt+L 仍然走内置 JavaScript 格式化器，不会调用 Prettier。

必须手动指定：Settings > Editor > Code Style > JavaScript（或 TypeScript）> Formatter → 下拉选 Prettier
Vue/JSX/TSX 文件同理，每个语言 tab 都要单独设置，不能只设 JavaScript 就指望 .vue 里的 <script></script> 块自动生效
如果项目根目录有 .prettierrc.json，PhpStorm 会读；但 prettier.config.js 必须用 module.exports = {}，ESM 语法（export default）会被忽略

保存时自动格式化要开对地方

PhpStorm 的 “On Save” 功能藏在两个不同路径下，开错位置等于白配：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

Settings > Tools > Actions on Save → 勾选 Reformat code（不是 Run external tool，也不是 Optimize imports）
这个开关是按文件类型独立控制的：点右侧齿轮图标，可分别关掉 HTML、CSS 等类型，只留 JavaScript/TypeScript
若想对 .vue 中的 <script lang="ts"></script> 生效，还要右键 script 标签 → Inject language or reference → 选 TypeScript，否则它被当作文本处理

本地 prettier 没装或路径不对，保存时静默失败

PhpStorm 不会报错，也不会弹提示，只是跳过格式化——你 Ctrl+S 后代码纹丝不动，大概率是这一步卡住了。

必须在项目本地安装：npm install --save-dev prettier 或 yarn add -D prettier，全局安装无效
PhpStorm 默认找 node_modules/.bin/prettier，找不到就 fallback 到全局，但不稳定；建议在 Settings > Languages & Frameworks > JavaScript > Code Quality Tools > Prettier 里手动填 prettier package 路径，比如 $ProjectFileDir$/node_modules/prettier
用了 pnpm？确认 pnpm store 没被设成只读，否则 PhpStorm 读不到二进制入口

.prettierrc 配置不生效的典型原因

改完配置保存没变化，别急着重装插件，先查这三处：

文件名必须是 .prettierrc.json（最稳）、.prettierrc（无后缀）或 prettier.config.js（仅 CommonJS）；.prettierrc.yaml 在某些 PhpStorm 版本里不识别
.prettierignore 必须放在项目根目录，且每行一个路径，不支持 ** 嵌套写法（src/**/test.js 无效，得写成 src/*/test.js）
检查右下角状态栏：当前文件是否被识别为 JavaScript？如果是 Plain Text 或 Text，格式化规则压根不加载