vue单文件组件template不响应tab缩进，本质是vscode未将template区块识别为vue-html语言模式；需手动切换右下角语言模式为vue-html，或在settings.json中配置"*.vue": "vue-html"，并关闭editor.detectindentation、设置editor.insertspaces为false。
Vue单文件组件里template不响应Tab缩进
VSCode默认对.vue文件的template区块不启用HTML缩进规则，本质是语言模式识别和格式化配置没对齐。不是插件冲突，也不是键盘坏了，而是VSCode没把<template></template>里的内容当成HTML来处理。
确认当前语言模式是否为vue-html
这是最常被忽略的一步：VSCode对.vue文件默认使用vue语言模式，但template区块需要vue-html才能触发HTML相关缩进逻辑。手动切换后Tab才可能生效。
- 打开一个
.vue文件，在右下角状态栏点击当前语言模式（比如显示vue） - 在弹出菜单中搜索并选择
vue-html（不是html，也不是vue） - 此时再在
<template></template>内按Tab，应能正常缩进 - 如果每次都要手动切，说明未设置默认关联——见下一条
配置"files.associations"让.vue自动用vue-html
只靠手动切换治标不治本。真正稳定的解法是告诉VSCode：“所有.vue文件的template部分，一律按vue-html处理”。这依赖VSCode的文件关联机制，而非格式化插件。
- 打开VSCode设置（
Ctrl+,），搜索files.associations - 点击“在settings.json中编辑”，添加这一行：
"*.vue": "vue-html"
- 注意：不要写成
"vue": "vue-html"或"*.vue": "html"，前者无效，后者会破坏script和style语法高亮 - 重启VSCode或重载窗口（
Ctrl+Shift+P→Developer: Reload Window）
检查editor.tabSize和editor.detectIndentation
即使语言模式正确，缩进仍可能异常——常见于项目已有空格缩进的文件，VSCode自动检测后锁定为spaces，导致Tab键插入空格而非制表符，视觉上像“没反应”。
- 确保
editor.tabSize设为你想要的数值（如2或4） - 关闭
editor.detectIndentation（设为false），避免VSCode根据文件首行缩进方式覆盖你的Tab行为 - 如果项目强制要求空格缩进，那就别硬用Tab；但若想用Tab键插入制表符，请同时开启
editor.insertSpaces为false
真正卡住人的地方往往不是插件装没装，而是vue-html这个语言模式没被激活，或者detectIndentation悄悄接管了Tab行为。改完配置后，别忘了重载窗口——缓存不清理，改了也白改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
