VSCode HTML大纲视图为空是因内置HTML模式不提供DocumentSymbol支持；需安装Tree-sitter扩展并配置tree-sitter-html解析器，或改用折叠、格式化、标签高亮等替代方案。
VSCode 默认不把 HTML 当作“可解析符号语言”来处理，所以直接打开 .html 文件，大纲视图大概率是空的或只显示“No symbols found in document”。这不是 bug，而是设计使然——HTML 不像 TypeScript 或 Python 那样有明确的“函数/类声明”，语言服务器默认不提取其结构。
为什么 HTML 文件的大纲视图通常是空的
VSCode 的大纲依赖语言服务器提供 DocumentSymbol 数据，而内置的 HTML 语言支持（html 模式）默认不启用符号提取。即使你看到 <div>、<section> 这些标签，它们不是“符号”，只是文本节点，不会自动变成大纲条目。
-
html语言模式本身不注册DocumentSymbolProvider，所以没有结构树可渲染 - 即使装了
Auto Rename Tag或Path Intellisense，它们也不提供大纲数据 - 右下角语言标识显示为
HTML≠ 语言服务器已就绪；它只是语法高亮层，不等于符号解析层
让 HTML 显示结构树：必须装扩展 + 切换语言模式
要让大纲视图真正显示 HTML 的层级结构（比如按 <body> → <main> → <article> 展开），目前最稳定的方式是借助 HTML Boilerplate 类扩展或切换到支持符号提取的衍生语言模式：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安装
Auto Close Tag或Auto Rename Tag不起作用；它们不提供大纲能力 - 安装
Ember Snippets或Vue VS Code Extension Pack也无效，除非你在写.vue文件 - 真正有效的是：安装
HTML Class Suggestions并配合手动切换语言模式为HTML (EJS)或HTML (Django)——部分模板语言扩展会启用轻量级符号提取 - 更推荐做法：用
emeraldwalk.vscode-tree-sitter（Tree-sitter 支持）+ 启用tree-sitter-html解析器，它能生成真实 DOM 树结构并映射到大纲（需手动配置"treeSitter.parserOverrides"）
替代方案：不用大纲，但效果更准的 HTML 结构查看方式
如果你只是想快速看清嵌套层级、折叠/跳转到某一层级块，其实有比“强行喂给大纲”更可靠的方法：
立即学习“前端免费学习笔记（深入）”；
- 用快捷键
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Developer: Toggle Developer Tools，在 Console 查看是否有Failed to resolve document symbols报错 —— 有就说明语言服务器压根没响应，别白折腾大纲 - 安装
Bracket Pair Colorizer 2，配合editor.guides.bracketPairs开启，视觉上就能清晰识别<div>块边界 - 用命令
Editor: Fold Level X（X = 1~5）手动折叠 HTML 层级，比如Fold Level 2会把所有<section>和<article>折起来，保留<html>/<body>顶层 - 右键编辑器 →
Format Document With...→ 选Prettier，格式化后结构一目了然，再配合Ctrl+Click跳转到对应标签定义（需 Prettier 配合prettier-plugin-organize-imports等插件）
一个容易被忽略的关键点
哪怕你通过 Tree-sitter 或第三方扩展让 HTML 出现在大纲里，它的“跳转目标”往往不是你想要的——点击 <header> 条目，可能跳到第一个 <header> 开始标签，也可能跳到闭合标签，甚至跳到 JS 中某个叫 header 的变量。因为 HTML 没有唯一符号定义位置，大纲无法像 TypeScript 那样精准锚定。这时候，别迷信大纲，老实用 Ctrl+F 搜 <header + 回车，反而更快更确定。
