WebStorm 2017.3 Help

Project Tool Window

View | Tool Windows | Project

The Project 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 a number of views.

Different views emphasize different project aspects and, generally, define which items are shown and how:

  • 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.
  • Scratches view. This view lets you manage your scratch files

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.

py projectToolWindowViews

To configure a view, use the corresponding options in the title bar context menu. The necessary options can also be accessed by clicking icon viewMode 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.

Show Members If this option is on, the files in the tree that contain classes turn into nodes. When such node is unfolded, the contained classes with their fields, methods, and other members of the selected item are shown.
Autoscroll to Source If this option is on, WebStorm will automatically open the selected item in the editor.
Autoscroll from Source If this option is on, WebStorm automatically locates documents that you open in the editor in the Project tool 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, all the folders are shown before the files. Otherwise, all the items are sorted alphabetically, and the files and folders appear intermixed.
Show Excluded Files This option is available only in the Project view. (In other views, excluded files are never shown.)

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

show excluded files
File Nesting... Click this option to open the File Nesting Dialog and configure presentation of files with the same names.
Pinned, Docked, Floating, Windowed, Split ModeThese 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 (show tool window bars or show hide tool window bars).

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.
show views as tabs
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).
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.

Hide Shift+Escape Use this command to hide the tool window.

Title bar buttons

icon left right on title bar Alt+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 icon right on title bar or icon left on title bar.

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.

icon collapse all on title bar Ctrl+NumPad - Use this icon or shortcut to collapse all the nodes.
icon viewMode 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. Depending on the current view, the menu may include the following options:

icon hideSide Shift+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 file types are listed in File Types Recognized by WebStorm; the icons for the main symbols (classes, fields, methods, etc.) are shown in Symbols.

iconPackage A package.
folder A folder (directory). Different folder types have different colors:
  • An "ordinary" folderfolder.
  • A source folderroot_Source.png.
  • A test source folderroot_Test.png.

For more information on folder types, see Content Root.

library External Libraries, a category for grouping third party software associated with the project. The node is only shown when the Project view is selected.

Context menu commands for the content pane items

When you right-click an item in the content pane, the context menu for this item is shown. This menu provides access to all the functions available for the selected item:

New Alt+Insert Use this command to create a new item (directory, file, or class). within the selected one (project or directory).
Cut Ctrl+X Use this command to move the selected item or items from the current location to the clipboard.
Copy Ctrl+C Use this command to copy the selected item or items to the clipboard.
Copy Path(s) Ctrl+Shift+C Use this command to copy the full path(s) of the selected item or items to the clipboard.
Copy Relative Path Ctrl+Shift+Alt+C Use this command to copy a relative path to the selected item to the clipboard.
Paste Ctrl+V Use this command to insert the contents of the clipboard into the selected location.
Jump to Source F4 Use this command to open the selected file in the editor. If the file is already open, the corresponding editor tab will become active.
Find Usages Alt+F7 Use this command to find the usages of the selected item. (The Find Usages dialog will open.)
Find in Path Ctrl+Shift+F Use this command to perform a text search. (Find in Path dialog will open.)
Replace in Path Ctrl+Shift+R Use this command to perform text search-and-replace. (Replace in Path dialog will open.)
Refactor Use this command to perform one of the refactorings available for the selected item.
Add to FavoritesUse this command to add the selected item to an existing or new list of favorite items. See Managing Your Project Favorites.
Show Thumbnails Ctrl+Shift+T Use this command to view thumbnails for image files located in the selected directory. (The Thumbnails tool window will open.)
Reformat Code Ctrl+Alt+L 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,Reformatting Source Code.

Delete Delete 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>' Ctrl+Shift+F10 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. See Local History.
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 ExplorerUse this command to open a file browser (e.g. Windows Explorer or Finder) and show the selected item there.
File Path Ctrl+Alt+F12 Use this command to open the File Path menu. 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 Ctrl+D Use this command to compare the selected file or directory with another file or directory. Select the other file or directory the dialog that opens. See Comparing Folders and Differences Viewer for Folders.
Compare File with EditorUse this command to compare the selected file with the file open on an active editor tab. See Comparing Files 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.

ColorFile StatusDescription
BlackUp to dateFile is unchanged.
Gray DeletedFile is scheduled for deletion from the repository.
Blue ModifiedFile has changed since the last synchronization.
Green AddedFile is scheduled for addition to the repository.
Violet MergedFile is merged by your VCS as a result of an update.
Brown UnversionedFile exists locally, but is not in the repository, and is not scheduled for adding.
Olive IgnoredFile will be ignored in any VCS operation.
Light brown HijackedFile is modified without checkout. This status is valid for the files under Perforce, ClearCase and VSS. modified without checkout.
Red Merged with conflictsDuring the last update, file was merged with conflicts.
Lilac Externally deletedFile is deleted locally, but was not scheduled for deletion, and still exists in the CVS repository.
Dark cyan SwitchedThe file is taken from a different branch than the whole project. This status is valid for CVS and SVN.
Last modified: 26 March 2018

See Also