Prettier 是事实上的默认代码格式化工具，因其确定性输出、开箱即支持多语言（含 Vue/TS）、配置明确（如 tabWidth、semi）且不依赖编辑器设置，远超 Beautify 的稳定性与团队协作可靠性。
Prettier 是目前最可靠、团队协作最省心的代码对齐方案，不是“之一”，而是事实上的默认选择。 它不依赖你手动调格式，也不靠猜语言规则，而是用确定性输出强制统一风格。Beautify 等插件虽能用，但配置模糊、行为不稳定，尤其在 TypeScript 或 Vue 单文件组件里容易跳过格式化或崩掉缩进。
为什么 Prettier 比 Beautify 更适合日常对齐
Beautify 默认按 HTML/CSS/JS 旧规范排版，比如会把 if 块里的括号换行位置搞错，或在 JSX 中错误合并属性；Prettier 则从 AST 层面重写代码，所有输出都可预测。它不接受“差不多对齐”，只认 printWidth、tabWidth、semi 这几个硬参数——改了就生效，没歧义。
- Beautify 的
indent_size和 VS Code 的editor.tabSize冲突时，常导致缩进错两格 - Prettier 忽略编辑器 tab 设置，只认自己配置里的
tabWidth，避免环境差异 - Beautify 对
.vue文件支持弱，需额外装vue-beautify插件，而 Prettier 开箱即支持
安装后必须做的三件事，否则自动对齐不生效
光装插件没用。VS Code 不会自动把 Prettier 设为默认格式化器，也不会默认开启保存即格式化。常见报错 There is no formatter for 'javascript' installed 就是因为漏了这步。
- 打开设置（
Ctrl + ,），搜format on save，勾选Editor: Format On Save - 再搜
default formatter，在Editor: Default Formatter下拉菜单里选esbenp.prettier-vscode - 右键当前文件 →
Format Document With...→ 确认选中Prettier，避免首次触发时弹窗卡住
.prettierrc 配置里这几个字段最关键
项目根目录加 .prettierrc 是团队对齐底线。不写这个文件，不同人本地设置不一致，git diff 里全是格式变动。
-
"tabWidth": 2：别用 4，尤其 React/Vue 项目，太宽挤占屏幕，也和 ESLint 推荐值冲突 -
"semi": false：TypeScript 项目建议关分号，Prettier 会自动删多余分号，开反而容易误加 -
"singleQuote": true：避免引号混用，JSON.stringify输出也更干净 -
"trailingComma": "es5"：数组/对象末尾逗号必须开，Git 提交更清晰，新增字段不碰老行
对齐失效时先查这三点
按了 Shift + Alt + F 没反应？格式化后等号还是歪的？别急着换插件，大概率是下面这些“隐形开关”被关了。
- 检查当前文件右下角语言模式是否正确——
.js文件被识别成Plain Text，Prettier 直接跳过 - 确认没有启用
Editor: Format On Paste，它有时会和保存格式化打架，造成缩进混乱 - 如果用了 ESLint，关掉
eslint.format.enable，否则两个工具抢着改同一行，结果谁都不对
真正难的不是让代码看起来整齐，而是让所有人、所有机器、所有时间点下的“整齐”定义完全一致。Prettier 把这件事变成一个 JSON 文件 + 一个勾选项，已经是最简解法。其他插件花哨的功能，比如按等号对齐变量声明，看着爽，但一进 CI 就失效——因为没人把它写进自动化流程里。
