如何在VSCode安装后配置 Prettier 插件实现代码美化-VSCode-PHP中文网

vs code 中 prettier 无响应的根本原因是未完成四步配置：安装官方插件 esbenp.prettier-vscode、本地安装 prettier 包并指定路径、配置 .prettierrc.json5（含 overrides）、在 .vscode/settings.json 中为各语言显式绑定格式化器并禁用冲突项。

如何在vscode安装后配置 prettier 插件实现代码美化

装了插件但保存没反应、按 Shift+Alt+F 没效果、格式化后分号忽有忽无——不是插件坏了，是 VS Code 还没被明确告知“谁来干、对谁干、怎么干”。Prettier 插件本身不带规则、不自动接管、也不自带可执行文件，它只负责调度，真干活的是你项目里的 prettier 包和配置文件。

必须安装官方插件 esbenp.prettier-vscode

扩展市场搜 “prettier” 会出来一堆同名插件，但只有 esbenp.prettier-vscode 是官方维护版本（280 万+ 下载量）。其他插件可能：

不支持 prettier.requireConfig 配置项
读不了 .prettierrc.json5 里的注释
在 .vue 或 .tsx 文件里报 Cannot parse unknown language

安装方式：Ctrl+Shift+X → 搜 esbenp.prettier-vscode → Install。装完建议关掉再重开 VS Code，确认右下角状态栏出现 Prettier 字样。

必须本地安装 prettier 包并指定路径

只装插件不装包，prettier.requireConfig: true 会直接报错 No config file found；更关键的是，CI/CD 和队友运行 npx prettier --write . 时，依赖的是项目 node_modules/prettier，不是插件自带的版本。

VSCode 1.118

微软正式发布 Visual Studio Code 1.118 版本。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控。

下载

运行 npm install --save-dev prettier --save-exact（--save-exact 锁定版本，如 "prettier": "3.2.4"）
验证：在项目根目录执行 npx prettier --version，输出必须和 package.json 里一致
若用 pnpm 或 yarn v4+，VS Code 可能读不到本地包，需在 .vscode/settings.json 中加 "prettier.prettierPath": "./node_modules/prettier/index.cjs"

必须配 .prettierrc.json5 并启用 overrides

没有 .prettierrc（或等价配置），Prettier 就用内置默认值（semi: true, tabWidth: 2），和团队规范大概率冲突。纯 JSON 容易因多逗号、少引号失效，且不支持注释——协作时别人看不懂为什么设 printWidth: 100。

在项目根目录新建 .prettierrc.json5，内容示例：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "overrides": [
    {
      "files": ["*.vue"],
      "options": {"parser": "vue"}
    }
  ]
}

VS Code 不会向上查找父目录的配置，子项目要独立规则，就得在该子目录下也放一份 .prettierrc.json5
overrides 必须显式声明 parser，否则 .vue 或 .tsx 文件会解析失败

必须在 .vscode/settings.json 中绑定语言并禁用冲突项

VS Code 默认不把 Prettier 当作任何语言的格式化主力，它只是“待命”，等你点名。只开 editor.formatOnSave 不够，必须为每种目标语言显式绑定格式化器。

在项目根目录的 .vscode/settings.json 中写死语言块，例如：

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

禁用 VS Code 自带的 JavaScript/CSS 格式化器（typescript-language-features 等），否则会和 Prettier 打架：缩进反复变、引号来回切
如果项目用了 ESLint，必须安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 数组末尾加上 "prettier"，否则 semi、max-len 等规则会反复冲突
别在用户设置里全局开 editor.formatOnSave，否则打开别人的项目可能触发意外格式化