WebStorm 2018.2 Help

Configuring Projects

In WebStorm, content is a collection of files with which you are currently working, possibly organized in a hierarchy of subfolders. The top-level folder is called content root folder or content root for short. By default, the project folder itself is the content root folder.

Configuring folders in a content root

Within a content root, WebStorm can distinguish between the folders with the source code your edit and the folders with other types of content. By default, any folder is treated as Source and is indicated with Source folder unless you mark it as another type:

  • Tests (Tests folder) folders let you keep code related to testing separately from production code.
  • Resource Root (Resources root) folders contain images, stylesheets, etc. Files in a Resource Root folder can be referenced relative to it instead of specifying full paths.
  • Excluded (Excluded) folders are ignored by code completion, navigation, and inspections. Exclude folders that you don't need at the moment to increase the WebStorm performance.

To configure the category of a folder

  • Right-click the folder in the Project tool window, select Mark Directory as from the context menu, and then select the necessary category.
Choosing the folder category

To restore the previous category of a folder

  • Right-click the folder in the Project tool window, select Mark Directory as from the context menu, and then select Unmark as <current category>. For Excluded folders, select Cancel Exclusion.

Excluding files

If you don't need a file right now but you don't want to completely remove it, you can temporarily exclude the file from the project. Excluded files are ignored by code completion, navigation, and inspections.

  • To exclude a file, right-click it in the Project tool window and select Mark as Plain Text from the menu. The file is marked with the plain text icon icon in the directory tree.
  • To revert the changes, right-click the file and select Mark as <file type> from the menu.

Excluding files and folders by name patterns

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Directories. The Directories page opens.
  2. In the Exclude files field, type the masks that define the names of files and folders to be excluded, for example, *.min.js. Use semicolons as separators.
    If the name of a file matches any of these patterns, the file is treated as excluded. If the name of a folder matches a pattern, all the files in this folder and in its subfolders are marked as excluded.

Working with multiple content roots

You can have several content roots in your projects. This lets you work with files from several directories that do not have a common immediate parent. This is helpful when you use static contents, for example, icons. You can just save them all in a folder and then specify this folder as an extra content root in several projects.

In the Settings/Preferences dialog (Ctrl+Alt+S), click Directories. The Directories page opens.

  • To add a content root, click click Add Content Root in the right-hand pane and then select the required folder in the dialog that opens.
    ws add content root
  • To remove a content root, select it in the right-hand pane and then click icons actions cancel svg next to it. Confirm the deletion. Note that the corresponding folder won't be physically deleted.
Last modified: 14 September 2018