shift + alt + f 无反应是因格式化器未就位或语言模式错误；需手动设为html模式、安装prettier等格式化器、vue2配js-beautify-html、vue3配prettier.config.js并设htmlwhitespacesensitivity，禁用eslint自动修复以避免冲突。
VS Code 的 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（macOS）能立刻对齐混乱的 HTML，但按下去没反应？不是快捷键失效，而是格式化器没就位或语言模式错了。
快捷键没反应：先查语言模式和格式化器
VS Code 不会自己决定“用谁来格式化”，它只发指令。右下角状态栏显示 Plain Text 或 HTML 但没装格式化扩展，Shift + Alt + F 就必然静音。
- 点右下角语言模式，手动选成
HTML（别信自动检测） - 确保已启用至少一个格式化器：
esbenp.prettier-vscode（推荐）或内置的vscode.html-language-features - 如果同时装了
Prettier、Vetur、Beautify，VS Code 可能 fallback 到“无可用格式化程序”——此时必须右键 → “格式化文档” → “配置默认格式化程序”手动指定
Vue 单文件组件里 格式错乱
Vue 2 项目用 Vetur 时，<template></template> 默认走 Prettier，但它对 v-if、@click 等指令支持弱，结果就是标签全挤一行、属性换行崩掉。
- Vue 2 + Vetur：在设置里搜
vetur.format.defaultFormatter.html，把值改成js-beautify-html，再执行Developer: Reload Window - Vue 3 + Volar：Volar 不读 Vetur 配置，直接依赖
prettier.config.js；务必加"htmlWhitespaceSensitivity": "ignore"，否则空格会被误删 - 别在 Vue 3 项目里调 Vetur 的 HTML 格式选项——它完全不生效
保存时自动格式化却越存越乱
开了 "editor.formatOnSave": true 还同时启用了 ESLint 自动修复（"source.fixAll.eslint": true），就等于让两个规则引擎打架：一个要 2 空格缩进，一个强制加分号，一个删尾随逗号，一个又加回来。
- 分工要明确：Prettier 负责缩进、换行、引号、空格；ESLint 负责逻辑、安全、可维护性检查
- 在
settings.json中禁用 ESLint 的自动修复，或改用"editor.codeActionsOnSave": { "source.fixAll": false } - 若坚持双开，确保 Prettier 是默认格式化器，且 ESLint 配置里设
"eslint.validate": ["html"]并排除格式类规则
批量处理旧项目 HTML 文件
单个文件按快捷键还行，几十个 .html 散在 src/ 和 public/ 里？靠手动点太慢，也容易漏。
- 项目根目录运行：
npx prettier --write "src/**/*.html" "public/**/*.html" - 确保已配好
.prettierrc，关键项至少包含："tabWidth": 2、"htmlWhitespaceSensitivity": "css" - 想提交前自动跑？加 Git hook：
npx husky add .husky/pre-commit "npx prettier --write \"**/*.html\""
真正卡住人的从来不是“怎么格式化”，而是“为什么这次没生效”。语言模式、默认格式化器、Vue 版本与插件的匹配关系、Prettier 和 ESLint 的职责边界——这些细节不厘清，再快的快捷键也是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
