Project Tool Window
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 on the title bar.
Title bar context menu
The following table lists and briefly explains the available commands and options.
Select Next View or Tab
These are the commands for switching between different views.
| 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 .
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 ( or). |
To open the tool window again (and restore the associated features), use the main menu:.
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.
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
| 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 or .
Click this button to open the list of views, for example, to select a different view.
| 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.
Use this icon or shortcut to collapse all the nodes.
| 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.
|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.
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.
A folder (directory). Different folder categories have different colors. For example, folders are used for test sources while excluded folders are marked with . Learn more from Content Root
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.
Use this command to copy the full path(s) of the selected item or items to the clipboard.
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.
Use this command to view thumbnails for image files located in the selected directory. (The Thumbnails tool window will open.)
|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.
For an SQL file or database console: execute all the statements contained in the selected file or console.
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.
|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 File with Editor
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.
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.
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.
File is deleted locally, but was not scheduled for deletion, and still exists in the CVS repository.
The file is taken from a different branch than the whole project. This status is valid for CVS and SVN.