webstorm 的 structure 面板是单文件结构索引器，用于跳转标签、函数和 css 类；需确保文件被正确解析且未被排除，用 alt+7/cmd+7 打开并点击图钉固定；它不显示 class/id 属性，仅呈现 dom 或代码层级结构。
WebStorm 的 Structure 面板不是装饰，它是你跳转 HTML 标签、定位 JS 函数、快速筛选 CSS 类的「结构索引器」——只要项目已正确解析（即没报 Unresolved variable 或路径红色波浪线），它就可靠；否则先检查文件是否被误标为 Excluded 或路径未纳入资源根。
怎么打开和固定 Structure 面板
最稳的方式是快捷键 Alt+7（Windows/Linux）或 Cmd+7（macOS），比从菜单点更少出错。面板默认浮动在右侧，但容易被其他工具窗口遮挡；点击面板右上角的图钉图标（Pin Tab）可固定显示，避免切换文件时自动关闭。如果按了 Alt+7 没反应，大概率是当前文件类型不被支持（比如纯文本 .txt 或未识别的模板文件），换一个 .html 或 .js 文件再试。
Structure 里看不到 class/id 或自定义标签怎么办
HTML 文件中，Structure 默认只显示标准语义化标签（<div>、<code><nav></nav>、<section></section> 等），不会列出 class="header" 或 id="main" ——这不是 bug，是设计逻辑：它展示的是 DOM 结构层级，不是属性列表。若想按 class 快速跳转，得用 Ctrl+Shift+F 全局搜索，或在 Project 工具窗口顶部搜索框输入 class="xxx"。JS 文件中同理：function 和 const 声明会显示，但对象属性名（如 user.name）不会出现在 Structure 中。
为什么 Structure 里的方法名是灰色的、点不了
灰色 = WebStorm 当前无法解析该符号的定义位置。常见原因有三个：
- 文件未加入项目源根（右键文件夹 →
Mark Directory as→Sources Root） - JS/TS 文件缺少有效导出或未被模块系统识别（比如用了
require但项目设为 ES modules） - HTML 中内联的
<script></script>代码块过大，WebStorm 自动禁用结构索引以保性能（可拆成外部.js文件解决）
验证方式：把光标停在灰色方法名上，看底部状态栏是否提示 Cannot find declaration to go to；如果是，优先检查源根标记和 jsconfig.json / tsconfig.json 是否存在且配置正确。
Structure 和 Project 工具窗口的区别在哪
Structure 是「单文件视角」：只反映当前编辑器中打开的那个文件的内部结构，无论多深的嵌套，都可一键折叠/展开/跳转。而 Project 是「全项目视角」：展示所有文件夹和文件，靠它找文件，不靠它查函数体。两者互补，但不能互相替代——比如你想改 header.js 里的 initNav()，先在 Project 里找到文件，再用 Structure 定位到函数声明行，这才是真实工作流。别指望 Structure 列出整个项目的类继承关系，那是 Ctrl+H（Type Hierarchy）干的事。
