Visual Studio 内置HTML格式化器因使用老旧解析器，无法识别Vue/React语法，导致缩进错乱；应禁用内置格式化，改用Prettier+Volar组合方案。
Visual Studio 默认的 HTML5 缩进规则对现代模板语法（比如 v-if、{{ }}、JSX 风格属性）支持很弱，直接按 Tab 或使用格式化快捷键（Ctrl+K, Ctrl+D）常导致缩进错乱、标签换行反直觉、属性挤成一行等问题。
为什么 VS 自带 HTML 格式化会把 <template></template> 里的内容缩得面目全非？
VS 的 HTML 编辑器底层用的是较老的 Web Forms 时代解析器，它不识别 Vue/React 的自定义指令或插值语法，把 <div v-if="loading"> 当作非法属性处理，进而放弃嵌套推断，退化为纯标签层级硬缩进——结果就是子元素缩进过深、条件块和循环块缩进丢失、<code><script setup></script> 里模板字符串完全不格式化。
-
<template></template>不被识别为根容器，内部缩进按“每个开头就加一级”粗暴计算 -
v-for、v-else-if等指令被忽略，无法建立逻辑块边界 - 单文件组件（
.vue）中<style></style>和<script></script>块的格式化规则彼此隔离，无法联动
改用 Prettier + ESLint 插件替代 VS 内置格式化
VS 内置 HTML 格式化不可配置核心行为，强行调 Tools > Options > Text Editor > HTML > Formatting 只能微调换行和空格，解决不了语义缩进问题。真正可行的是绕过它，用 Prettier 统一接管：
- 安装
Prettier扩展（ID: esbenp.prettier-vscode），并确保Format On Save开启 - 在项目根目录加
.prettierrc，明确指定 HTML 相关选项：{ "htmlWhitespaceSensitivity": "css", "endOfLine": "lf", "tabWidth": 2, "useTabs": false, "printWidth": 100 } - 对
.vue文件，需额外安装Vetur或Volar（推荐 Volar），否则 Prettier 不会处理<template></template>块 - 禁用 VS 内置 HTML 格式化：取消勾选
Tools > Options > Text Editor > HTML > Formatting > Format on paste / Format on save
Ctrl+K, Ctrl+F 快捷键失效或缩进没反应？检查这三处
这个快捷键触发的是当前语言模式的默认格式化器，不是全局 HTML 设置。常见卡点：
立即学习“前端免费学习笔记（深入）”；
- 文件未正确识别语言模式：右下角状态栏显示的是
Plain Text或HTML而非Vue或JavaScript React—— 点击切换，或通过Ctrl+K, Ctrl+M手动设为vue - Prettier 未设为默认格式化工具：右键编辑器 →
Format Document With...→ 选Prettier→ 点击齿轮图标设为默认 - 工作区设置了覆盖配置：检查
.vscode/settings.json是否有"html.format.*"字段，有则删掉——这些字段会干扰 Prettier
真正麻烦的不是缩进数字本身，而是 VS 不区分「结构缩进」和「逻辑缩进」。比如 v-if 和它的 v-else 应该同级，但 VS 会把后者多缩进一层；又比如 <slot></slot> 内容该继承父作用域缩进，VS 却重置为 0。这类语义关系只能靠语言服务（Volar）+ 格式化器（Prettier）协同理解，纯编辑器层面无解。
