WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Reference
  2. Tool windows reference
  3. Project tool window

Project tool window

Last modified: 11 September 2023

View | Tool Windows | Project or Alt01

The Project tool window lets you take a look at your project from various viewpoints and perform different tasks such as creating new items (directories, files, classes, and so on), opening files in the editor, navigating to the necessary code fragments, and more.

Most of the functions in this tool window are accessed as context menu commands in the content pane and via associated shortcuts.

Also, the view contains the Scratches and Consoles folder that lets you manage created scratch files and extension scripts.

Views

The tool window has several views:

  • Project view. This view displays all the project items along with their dependencies (SDKs and libraries). The emphasis is on the directory structure, although the packages are also shown.

  • Scope views (Project Files, Open Files, and so on). These views display the contents of the predefined and user-defined scopes. In other respects, depending on the currently selected view options, a scope view may resemble the Project view.

To switch between views, press Alt0→ / Alt0← or select the desired view from the list on the title bar.

You can also display each view in a separate tab: click Settings and disable the Group Tabs option.

WebStorm: choosing a view in the Project tool window

To configure a view, use the corresponding options in the title bar context menu. The necessary options can also be accessed by clicking Settings on the title bar.

Preview files

There are two ways to preview files without opening each one in a separate tab:

  • Use the file preview popup: select a file in the Project tool window and press Space.

    Opening a file preview in the Project tool window

  • Enable the preview tab: click the Options button and select Enable Preview Tab.

Show file size and modification timestamp

You can view the size and modification timestamp for the files in the project tree.

  • Select View | Appearance | Details in Tree View from the main menu.

Details in Tree Views option is ON

Show tree indent guides

In the Project tool window , you can display vertical lines that mark indent levels and help you better understand the hierarchy of the components in your project.

  1. Go to Settings | Appearance and Behavior | Appearance.

  2. Set the Show tree indent guides checkbox.

Title bar context menu

The context menu that appears by right-clicking the title bar or clicking Options button (the Options icon) provides settings for project views, viewing modes, as well as for switching between the views, resizing the tool window, and more.

The following table lists and briefly explains the available commands and options.

Item

Shortcut

Description

Select Next View or Tab

Alt0→

Use this option to switch between different views.

Select Previous View or Tab

Alt0←

Use this option to switch between different views.

Show List of Views or Tabs

Alt0↓

Use this option to switch between different views.

Tree Appearance

Show Excluded Files

This option is available only in the Project view.

Turn this option on or off to show or hide excluded folders and files.

Show Scratches and Consoles

Hide or display the Scratches and Consoles node.

This node contains your scratch files and query consoles.

Sort by Name

Sort files alphabetically by their names.

The option does not affect the order of folders, they are always sorted alphabetically.

Sort by Type

Sort files by their extensions.

The option does not affect the order of folders, they are always sorted alphabetically.

Sort by Modification Time (Newest First/Oldest First)

Sort files by the time they were modified. To display this information, select View | Appearance | Details in Tree View from the main menu.

The option does not affect the order of folders, they are always sorted alphabetically.

Folders Always on Top

If the option is on, folders are shown above the files. Otherwise, all items are sorted alphabetically, and files and folders appear intermixed.

Enable Preview Tab

Enable the preview tab that allows you to view files in a single tab one by one without opening each file in a new tab.

Open Files with Single Click

Open an item in the editor by clicking it in the Project tool window once. Otherwise, you need to double-click items to open them.

Note that you cannot disable this option if you enable the preview tab.

Open Directories with Single Click

Expand and collapse directories in the Project tool window by clicking them once. Otherwise, you need to double-click a directory to open it or use the Expand icon next to the directory's name.

Always Select Opened File

If this option is on, WebStorm automatically locates documents that you open in the editor in the current view of this window.

Edit Scopes

Open the Scopes dialog in which you can create and edit used-defined scopes.

Note that this command is available only if the current view is a scope view.

File Nesting

Opens the File nesting dialog where you can configure presentation of files that have same names but different extensions.

Group Tabs

If this option is on, there is a list in the left-hand part of the title bar from which you can select the necessary view.

Group Tabs: ON

If this option is off, the views are represented by tabs which appear in the left-hand part of the title bar.

Group Tabs: OFF

View Mode

This option lets you control general appearance and behavior of the tool window. For full information, refer to Tool window view modes.

Move to

To associate the tool window with a different tool window bar, select this command, and then select the destination tool window bar (Top, Left, Bottom or Right). For full information, refer to the Move tool windows chapter.

Resize

To resize the tool window by moving one of its borders, select this command, and then select the necessary Stretch to option.

Note that this command is not available for the floating mode.

Remove from Sidebar

This command hides the tool window, removes the associated tool window button from the tool window bar and removes the tool window from the quick access menu (tb shown or tb hidden).

To open the tool window again (and restore the associated features), use the main menu: View | Tool Windows | <Window Name> or press Alt01.

Hide

ShiftEsc

Hide the tool window.

Help

This command opens the description of the Project tool window in the WebStorm online help.

Title bar actions

Item

Shortcut

Description

Select Next View or Tab

Select Previous View or Tab

Alt0→

Alt0←

If the views are currently shown as tabs (the Group Tabs option is off), this button appears to the right of the last visible tab.

Open the list of views, for example, to select a different view.

Select Opened File

Navigate from a file in the editor to the corresponding node (file, class, field, method, and so on) in the Project tool window.

This icon is not available if the Always Select Opened File option is currently on.

expand all

CtrlNumPad +

Expand all nodes.

collapse all

CtrlNumPad -

Collapse all nodes.

settings

Open the menu for configuring the current view and changing the tool window viewing modes. The available options are a subset of the title bar context menu items.

Note that most of the menu items are options that you can turn on or off. An option which is on has a check mark to the left of its name.

Hide tool window

ShiftEsc

Hide the tool window ShiftEsc.

To hide all the tool windows, press CtrlShiftF12.

Content pane

The content pane shows the project items such as directories, files, and other elements.

The icons for the main categories (node types) are shown and briefly explained in the following table. The icons used for the main symbols (classes, fields, methods, and so on.) are shown in Icon reference.

Item

Description

Folder

A folder (directory). Different folder categories have different colors. For example, root test folders are used for test sources while excluded folders are marked with exclude root.

Library

Under the External Libraries node, WebStorm lists third party files (libraries) whose functions and methods are added to WebStorm's internal knowledge to enhance coding assistance. For more information, refer to Configure JavaScript libraries.

Scratches and Consoles

Your scratch files and consoles are grouped under this node.

plain text

Files marked as plain text.

Context menu commands for the content pane items

The context menu of an item provides access to all the functions available for this item.

Item

Shortcut

Description

New

AltInsert

Create a new item (directory, file, or class) within the selected one. (project or directory).

Cut

Ctrl0X

Move the selected item or items from the current location to the clipboard.

Copy

Ctrl0C

Copy the selected item or items to the clipboard.

Copy Path/Reference

Use this command and one of the following options to copy the selected item(s) to the clipboard:

  • Absolute Path: copies the full path(s) of the selected item or items.

  • File Name: copies only the filename to the clipboard.

  • Path From Content Root: copies the path relative to the directory that contains the application content files.

  • Path From Source Root: copies the path relative to the Sources Root.

  • Path From Repository Root: copies the path relative to the project repository.

  • GitHub Repository URL: copies the path relative to the project repository on GitHub.

  • Toolbox URL: if you have WebStorm Toolbox installed, you can insert the copied path in the browser to open the Toolbox application with the selected project.

  • Copy Reference (CtrlAltShift0C): copies the reference of the selected item including the line number.

Paste

Ctrl0V

Insert the contents of the clipboard into the selected location.

Jump to Source

F4

Open the selected file in the editor. If the file is already open, the corresponding editor tab will become active.

Find Usages

AltF7

Search for the usages of the selected item. (The Find Usages dialog will open.)

Find in Files

CtrlShift0F

Perform a text search. (Find in Files dialog will open.)

Replace in Files

CtrlShift0R

Perform text search-and-replace. (Replace in Path dialog will open.)

Refactor

Perform one of the refactorings available for the selected item.

Bookmarks

Add the selected item to an existing or new list of bookmarks.

Show Thumbnails

View thumbnails for image files located in the selected directory. (The Thumbnails tool window will open.)

Reformat Code

CtrlAlt0L

Reformat the source code in the selected file or in all files in the current directory.

See also, Reformat and rearrange code.

Delete

Delete

Delete the selected item. Use with care!

Change Dialect (<CurrentDialect>)

For SQL files and database consoles, change the SQL dialect associated with the file or console.

Override File Type

Change the type of the selected file, for example, to Plain Text to exclude it from project, so it is ignored by inspections, code completion, navigation, and so on. The file will be indicated with a special icon plain text and shown as plain text in the editor. For more information, refer to Excluding files.

Run '<item_name>'

CtrlShiftF10

For an SQL file or query console: execute all the statements contained in the selected file or console.

Local History

View local history for the selected file or directory, or to create a label for the current version of your project.

Synchronize '<item_name>'

Synchronize the view in the tool window with the view saved in the file system.

If you change a file or directory contents externally, WebStorm, under certain circumstances, may not be aware of the corresponding changes unless you use this command.

Open in Right Split

ShiftEnter

Split the editor into two parts and show the file in the right section. For more information, refer to Split screen.

Open in

Open a file in your system file manager or in Terminal.

Compare With

Ctrl0D

Compare the selected file or directory with another file or directory. See Compare files, folders, and text sources and Differences viewer for folders.

Compare File with Editor

Compare the selected file with the file open on an active editor tab. See Compare files, folders, and text sources and Differences viewer for files.

Mark Directory As

Make the selected directory a source root or a test source root , to make the directory excluded, and so on.

The necessary category for the directory is selected from the submenu.

File status highlights

If VCS integration is enabled for the current project, WebStorm uses colors to denote VCS file status in the Project tool window.

You can configure VCS file status colors on the Version Control | File Status Colors page of the IDE settings CtrlAlt0S.

tip

To also highlight folders with modified contents, select Highlight directories that contain modified files in the Project tree on the Version Control | Confirmation page of the IDE settings CtrlAlt0S.

The table below lists default file status colors and their meanings in some of the color schemes.

Color

File Status

Description

Color sample: dark green #0A7700

Added

The file in the active changelist is scheduled for addition to the repository.

Color sample: green #0EAA00

Added in not active changelist

The file in an inactive changelist is scheduled for addition to the repository. This file status is available if the Highlight files from non-active changelists option is enabled in Settings | Version Control | Changelists.

Color sample: red #FF0000

Changelist conflict

The file in an inactive changelist has been modified in the active changelist. In this case, a new dialog will open, prompting you to resolve the changelist conflict. This file status is available if all options are enabled in Settings | Version Control | Changelists.

Color sample: dark green #0A7700

Copied

If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.

Color sample: grey #616161

Deleted

The file is scheduled for deletion from the repository.

Color sample: dull purple #773895

Deleted from file system

The file has been deleted locally but hasn't been scheduled for deletion, and it still exists in the repository.

Color sample: light grayish blue #8AA4C8

Have changed descendants

If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings | Version Control | Confirmation.

Color sample: bright blue #3264B4

Have immediate changed children

If a file is modified, the IDE will highlight its parent directory. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings | Version Control | Confirmation.

Color sample: light brown #B28C00

Hijacked

[Perforce, ClearCase, VSS] The file is modified without checkout.

Color sample: dark olive #727238

Ignored

A file is intentionally untracked by VCS.

Color sample: purple #7503DC

Merged

The file is merged by your VCS as a result of an update.

Color sample: red #FF0000

Merged with conflicts

During the last update, the file has been merged with conflicts.

Color sample: red #FF0000

Merged with property conflicts

During the last update, the IDE has detected differences between the properties of the local file and its server version.

Color sample: red #FF0000

Merged with text and property conflicts

Text and property conflicts happen when two or more developers modify the same lines of a file and the same file properties.

Color sample: bright navy #0032A0

Modified

The file has changed since the last synchronization.

Color sample: blue #0047E4

Modified in not active changelist

The file in an inactive changelist has been modified. This file status is available if the Highlight files from non-active changelists option is enabled in Settings | Version Control | Changelists.

Color sample: Olive #7C7C00

Obsolete

The file should no longer be in your working copy of the repository.

Color sample: teal #007C7C

Renamed

Since the last update, the file has been renamed.

Color sample: dark cyan #08978F

Switched

[SVN] The file is taken from a different branch than the whole project.

Color sample: brown #993300

(Unknown) Unversioned

The file exists locally but is not in the repository and is not scheduled for addition.

Color sample: black None (default color)

Up to date

The file hasn't been changed.

File colors

Files that belong to different scopes (production files or test files, for example) can be highlighted in different colors in the Project tool window , search results, and editor tabs.

To each scope, you can assign its own color. For more information, refer to Associate scopes with colors.

Scope highlighting in the editor tabs and search results

See also

Procedures

Reference

Getting Started