Project tool window

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.
Scopes 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 Alt+Right/ Alt+Left or select the desired view from the list on the title bar. You can also display each view in a separate tab: click 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 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.
Enable the preview tab — click and select Enable Preview Tab.

Show file size and modification timestamp

The Project tool window allows you to see the size and modification timestamp for the files in the project tree. To display this information, select View | Appearance | Details in Tree Views from the main menu.

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. To display these lines, enable Show tree indent guides on the Appearance and Behavior | Appearance page of the IDE settings Ctrl+Alt+S.

Title bar context menu

The context menu that appears by right-clicking the title bar or clicking , 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 Select Previous View or Tab Show List of Views or Tabs	`Alt+Right` `Alt+Left`	These are the commands for switching between different views.
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.
Open Files with Single Click		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. Note that you cannot disable this option if you enable the preview tab.
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.
Sort by Type		If the option is off, the items (files, classes, and so on) 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 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. If this option is off, the views are represented by tabs which appear in the left-hand part of the title bar.
View Mode		This option lets you control general appearance and behavior of the tool window. See 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).
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 ( or ). To open the tool window again (and restore the associated features), use the main menu: View \| Tool Windows \| <Window Name> or press `Alt+1`.
Hide	`Shift+Escape`	Hide the tool window.

Title bar buttons

Item	Shortcut	Description
Select Next View or Tab Select Previous View or Tab	`Alt+Right` `Alt+Left`	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.
		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.
	`Ctrl+NumPad -`	Collapse all the nodes.
		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.
	`Shift+Escape`	Hide the tool window `Shift+Escape`. To hide all the tool windows, press `Ctrl+Shift+F12`.

Content pane

The content pane shows the project items such as directories, files, and so on.

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
	A folder (directory). Different folder categories have different colors. For example, folders are used for test sources while excluded folders are marked with .
	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. See Configure JavaScript libraries for details.
	Your scratch files and consoles are grouped under this node.
	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	`Alt+Insert`	Create a new item (directory, file, or class) within the selected one. (project or directory).
Cut	`Ctrl+X`	Move the selected item or items from the current location to the clipboard.
Copy		Use this command and one of the following options to copy the selected item(s) to the clipboard: Copy (`Ctrl+C`): copies the selected item or items to the clipboard. Copy as Plain Text: copies item as plain text. Copy Path (`Ctrl+Shift+C`): copies the relative path(s) of the selected item or items to the clipboard. Copy Reference (`Ctrl+Alt+Shift+C`): copies the reference of the selected item including the line number. Absolute Path: copies the full path(s) of the selected item or items to the clipboard. File Name: copies only the filename to the clipboard. Path from Content Root: copies the full path of the directory that contains the application content files. Toolbox URL: if you have WebStorm toolbox installed, you can insert the copied path in the browser to open the toolbox with the selected project.
Paste	`Ctrl+V`	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	`Alt+F7`	Search for the usages of the selected item. (The Find Usages dialog will open.)
Find in Files	`Ctrl+Shift+F`	Perform a text search. (Find in Files dialog will open.)
Replace in Files	`Ctrl+Shift+R`	Perform text search-and-replace. (Replace in Path dialog will open.)
Refactor		Perform one of the refactorings available for the selected item.
Add to Favorites	`Alt+Shift+F`	Add the selected item to an existing or new list of favorite items.
Show Thumbnails		View thumbnails for image files located in the selected directory. (The Thumbnails tool window will open.)
Reformat Code	`Ctrl+Alt+L`	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.
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.
Mark as Plain Text		Exclude the selected file from project, so it is ignored by inspections, code completion, navigation, and so on. The file will be indicated with a special icon and shown as plain text in the editor. For more details, see Excluding files.
Run '<item_name>'	`Ctrl+Shift+F10`	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		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.
File Path / Directory Path	`Ctrl+Alt+F12`	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 (for example, a directory), a file browser (for example, Windows Explorer or Finder) opens, and the selected item is shown there.
Compare With	`Ctrl+D`	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. The following table presents information about the meaning of the colors.

Color	File Status	Description
#0A7700	Added	The file in the active changelist is scheduled for addition to the repository.
#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/Preferences \| Version Control \| Changelists.
#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/Preferences \| Version Control \| Changelists.
#0A7700	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#616161	Deleted	The file is scheduled for deletion from the repository.
#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.
#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 Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
#3264B4	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
#B28C00	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#727238	Ignored	A file is intentionally untracked by VCS.
#7503DC	Merged	The file is merged by your VCS as a result of an update.
#FF0000	Merged with conflicts	During the last update, the file has been merged with conflicts.
#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.
#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.
#0032A0	Modified	The file has changed since the last synchronization.
#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/Preferences \| Version Control \| Changelists.
#7C7C00	Obsolete	The file should no longer be in your working copy of the repository.
#007C7C	Renamed	Since the last update, the file has been renamed.
#08978F	Switched	[SVN] The file is taken from a different branch than the whole project.
#993300	(Unknown) Unversioned	The file exists locally, but is not in the repository, and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

Color	File Status	Description
#629755	Added	The file in the active changelist is scheduled for addition to the repository.
#629755	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/Preferences \| Version Control \| Changelists.
#D5756C	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/Preferences \| Version Control \| Changelists.
#0A7700	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#6C6C6C	Deleted	The file is scheduled for deletion from the repository.
#6C6C6C	Deleted from file system	The file has been deleted locally, but hasn't been scheduled for deletion, and it still exists in the repository.
#6897BB	Have changed descendants	If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
#6897BB	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
None (default color)	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#848504	Ignored	A file is intentionally untracked by VCS.
#9876AA	Merged	The file is merged by your VCS as a result of an update.
#D5756C	Merged with conflicts	During the last update, the file has been merged with conflicts.
#D5756C	Merged with property conflicts	During the last update, the IDE has detected differences between the properties of the local file and its server version.
#D5756C	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.
#6897BB	Modified	The file has changed since the last synchronization.
#6897BB	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/Preferences \| Version Control \| Changelists.
None (default color)	Obsolete	The file should no longer be in your working copy of the repository.
#3A8484	Renamed	Since the last update, the file has been renamed.
None (default color)	Switched	[SVN] The file is taken from a different branch than the whole project.
#D1675A	(Unknown) Unversioned	The file exists locally, but is not in the repository, and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

Color	File Status	Description
#62CC47	Added	The file in the active changelist is scheduled for addition to the repository.
#62CC47	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/Preferences \| Version Control \| Changelists.
#FF6666	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/Preferences \| Version Control \| Changelists.
#62CC47	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#ED864A	Deleted	The file is scheduled for deletion from the repository.
#ED864A	Deleted from file system	The file has been deleted locally, but hasn't been scheduled for deletion, and it still exists in the repository.
#4FF0FF	Have changed descendants	If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
#4FF0FF	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences \| Version Control.
None (default color)	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#A9B837	Ignored	A file is intentionally untracked by VCS.
#ED94FF	Merged	The file is merged by your VCS as a result of an update.
#FF6666	Merged with conflicts	During the last update, the file has been merged with conflicts.
#FF6666	Merged with property conflicts	During the last update, the IDE has detected differences between the properties of the local file and its server version.
#FF6666	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.
#4FF0FF	Modified	The file has changed since the last synchronization.
#4FF0FF	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/Preferences \| Version Control \| Changelists.
None (default color)	Obsolete	The file should no longer be in your working copy of the repository.
#4FF0FF	Renamed	Since the last update, the file has been renamed.
None (default color)	Switched	[SVN] The file is taken from a different branch than the whole project.
D1675A	(Unknown) Unversioned	The file exists locally, but is not in the repository, and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

Last modified: 03 August 2021