WebStorm 2018.2 Help

Project Tool Window

View | Tool Windows | Project

This tool window lets you look at your project from various viewpoints and perform the tasks such as creating new items (directories, files, classes, etc.), opening files in the editor, navigating to the code fragment of interest, and more.

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


The tool window provides you with the following views:

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

  • Scopes views (Project Files, Problems, etc.). What is shown in the content pane is limited to the corresponding predefined or user-defined scope. In other respects, depending on the currently selected view options, a scope view may resemble the Project view.

The necessary view is selected from the list in the left-hand part of the title bar or, if the views are represented by tabs, by clicking the corresponding tab.


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

Title bar context menu

The context menu that appears by right-clicking on the title bar, 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.




Select Next View or Tab
Select Previous View or Tab
Show List of Views or Tabs


These are the commands for switching between different views.

Edit Scopes

Use this command to 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.

Autoscroll to Source

If this option is on, WebStorm will automatically open the selected item in the editor. Otherwise, you need to double-click items to open them.

Autoscroll from Source

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

Sort by Type

If the option is off, the items (files, classes, etc.) are sorted alphabetically. If the option is on, the files are sorted by their extensions. Folders are always sorted alphabetically, files within are shown according to the status of this option.

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.

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 .


File Nesting...

Opens the File Nesting Dialog where configure presentation of files with the same names and different extensions.

Pinned, Docked, Floating, Windowed, Split Mode

These options let you control general appearance and behavior of the tool window. See Tool Windows Viewing Modes.

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 ( icons general tbShown svg oricons general tbHidden svg).

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

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. If this option is off, the views are represented by tabs which appear in the left-hand part of the title bar.


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).


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.



Use this command to hide the tool window.

Title bar buttons




icons actions left icons actions right


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.

If the first or the last of the available views is currently selected, this button is shown as icons actions right or icons actions left.

Click this button to open the list of views, for example, to select a different view.

icon scroll from source on title bar

Click this icon to navigate from a file in the editor to the corresponding node (file, class, field, method, etc.) in the Project tool window.

This icon is not available if the Autoscroll from Source option is currently on.

icons actions collapseall svg

Ctrl+NumPad -

Use this icon or shortcut to collapse all the nodes.

icons general gearPlain svg

Click this button to open the menu for configuring the current view and changing the tool window viewing modes.

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.

The available options are a subset of the title bar context menu items.

icons general hideToolWindow svgShift+Escape Use this icon or shortcut to hide the tool window.

When used in combination with the Alt key, clicking this icon hides all the tool windows attached to the same tool window bar.

Content pane

The content pane shows the project items such as directories, files, etc.

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, etc.) are shown in Symbols.



icons nodes 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 . Learn more from Content Root

icons modules 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. Learn more from Configuring JavaScript Libraries.

icons general projectTab

Your scratch files and consoles are grouped under this node.

Context menu commands for the content pane items

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






Use this command to create a new item (directory, file, or class). within the selected one (project or directory).



Use this command to move the selected item or items from the current location to the clipboard.



Use this command to copy the selected item or items to the clipboard.



Use this command to insert the contents of the clipboard into the selected location.

Jump to Source


Use this command to open the selected file in the editor. If the file is already open, the corresponding editor tab will become active.

Copy Path(s)


Use this command to copy the full path(s) of the selected item or items to the clipboard.

Find Usages


Use this command to find the usages of the selected item. (The Find Usages dialog will open.)

Find in Path


Use this command to perform a text search. (Find in Path dialog will open.)

Replace in Path


Use this command to perform text search-and-replace. (Replace in Path dialog will open.)


Use this command to perform one of the refactorings available for the selected item.

Add to Favorites


Use this command to add the selected item to an existing or new list of favorite items. See Managing Your Project Favorites.

Show Thumbnails


Use this command to view thumbnails for image files located in the selected directory. (The Thumbnails tool window will open.)

Reformat Code


Use this command to reformat the source code in the selected file or in all files in the current directory. (The Reformat Code dialog will open.)

See also, Reformat and rearrange code.



Use this command to 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.

Run '<item_name>'


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

Local History

Use this command to view local history for the selected file or directory, or to create a label for the current version of your project.

Synchronize '<item_name>'

Use this command to synchronize the selected item with its version 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.)

Show in Explorer

Use this command to open a file browser (e.g. Windows Explorer or Finder) and show the selected item there.

File Path / Directory Path


This menu shows the path from the file system root to the selected element with individual directories as the menu items.

When you select an item in this menu (e.g. a directory), a file browser (e.g. Windows Explorer or Finder) opens, and the selected item is shown there.

Compare With


Use this command to compare the selected file or directory with another file or directory. See Comparing files, folders, and text sources and Differences Viewer for Folders.

Compare File with Editor

Use this command to compare the selected file with the file open on an active editor tab. See Comparing files, folders, and text sources and Differences Viewer for Files.

Mark Directory As

Use this command to make the selected directory a source root or a test source root, to make the directory excluded, etc.

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

For more information on the categories for directories, see Content Root.

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. The following table presents information about the meaning of the colors.


File Status



Up to date

File is unchanged.



File is scheduled for deletion from the repository.



File has changed since the last synchronization.



File is scheduled for addition to the repository.



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



File exists locally, but is not in the repository, and is not scheduled for adding.



File will be ignored in any VCS operation.

Light brown


File is modified without checkout. This status is valid for the files under Perforce, ClearCase and VSS. modified without checkout.


Merged with conflicts

During the last update, file was merged with conflicts.


Externally deleted

File is deleted locally, but was not scheduled for deletion, and still exists in the CVS repository.

Dark cyan


The file is taken from a different branch than the whole project. This status is valid for CVS and SVN.

Last modified: 19 November 2018

See Also