VSCode如何配置Prettier_代码自动格式化保存设置-VSCode-PHP中文网

vscode 保存时未触发 prettier 格式化，主因是未显式绑定格式化器：需通过“configure default formatter”设为 esbenp.prettier-vscode，并在 .vscode/settings.json 中配置语言块启用 formatonsave，同时确保 .prettierrc 语法正确。

vscode如何配置prettier_代码自动格式化保存设置

VSCode 保存时没触发 Prettier 格式化，基本可以确定不是插件没装，而是它根本没被调用——VS Code 不会自动“认领”文件格式化权，必须显式绑定。

为什么按 Ctrl+S 没反应？先看状态栏语言标识

打开一个 .js 或 .ts 文件，盯住右下角状态栏。如果显示的是 ESLint、None，或者压根没标出格式器名称，说明 Prettier 没绑定到该语言。VS Code 默认不接管，你得手动指定。

快捷键 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Format Document With → 选 Configure Default Formatter → 再选 Prettier - Code formatter

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

{"[javascript]": {"editor.formatOnSave": true},"[typescript]": {"editor.formatOnSave": true}}

"editor.formatOnSave": true 放在顶层设置里，只对部分语言生效；必须配合语言块才能覆盖所有目标文件

editor.defaultFormatter 必须设对，且扩展 ID 不能错

esbenp.prettier-vscode 是官方扩展的唯一 ID，不是显示名。设成 prettier、Prettier 或漏掉 -vscode 都会失败——VS Code 找不到提供者，直接跳过格式化。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

检查是否已安装：在扩展市场搜 Prettier - Code formatter，发布者必须是 Esben Petersen

推荐在 .vscode/settings.json 中显式声明：

"editor.defaultFormatter": "esbenp.prettier-vscode"

若项目中未安装 prettier 包，运行 npm install --save-dev prettier；全局安装易导致版本行为差异
可加配置项 "prettier.prettierPath": "./node_modules/prettier" 显式指定路径，避免 CLI 查找失败

.prettierrc 文件语法错误会导致静默失效

VS Code 读取 .prettierrc 时，遇到 JSON 末尾多逗号、或 ESM 配置里用了 module.exports = 却在纯 ESM 项目中，Prettier 会直接跳过该配置，回退到默认规则——你改了配置却看不到效果，就是这个原因。

推荐用 .prettierrc.json，内容保持标准 JSON 格式，例如：
```
{"semi": true,"singleQuote": true,"tabWidth": 2,"printWidth": 80}
```
如需动态逻辑（比如按文件类型切换规则），用 prettier.config.js，并确保导出方式匹配项目模块系统：export default { }（ESM）或 module.exports = { }（CommonJS）
"prettier.requireConfig": true 开启后，没有配置文件就拒绝格式化，适合强约束场景

Vue 项目要额外处理 Vetur 和 ESLint 冲突

Vue 单文件组件中，<template></template>、<script></script>、<style></style> 分属不同语言块，Prettier 默认只管 JS/TS/JSON，其他部分依赖 Vetur 配置。

确保已安装 Vetur 插件，并在 .vscode/settings.json 中配置：

"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatter.html": "prettier"

禁用 VS Code 自带 JS 格式化："javascript.format.enable": false，否则和 Prettier 抢控权
若同时用 ESLint，关闭 prettier.eslintIntegration（已废弃），改用 editor.codeActionsOnSave 触发 ESLint 修复：
```
"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
```
"eslint.validate" 必须包含 "vue"，否则 .vue 文件里的 JS 不会被 ESLint 检查