VSCode的Prettier插件是干什么用的_VSCode前端代码规范【解析】-VSCode-PHP中文网

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

vscode的prettier插件是干什么用的_vscode前端代码规范【解析】

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 真正接管保存行为

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

前端设计优化skill

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

下载

在项目根目录运行 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"]，两者同时启用就会反复删/加分号。

必须安装 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 子项目要各自放一份