WebStorm 2024.1 Help

File structure

WebStorm allows you to view and navigate the structure of a file in the Structure tool window and the Structure popup. Click in the toolbar of the Structure tool window and select the elements you want shown.

Highlighting changes in files

You can see the VCS status color hints in the Structure tool window and Structure popup if your project is under version control. It helps you track changes in files. The names of modified objects become blue, and the names of the newly added objects appear highlighted in green.

Hover over icons in Structure to get additional information in tooltips about the items.

Structure popup

The popup provides less information than the tool window, but it allows you to navigate the structure faster due to the Narrow down on typing option.

  1. Open a file in the editor and in the main menu, go to Navigate | File Structure or press Ctrl+F12.

  2. In the popup, start typing the name of the element that you want to find. You can also use wildcards. The IDE will narrow down the search results as you type.

  3. You can additionally narrow down your search results by using the checkboxes in the popup. To change the sorting, click and select the necessary option.

  4. Press Enter or click an item to close the popup and navigate to the selected element in the editor.

    Structure popup
Inherited members

Displays all methods and fields inherited by the current class and accessible from it. The inherited members are displayed gray to distinguish them from the members defined in the current class.

Alphabetically

Sorts elements within a class alphabetically.

Narrow down on typing

Hides irrelevant items as you type. When this option is disabled, the IDE highlights all items that match your search query without hiding irrelevant items.

Structure tool window

  1. Open a file in the editor or select it in the Project tool window.

  2. In the main menu, go to View | Tool Windows | Structure or press Alt+7.

  3. In the tool window, start typing the name of the element that you want to find. You can also use wildcards. The IDE will highlight the search results as you type.

  4. You can additionally narrow down your search results or sort the items in the tool window by using the options located under .

    Structure tool window

View options

Sort

Alphabetically

Sorts elements within a class alphabetically.

Show

Fields

Displays all fields (properties) in the tree.

Inherited

Displays all methods and fields inherited by the current class and accessible from it. The inherited members are displayed gray to distinguish them from the members defined in the current class.

HTML Outline

(Only for HTML files) Displays HTML 5 outline of an HTML file

DDL statements

(Only for SQL files) Displays only DDL statements (for example, CREATE, ALTER, DROP, and other statements).

DML statements

(Only for SQL files) Displays only DML statements (for example, SELECT, INSERT, UPDATE, DELETE, and other statements).

Select statements

(Only for SQL files) Displays only SELECT statements.

Other

(Only for SQL files) Displays only statements that do not fall under the previous categories.

Group

Methods by Defining Type

Groups all methods that override or implement the methods of a particular class or interface under the node that corresponds to this class or interface.

Group by type

(Only for SQL files) Group statements by their type (for example, DDL statements, DML statements, SELECT statements, and Other).

Last modified: 10 April 2024