Prettier 是最可靠省心的格式化工具，应默认启用；Beautify 因维护停滞、规则不可预测、生态缺失等缺陷不推荐。Vue/React 项目需搭配 Volar 或 ESLint，配置优先级以 .editorconfig 为最高，推荐通过 .vscode/extensions.json 统一管理插件。
Prettier 是当前最可靠、最省心的格式化选择，不是“有灵感才用”，而是“装上就别换”。
为什么 Prettier 比 Beautify 更值得默认启用
Beautify 虽然轻量，但维护停滞、规则不可预测，比如它对 SCSS 嵌套块的缩进处理常和团队期望不一致；Prettier 则强制统一输出，所有语言共用同一套逻辑。实际项目中，Beautify 容易在保存时把 margin: 0 auto; 格式化成 margin: 0 auto ;（末尾多空格），而 Prettier 会严格按 bracketSpacing 和 semi 规则执行。
- 新版 VSCode 中，
Beautify已无法正确识别.vue单文件组件内的<style scoped>区域 -
Prettier支持通过.prettierrc文件细粒度控制，例如"singleQuote": true或"printWidth": 100，Beautify 只能靠.jsbeautifyrc，且部分 CSS 选项（如endWithNewline）在 VSCode 里常被忽略 - 如果你用 ESLint，
Prettier可与eslint-config-prettier配合禁用冲突规则；Beautify无此生态支持
Vue/React 项目必须配的两个格式化搭档
单独装 Prettier 不够——它不处理语法校验或组件级语义。Vue3 项目要开 Volar，React 项目得配 ESLint + typescript-eslint 插件。Volar 的 vetur.format.defaultFormatter.css 已废弃，新项目必须改用 "css": "prettier" 并确保 editor.defaultFormatter 是 esbenp.prettier-vscode。
- Vue3 中，
Volar提供<template>内 HTML 格式化，Prettier处理<script>和<style>，二者分工明确 - React 项目若用
create-react-app，需额外配置"eslint.format.enable": true，否则保存时 ESLint 不触发自动修复 - 不要同时启用
editor.formatOnSave和eslint.autoFixOnSave（已弃用），后者在 2026 年 VSCode 版本中会导致重复格式化甚至死循环
Tab 大小和空格被覆盖？先查 .editorconfig
你在设置里把 tabSize 改成 2，打开新文件却仍是 4，大概率是项目根目录存在 .editorconfig。这个文件的优先级高于用户设置，哪怕你关掉 editor.detectIndentation 也无效。
-
.editorconfig中必须同时声明indent_style = space和indent_size = 2，缺一不可；只写indent_size时，VSCode 可能仍插入 Tab 字符 - 工作区级
.vscode/settings.json可以覆盖.editorconfig，但仅限于editor.*开头的设置项，像files.associations这类不会被覆盖 - 检查路径：打开命令面板（
Ctrl+Shift+P），输入Developer: Toggle Developer Tools，在 Console 里运行JSON.stringify(monaco.editor.getModels()[0].getOptions())，看insertSpaces和tabSize实际值
格式化插件推荐清单该放哪？别只靠记忆
团队协作时，靠口头说“记得装 Prettier 和 Volar”不如让 VSCode 自动提醒。把插件 ID 写进项目根目录的 .vscode/extensions.json，新成员打开项目就会看到 “This workspace has recommended extensions” 提示。
- 必需字段只有
recommendations数组，内容是字符串 ID，例如："esbenp.prettier-vscode"、johnsoncodehk.volar - 不支持版本号限定，所以推荐搭配
.vscode/settings.json一起提交，例如固定"editor.defaultFormatter": "esbenp.prettier-vscode" - 如果项目含 Python，
ms-python.black-formatter和esbenp.prettier-vscode不能同时设为全局默认，要用语言专属配置："[python]": {"editor.defaultFormatter": "ms-python.black-formatter"}
真正卡住人的从来不是“该装哪个插件”，而是插件之间谁听谁的、配置文件谁覆盖谁、错误提示到底来自哪一层。把 .editorconfig、.prettierrc、.vscode/settings.json 三者关系理清，比多装五个美化插件更管用。
