Project Tool Window
- Title bar context menu
- Title bar icons
- Content pane
The Project tool window lets you look at your project from various viewpoints and perform the tasks such as creating new items (directories, packages, files, classes, etc.), opening files in the editor, navigating to the code fragment of interest, and more.
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.
This view contains the pseudo-folder Scratches
with the scratch files.
These are real local files, sharable between projects. They are stored in the
config/scratchesfolder of WebStorm home.
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 title bar context menu provides the options that let you control every aspect of the tool window appearance and behavior.
The options that are on, have a check mark to the left of their names.
The menu also includes commands for switching between the views, resizing the tool window, and more.
To access the menu, right-click the list of views in the left-hand part of the title bar, or, if the views are represented by tabs, right-click the tab of interest.
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 the 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.
|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, functions and other members of the selected item are shown.|
|Autoscroll to Source||If this option is on, WebStorm automatically navigates from a file (or a class member) selected in the Project tool window to the corresponding source file (or its fragment) in the editor. If the corresponding file is not currently open, it will open automatically.|
|Autoscroll from Source||If this option is on, WebStorm automatically navigates from a file in the editor to the corresponding node (file, class, field, method, etc.) 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.
|Pinned, Docked, Floating, Split Mode||These options let you control general appearance and behavior of the tool window. See Viewing Modes.|
|Show Views as Tabs||If this option is off, 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 on, 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).|
|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 icons
|If the views are currently shown as tabs
(the Show Views as Tabs option is on),
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.
|Ctrl+NumPad -||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. Depending on the current view, the menu may include the following options:
|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 modules, packages, directories, files, classes, libraries, 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.
A folder (directory). Different folder types have different colors:
For more information on folder types, see Content Root.
|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
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.
The following table lists and briefly explains the most frequently used context menu commands.
|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 Reference||Ctrl+Shift+Alt+C||Use this command to copy a reference 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. (The Find in Path dialog will open.)|
|Replace in Path||Ctrl+Shift+R||Use this command to perform text search-and-replace. (The Replace in Path dialog will open.)|
|Refactor||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||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!|
|Remove Module||Delete||Use this command to remove a module from your project. Note that the files that make up the module are not physically removed from the disk.|
|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 and Using Local History.|
|Synchronize '<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||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 Directory with||Ctrl+D||Use this command to compare the contents of the selected directory with the contents of some other local directory. The other directory is selected in the corresponding dialog. See Comparing Folders and Differences Viewer for Folders.|
|Compare File with Editor||Use this command to compare the contents of the selected file with the contents of the file active in the editor. See Comparing Files and Differences Viewer.|
|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
WebStorm uses colors to denote VCS file status in the Project tool window. The following table presents information about the meaning of the colors.
|Black||Up to date||File is unchanged.
|Gray||Deleted||File is scheduled for deletion from the repository.
|Blue||Modified||File has changed since the last synchronization.
|Green||Added||File is scheduled for addition to the repository.
|Violet||Merged||File is merged by your VCS as a result of an update.
|Brown||Unknown||File exists locally, but is not in the repository, and is not scheduled for adding.
|Olive||Ignored||File will be ignored in any VCS operation.
|Light brown||Hijacked||File is modified without checkout. This status is valid for the files under Perforce, ClearCase and VSS.
|Red||Merged with conflicts||During the last update, file was merged with conflicts.
|Lilac||Externally deleted||File is deleted locally, but was not scheduled for deletion, and still exists in the CVS
|Dark cyan||Switched||The file is taken from a different branch than the whole project. This status is valid for CVS and