Ctrl + F12 适合单文件快速跳转，Alt + 7 适合跨文件持续重构；前者弹出扁平化符号列表，后者打开可固定、可操作的侧边栏结构工具窗口。
Ctrl + F12 和 Alt + 7 到底该用哪个？
两者都叫“结构视图”，但行为完全不同，选错就白按：
- Ctrl + F12 弹出当前文件的**扁平化符号列表**（类、方法、字段按顺序排），支持上下键导航 + 回车跳转，适合“找完就走”——比如你在 user.service.ts 里想立刻跳到 updateProfile()，按一下、输几个字母、回车，完事。
- Alt + 7 打开的是**侧边栏结构工具窗口**，可跨文件切换、折叠/展开、拖拽重排、批量操作。它会随着编辑器焦点自动切到当前文件，适合重构时持续观察成员关系，比如同时对比 UserService 和 UserRepository 的方法签名。
别混用：想单文件快跳，就用 Ctrl + F12；想长期盯着结构改代码，Alt + 7 必须固定（点右上角图钉图标）。
结构视图里找不到刚写的函数？先查这三处
不是插件坏了，是 WebStorm 没“看见”：
- 编辑器顶部有红色波浪线（比如少个 } 或 ;），解析器直接跳过后续符号 → 先修语法错误再试
- 函数写在 IIFE、eval()、或动态生成的表达式里（如 const fn = () => {} 赋值给变量）→ 这类非顶层声明默认不进结构视图，换用 Alt + 7 并勾选齿轮菜单里的 “Show synthetic methods”（部分语言支持）
- 文件类型被误标为 Plain text → 看编辑器右下角，点击文件类型标签，手动设为 JavaScript、TypeScript 或对应语言
为什么方法名是灰色的、点不了？
灰色 = WebStorm 不知道它在哪定义，常见原因：
- 文件没加进源根：右键项目文件夹 → Mark Directory as → Sources Root
- JS/TS 文件用了 require 但项目配置为 ES modules（jsconfig.json 或 tsconfig.json 中 "module": "esnext"），导致模块解析失败
- HTML 里大段内联 <script></script> → WebStorm 为保性能自动禁用结构索引 → 拆成外部 .js 文件解决
验证方式：把光标停在灰色名上，看底部状态栏是否显示 Cannot find declaration to go to；如果是，优先检查源根和配置文件是否存在。
Alt + 7 侧边栏还能干啥？不只是看
这个面板能主动改代码，不是只读的：
- 右键方法 → Move to another file 或 Extract method，操作前就能预览影响范围
- 拖拽方法名上下调整顺序（仅限同级作用域），松手后 WebStorm 自动重排源码（需开启设置：Settings → Editor → General → Appearance → “Show members in file structure”）
- 按住 Ctrl（macOS 为 Cmd）点击多个方法名，可批量选中 → 右键统一重命名或注释
- Vue 单文件组件中，<script setup></script> 里的函数默认不显示，除非显式调用 defineExpose()
} 或 ;），解析器直接跳过后续符号 → 先修语法错误再试
- 函数写在 IIFE、eval()、或动态生成的表达式里（如 const fn = () => {} 赋值给变量）→ 这类非顶层声明默认不进结构视图，换用 Alt + 7 并勾选齿轮菜单里的 “Show synthetic methods”（部分语言支持）
- 文件类型被误标为 Plain text → 看编辑器右下角，点击文件类型标签，手动设为 JavaScript、TypeScript 或对应语言
为什么方法名是灰色的、点不了？
灰色 = WebStorm 不知道它在哪定义，常见原因：
- 文件没加进源根：右键项目文件夹 → Mark Directory as → Sources Root
- JS/TS 文件用了 require 但项目配置为 ES modules（jsconfig.json 或 tsconfig.json 中 "module": "esnext"），导致模块解析失败
- HTML 里大段内联 <script></script> → WebStorm 为保性能自动禁用结构索引 → 拆成外部 .js 文件解决
验证方式：把光标停在灰色名上，看底部状态栏是否显示 Cannot find declaration to go to；如果是，优先检查源根和配置文件是否存在。
Alt + 7 侧边栏还能干啥？不只是看
这个面板能主动改代码，不是只读的：
- 右键方法 → Move to another file 或 Extract method，操作前就能预览影响范围
- 拖拽方法名上下调整顺序（仅限同级作用域），松手后 WebStorm 自动重排源码（需开启设置：Settings → Editor → General → Appearance → “Show members in file structure”）
- 按住 Ctrl（macOS 为 Cmd）点击多个方法名，可批量选中 → 右键统一重命名或注释
- Vue 单文件组件中，<script setup></script> 里的函数默认不显示，除非显式调用 defineExpose()
Move to another file 或 Extract method，操作前就能预览影响范围
- 拖拽方法名上下调整顺序（仅限同级作用域），松手后 WebStorm 自动重排源码（需开启设置：Settings → Editor → General → Appearance → “Show members in file structure”）
- 按住 Ctrl（macOS 为 Cmd）点击多个方法名，可批量选中 → 右键统一重命名或注释
- Vue 单文件组件中，<script setup></script> 里的函数默认不显示，除非显式调用 defineExpose()
结构视图依赖语言服务解析，不是所有写法都能被识别。遇到空白或缺失，别硬等刷新——Ctrl + Shift + F 全局搜函数名，往往比调结构视图更快。
