vscode默认能格式化html，但需同时满足语言模式为html、配置[html]专属editor.defaultformatter、且格式化器已安装启用；vue中需单独配[vue]规则，prettier还需项目含.prettierrc及本地依赖。
VSCode 默认就能对齐 HTML 标签代码，但必须满足几个硬性条件——缺一不可，否则 Shift+Alt+F 按了也白按。
为什么 Shift+Alt+F 对 HTML 没反应？
最常见原因是语言模式没识别成 HTML，或者格式化器没绑定到 html 语言 ID。
- 右下角状态栏必须显示
HTML，不是Plain Text或JavaScript；点它 → “Change Language Mode” → 选HTML - 检查
settings.json中是否误删了"[html]": { "editor.defaultFormatter": "vscode.html-language-features" } - 如果装了 Prettier 插件，它默认不接管 HTML；需显式配置：
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，且项目里得有prettier包（npm install --save-dev prettier）
html.format.* 配置项到底怎么选？
VSCode 内置 HTML 格式化器靠这几个关键配置控制缩进行为，Prettier 则基本无视它们——所以先确认你用的是哪个格式化器。
-
html.format.indentInnerHtml：设为true会让和相对于多缩进一层；设false则所有子标签和同级缩进 -
html.format.wrapLineLength：设太小（如 40）会导致简单标签也被强行换行，建议保持默认或设为 120 -
html.format.preserveNewLines：设为true会保留你手动敲的空行；设false（默认）则格式化时全清掉——团队协作中通常建议关掉
Vue 文件里的 <template></template> 死活不对齐？
这是高频坑点：<template></template> 块本质是 HTML 片段，但 VSCode 默认不把它当 HTML 处理。
- 必须在
settings.json中加语言专属配置："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 确保项目根目录有
.prettierrc，且含"bracketSameLine": false和"trailingComma": "es5"——否则属性不会竖排对齐 - 如果
<style></style>用了scss，还得单独配："[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
自动补全 + 自动闭合 + 同步重命名，三个功能要分开配
它们由不同机制驱动，不能指望一个插件全搞定。
- 标签自动补全靠 Emmet：确认
emmet.triggerExpansionOnTab为true，且输入div.container后按Tab - 开始/结束标签同步修改靠
Auto Rename Tag插件——装完就得重启 VSCode，否则不生效 - 空元素自动闭合（如
<img>→<img>）是内置行为，取决于html.format.endWithNewline和html.format.insertSpaces，不用额外插件
真正卡住人的往往不是配置多复杂，而是改完设置没重载窗口、语言模式没切对、或者 Prettier 没装本地依赖——这三个点漏掉任何一个，formatOnSave 就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
