Vue/TSX模板格式化失效本质是语言ID不匹配或格式化器未绑定：需将右下角语言模式设为Vue或TypeScript React，配置settings.json中对应语言块如"[vue-html]"、"[typescriptreact]"的editor.defaultFormatter，并启用Volar Take Over Mode。
VSCode 本身不支持“模板格式化”这个功能，所谓“模板格式化失效”，实际是语言服务或格式化器对 .vue、.html、.tsx 等含模板语法的文件识别/处理失败 —— 不是模板坏了，是 VSCode 没把它们当模板看。
为什么 .vue / .tsx 文件里 template 部分不格式化？
Vue 或 React 的模板语法（比如 块、JSX）需要对应语言服务器主动解析并暴露格式化能力。Prettier 单独装了没用，它得被 Volar（Vue）或 TypeScript 插件（TSX）调用才行。
- Vue 文件若右下角显示为
HTML或Plain Text，Volar 就不会接管，块直接被跳过 - Volar 2.x+ 已弃用
vue语言 ID，改用vue-html和vue-ts；但 Prettier 默认只认[vue]，不配对就“看不见”模板 - TSX 文件若语言模式是
TypeScript React，但editor.defaultFormatter只配了[typescript]，JSX 部分照样不走 Prettier
怎么让 template / JSX 块真正被格式化？
核心是：**语言 ID 必须匹配，且格式化器必须绑定到该 ID 对应的块**。不是靠“重写模板”，而是靠精准配置。
- 先确认当前文件语言模式：点击右下角，手动切到
Vue（Volar 启用时会显示）、TypeScript React或HTML - 打开
settings.json，补全对应语言块，例如："[vue-html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[vue-ts]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },<br>"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 确保 Volar 已启用 Take Over Mode（设置里搜
volar.takeOverMode，设为true），否则它只提供类型检查，不参与格式化 - 如果用了
prettier-plugin-vue，需在prettier.config.js中显式引入：module.exports = {<br> plugins: ['prettier-plugin-vue'],<br> vueIndentScriptAndStyle: true<br>}
自定义模板片段（snippets）和格式化是两回事
有人混淆了「模板代码片段」（如输入 vue → 补全 ）和「模板内容格式化」。前者由 snippets 控制，后者由 language server + formatter 联动完成。
- 想改新建 .vue 文件的默认结构？编辑
~/.vscode/snippets/vue.json或项目级.vscode/snippets/vue.json - 想让
里的 div 自动缩进、属性换行？那得靠 Prettier +prettier-plugin-vue+ 正确语言 ID 绑定，不是改 snippet - 改了 snippet 不影响已有文件的格式化行为；反之，格式化配置也不会改变你新建文件时插入的初始代码
最容易被忽略的是语言 ID 的版本漂移：Volar、TypeScript 插件、Prettier 自身都在快速迭代，[vue] 这种旧写法在新版本里可能完全不生效。每次插件更新后，第一件事不是重装，而是打开命令面板运行 Format Document With…，看列表里出现的是什么语言 ID —— 那才是你真正要配的键名。
