VSCode如何格式化HTML？前端开发必备快捷键【实操】

按 Shift + Alt + F 无反应是因为 VS Code 需手动指定 HTML 格式化器，而非快捷键故障；须确认语言模式为 HTML、安装并配置 prettier 或内置 html-language-features，远程开发需在远程环境安装扩展，项目级 .vscode/settings.json 控制缩进，Vue 文件需依 Vetur/Volar 匹配对应格式化器，避免与 ESLint 冲突。

按 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（macOS）就能格式化 HTML，但前提是 VS Code 知道该用谁来干这活——它不会自动猜，也不会 fallback 到“差不多就行”。

为什么按了 Shift + Alt + F 没反应？

不是快捷键坏了，是 VS Code 在等你指派一个格式化器。这背后，有几个常见原因。

• 右下角状态栏显示的是 Plain Text 或 HTML 但没装扩展？点它手动切到 HTML，再确认是否已安装 esbenp.prettier-vscode 或启用内置的 vscode.html-language-features。
• 同时装了 Prettier、js-beautify-html 和 Vetur？VS Code 可能卡在“选谁”上，弹出提示却没默认动作——必须手动指定 editor.defaultFormatter。
• 远程开发（WSL/SSH）时只在本地装了扩展？格式化器得装在远程环境里，本地装了等于没装。

怎么让 .html 文件真正按你想要的方式缩进？

缩进不是靠“多按几次快捷键”，而是靠明确控制语言专属配置。

• 在项目根目录建 .vscode/settings.json，写入：

  {"[html]": {"editor.tabSize": 2, "editor.insertSpaces": true, "editor.detectIndentation": false}}

• 禁用 editor.detectIndentation 很关键：否则 VS Code 会读取文件历史缩进（比如某行是 4 空格、某行是 tab），导致格式化后混杂不一。
• 别依赖全局设置统一缩进——不同项目可能要求不同（如老项目用 4 空格，新项目强制 2 空格），项目级配置才可靠。

.vue 文件里的