VSCode怎样配置Prettier进行代码自动格式化【教程】

vscode中Prettier自动格式化需明确配置语言绑定、保存触发及规则优先级。须检查状态栏显示、设置默认格式化器、配置language-specific formatOnSave，并协调ESLint仅校验不格式化。

VSCode 用 Prettier 自动格式化代码，关键不在装插件，而在配置生效逻辑——prettier 不会自动接管所有文件，必须明确告诉它“对哪些语言、在什么时机、用哪套规则格式化”，否则保存后毫无反应。

如何确认 Prettier 插件已正确启用并识别项目

很多人装完插件就以为万事大吉，但 VSCode 默认不为所有语言启用 Prettier。先检查右下角状态栏：打开一个 .js 或 .vue 文件，看是否显示 Prettier（而非 ESLint 或 None）。若没显示，说明当前文件类型未绑定格式化工具。

• 手动设置：按 Ctrl+Shift+P（Win/linux）或 Cmd+Shift+P（Mac），输入 Format Document With...，选 Configure default Formatter，再选 Prettier - Code formatter
• 更稳妥的做法是，在工作区根目录加 .vscode/settings.json，写入：

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

• 注意：如果项目里有 eslint-config-prettier，但没禁用 ESLint 的自动修复（eslint.enable 为 true 且启用了 eslint.autoFixOnSave），两者可能冲突，导致保存时格式化被覆盖或报错

为什么保存不格式化？常见配置陷阱

最常踩的坑是混淆了“全局设置”和“项目级设置”，以及忽略了语言特定配置的优先级。

• "editor.formatOnSave" 必须为 true，且**只对当前语言块生效**；单独写在顶层不会作用于所有语言
• 如果项目根目录存在 .prettierrc 或 prettier.config.js，VSCode 会自动读取——但前提是该配置文件语法合法；一个多余的逗号或 export default 写成 module.exports = 在 ESM 项目中可能静默失效
• 使用 TypeScript 时，prettier 默认不处理 .ts 文件的类型注解缩进；需确保配置里有 "semi": false、"singleQuote": true 等显式声明，否则可能沿用 VSCode 默认行为
• Vue 单文件组件中， 语法需要 Prettier ≥ 2.8.0；旧版本会跳过 script 区域，看起来像“没格式化”

如何让 Prettier 和 ESLint 共存不打架

不是“禁用 ESLint”，而是让 ESLint 只负责规则检查，格式化全交给 Prettier——这是现代前端项目的标准配合方式。

• 安装两个包：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
• 在 .eslintrc.cjs 中，把 prettier 放在 extends 数组**最后**：

  extends: [   "eslint:recommended",   "plugin:prettier/recommended" // 这行必须在最后 ]

• VSCode 设置中关闭 ESLint 的自动格式化："eslint.format.enable": false，避免它在保存时抢在 Prettier 前执行
• 如果仍遇到光标跳动、引号被反复切换等问题，检查是否误启用了 editor.formatOnType ——这个功能对 JS/TS 意义不大，反而容易触发意外格式化

真正麻烦的从来不是装插件，而是搞清 VSCode 格式化链路里谁说了算：语言模式 → 默认格式化器 → 保存触发时机 → 配置文件加载顺序 → 与其他 linter 的协作边界。少一个环节没对齐，就会表现为“点了保存却没变化”。