Prettier在VSCode中仅负责按规则统一代码格式，不检查逻辑；需同时满足安装本地prettier包、正确配置editor.formatOnSave和editor.defaultFormatter、为各语言显式绑定格式器三条件才生效。

Prettier 插件在 VSCode 里**不负责检查代码逻辑，只做一件事：按固定规则重写代码格式**。它不是 ESLint，不报错、不管 `console.log` 或变量未定义；它是“自动排版机”，把 JS/TS/JSON/Vue/MD 等文件的缩进、引号、换行、括号位置等，强制统一成你配置的样子。

为什么装了插件但保存没反应

根本不是插件坏了，而是 VSCode 没把它当“干活的人”——它默认不接管任何语言的格式化动作。

• editor.formatOnSave 开启只是“触发开关”，真正干活还得指定谁来干
• 没设 editor.defaultFormatter 或语言专属配置（如 "[javascript]"），VSCode 就继续用内置的 vscode.typescript-language-features
• 项目里没装本地 prettier 包（node_modules/prettier 不存在），插件会静默 fallback 到极简默认值，甚至报 Failed to load module 'prettier'
• 右下角语言模式显示 Plain Text 而非 JavaScript，说明 VSCode 根本没识别文件类型，自然不会调用对应格式化器

怎么让 Prettier 真正接管保存行为

必须同时满足三个条件，缺一不可：

• 在项目根目录运行 npm install --save-dev prettier --save-exact（锁定版本，避免 CI 和本地结果不一致）
• 在 .vscode/settings.json 中写死这三行（别放用户级 settings.json）：
  "editor.formatOnSave": true
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSaveMode": "modifications"
• 为关键语言显式绑定，比如：
  "[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}

和 ESLint 共存时为什么代码越格式化越乱

ESLint 默认既检查又“修格式”，和 Prettier 的职责完全重叠。比如 semi: false 在 Prettier 里是规则，在 ESLint 里可能是 semi: ["error", "never"]，两者同时启用就会反复删/加分号。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 必须安装 eslint-config-prettier：npm install --save-dev eslint-config-prettier
• 在 .eslintrc.js 的 extends 数组**末尾**加上 "prettier"（顺序错了就白装）
• 确认没开 eslint.format.enable 或 source.fixAll.eslint 的自动修复，否则 ESLint 会抢在 Prettier 前改代码
• 如果用 Volar/Vetur，还要关掉它们的格式化功能，例如："volar.format.enable": false

.prettierrc 文件为什么不能省

VSCode 设置里那些 prettier.semi、prettier.tabWidth 开关只是零散覆盖，无法表达完整规则，也不被 CI 流水线识别。

立即学习“前端免费学习笔记（深入）”；

• 必须在项目根目录放 .prettierrc.json5（推荐 JSON5，支持注释和末尾逗号）
• 内容示例：
  {"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100, "trailingComma": "es5"}
• Vue 项目必须加 overrides 显式声明 parser: "vue"，否则 .vue 文件会报 Cannot parse unknown language
• VSCode 不向上查找父目录配置，子包/monorepo 子项目要各自放一份

实际生效链路很窄：本地 prettier 包存在 → .prettierrc.json5 可读 → settings.json 正确绑定语言 → 右下角状态栏显示对应语言模式。任一环节断掉，就退回 VSCode 自带缩进逻辑，看起来像“插件失效”。