prettier 正确安装并激活需三步:确认扩展面板中 esbenp.pretterr-vscode 已启用、右下角语言模式匹配(如 .js 显示 javascript)、终端能执行 npx prettier --version;缺一不可。

VSCode 本身不带语义级代码美化能力,装对插件、配对语言模式、设对默认格式化器,三者缺一不可——否则 Ctrl+S 后代码纹丝不动,不是 VSCode 坏了,是链路断在某一处。
怎么确认 Prettier 插件已正确安装并激活
Prettier 是目前最通用的跨语言格式化工具,但“安装完成”不等于“可用”。VSCode 只有在识别到项目中存在 prettier.config.js、.prettierrc 或 .prettierrc.json 时,才会自动启用它;若项目无配置,即使插件已装,也可能退回到 VSCode 默认缩进逻辑。
- 打开扩展面板(
Ctrl+Shift+X),搜索Prettier - Code formatter,确保状态为“已启用”,且发布者是esbenp - 右下角语言模式必须匹配:打开一个
.js文件,状态栏应显示JavaScript,而非Plain Text;若显示错误,点击后手动切换 - 终端执行
npx prettier --version,能输出版本号说明 CLI 可用,插件底层调用才可靠
为什么保存时没自动格式化
editor.formatOnSave 开关只是表象,真正起效要同时满足四个条件:开关开启、语言有格式化器、该语言指定了默认格式化器、没有被 workspace 设置覆盖。
- 全局设置中勾选
Editor: Format On Save,但更推荐在项目.vscode/settings.json中显式声明:{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } - 对特定语言单独控制(比如只让 JS/TS 自动格式化):
"[javascript]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": true } - 检查是否有冲突插件:如同时装了 ESLint 和 Prettier,VSCode 可能弹出“选择默认格式化工具”提示,必须手动点选 Prettier,否则它不会接管
Vue 文件里 <style></style> 块不格式化怎么办
Vue 单文件组件是多语言混合体,Prettier 默认只处理 <script></script>,<style></style> 需要 Vetur(Vue 2)或 Volar(Vue 3)额外桥接。Volar 用户尤其容易漏掉这步——它默认不把 CSS/SCSS 块交给 Prettier。
- Vue 2 项目:确认装的是
octref.vetur,并在settings.json中写"vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.scss": "prettier"
- Vue 3 项目:卸载 Vetur,只装
vue.volar,并确保Prettier - Code formatter插件也已安装;再加"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 无论 Vue 版本,都必须保证
files.associations已设:"files.associations": { "*.vue": "vue" },否则整个文件不被识别为 Vue 类型,后续全失效
格式化后单引号变双引号?这是 Prettier 的默认行为
Prettier 不读取 ESLint 规则,也不响应 eslint-config-prettier,它只认自己的配置。想强制单引号,必须在项目根目录加 .prettierrc:
{ "singleQuote": true, "semi": false, "tabWidth": 2 }
注意:这个文件必须放在**工作区根目录**(即你用 VSCode “打开文件夹” 打开的那个文件夹),而不是 .vscode 子目录里;路径错、文件名大小写错(比如写成 prettierrc 少个点)、JSON 语法错,都会导致配置静默失败。











