文件结构
WebStorm 允许您在 结构 工具窗口和 结构 弹窗中查看并导航文件结构。 在 结构 工具窗口的工具栏中点击 
，并选择要显示的元素。
如果您的项目已启用 版本控制 ，则可以在 结构 工具窗口和 结构 弹窗中看到 VCS 状态颜色。 它可以帮助您跟踪文件中的更改。 已修改对象的名称会变为蓝色，新添加对象的名称则以绿色高亮显示。
将鼠标悬停在 结构 中的图标上，可在工具提示中查看更多关于该项的信息。
结构弹窗
弹窗显示的信息少于 工具窗口 ，但因 键入时缩小范围 选项，可以更快速地结构导航。
在编辑器中打开文件并按 Ctrl+F12 ，或在主菜单中转到 。
在弹窗中，开始输入要查找的元素名称。 IDE 会在您输入时缩小搜索结果范围。
您还可以使用 CamelHumps ，例如，可以输入
dsu来匹配。您还可以使用弹窗中的复选框来进一步缩小搜索结果。 要更改排序方式，请点击
并选择所需选项。按 Enter 或点击某项以关闭弹窗并在编辑器中跳转到所选元素。
- 继承成员
显示当前类可访问的所有继承方法和字段。 继承的成员以灰色显示，以便与当前类中定义的成员区分开。
- 按字母顺序
按字母顺序对类中的元素进行排序。
- 输入时缩小范围
在输入时 隐藏不相关的项。 禁用此选项时，IDE 会高亮所有与搜索查询匹配的项，而不会隐藏不相关的内容。
结构工具窗口
在编辑器中打开文件或在 项目 工具窗口中选择该文件。
按 Alt+7 键或在主菜单中转到 。
在工具窗口中， 开始输入您要查找的元素名称。 您还可以使用 CamelHumps。 IDE 会在您输入时高亮显示搜索结果。
您还可以使用
下的选项缩小搜索结果范围或对工具窗口中的项进行排序。 
查看选项
排序
- 按字母顺序
按字母顺序对类中的元素进行排序。
显示
- 字段
在树中显示所有字段（属性）。
- 继承的
显示当前类可访问的所有继承方法和字段。 继承成员以灰色显示，以便将其与当前类中定义的成员区分开。
- HTML 大纲
（仅适用于 HTML 文件）显示 HTML 文件的 HTML 5 大纲结构
- DDL语句
（仅适用于 SQL 文件）仅显示 DDL 语句（例如，
CREATE、ALTER、DROP以及其他语句）。- DML语句
（仅适用于 SQL 文件）仅显示 DML 语句（例如，
SELECT、INSERT、UPDATE、DELETE以及其他语句）。- Select语句
（仅适用于 SQL 文件）仅显示
SELECT语句。- 其他
（仅适用于 SQL 文件）仅显示不属于上述类别的语句。
分组
- 按定义类型分组方法
将所有重写或实现特定类或接口的方法归入表示该类或接口的节点下。
- 按类型分组
（仅适用于 SQL 文件）按语句类型进行分组（例如，DDL 语句、DML 语句、
SELECT语句，以及其他）。
从结构窗口运行测试
在 结构 工具窗口中，右键点击测试并选择
运行“方法 name” （Ctrl+Shift+F10）。
WebStorm 使用此测试创建临时运行配置。 要重复使用此配置，请 将其保存并视需要进行编辑。
分组成员
在 JavaScript 和 TypeScript 中，您可以通过在源代码中添加注解，在 结构 中对类成员进行分组。
在编辑器中选择代码片段并按 Ctrl+Alt+T ，或在主菜单中转到 。 选择所需的折叠区域注释，
region或editor-fold。WebStorm 会在选中的代码周围插入注释。 详细了解请参阅 自定义折叠区域。
结构 工具窗口和 结构 弹出窗口使用
标记这些区域。