WebStorm 2021.1 Help

Set file type associations

WebStorm recognizes a default set of file types. Such files are parsed and highlighted according to the syntax of the corresponding languages.

If you are working with a file type that WebStorm does not recognize (for example, if it's a proprietary in-house developed file type) you can also create a custom file type.

You can configure how the IDE will parse the files by defining highlighting schemes for keywords, comments, numbers, and so on. You can also associate each file type with an extension to help the IDE identify the files of the custom formats.

Create a new file type

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | File Types.

  2. In the Recognized File Types section, click the Add button, specify the name of the new type, and provide a description.

  3. In the Syntax Highlighting section, configure case sensitivity, brace matching settings, and specify ways of defining comments:

    • Line comment: specify characters that indicate the beginning of a single-line comment.

    • Only at line start: characters that indicate the beginning of a line comment are recognized as a comment if they are located in the beginning of a line.

    • Block comment start, Block comment end: specify characters that indicate the beginning and the end of a block comment.

    • Hex prefix: specify characters that indicate that the subsequent value is a hexadecimal number (for example, 0x).

    • Number postfixes: specify characters that indicate which numeric system or unit is used. A postfix is a trailing string of characters (for example, e-3, kg).

    • Support paired braces, Support paired brackets, Support paired parens, Support string escapes: select these checkboxes to highlight paired braces, brackets, parentheses, and string escapes.

  4. In the Keywords section, you can specify up to four lists of keywords. Keywords of each list will be highlighted differently in the editor and will be auto-completed.

  5. The Ignore case checkbox indicates whether the language in files of the custom format is case-sensitive.

    Creating a new file type

Configure shebang commands for file types

WebStorm can recognize file types by the path specified on the shebang line, mark files with corresponding icons regardless of their extensions, and provide language-aware syntax highlighting. A shebang is a combination of characters in a script file followed by a path to the interpreter program that should execute this script. It starts with #! and it's always located on the first line of a script file.

Configuring a shebang command for CoffeeScript
  1. Press Ctrl+Alt+S to open IDE settings and select Editor | File Types.

  2. From the Recognized File Types list, select the file type for which you want to configure a command.

  3. In the HashBang patterns area, click the Add button (Add HashBang Pattern).

  4. In the dialog that opens, specify the path to the interpreter and click OK.

  5. Apply the changes and close the dialog.

Register a new file type association

If WebStorm cannot identify the type of the file that you are trying to open or create, it shows you the Register New File Type Association dialog in which you can choose the way you want to process this file.

Registering a new file type

If the dialog doesn't appear automatically, right-click the necessary file in the Project tool window and select Associate with File Type from the context menu. Alternatively, select the file in the Project tool window and go to File | File Properties | Associate with File Type.

In the Register New File Type Association dialog, select the necessary options:

  1. From the File pattern list, select whether you want to specify a type for the current file (file.extension) or for all files with this extension (*.extension).

  2. Select one of the following options:

    • Open matching files as text and auto-detect file type by content: open the file without an extension as a text file and identify its type by the content, for example, by the shebang line.

    • Open matching files in WebStorm: associate the file with one of the existing file types. You can change this association later in the settings.

    • Open matching files in associated application: open the file in the default application. For example, PDF files are opened in the default PDF viewer. The default application is configured in your system systems.

      You can find all extensions associated with external applications in the Files opened in associated applications list in Settings/ Preferences | Editor | File Types.

      There, you can also associate file types with WebStorm to open the selected types of files in the IDE by default.

  3. Click OK to apply the settings.

Change a file type association

You can associate a file type with another extension, a file, or a group of files or remove an association.

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | File Types.

  2. From the Recognized File Types list, select the file type that you want to associate with another extension or a group of files.

  3. Use the File name patterns section to make the necessary changes. You can add a new pattern (the Add button), remove an existing one (the Remove button), or modify an existing pattern (the Edit button).

    Configuring a custom extension

Open files in WebStorm by default

You can make WebStorm the default application for opening specific file types. The IDE remembers these associations and automatically applies them to the next WebStorm instance when you upgrade to a newer major version.

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | File Types.

  2. Click the Associate File Types with WebStorm button and select the file extensions you want to open with the IDE in the dialog that opens.

    Associating file types with the IDE
  3. Click OK and close the dialog.

    If you're using macOS, restart your computer to apply the changes.

Ignore files and folders

In WebStorm, there's a list of files and folders that are completely excluded from any kind of processing. Out of the box, this list includes temporary files, service files related to version control systems, and so on:

*.pyc;*.pyo;*.rbc;*.yarb;*~;.DS_Store;.git;.hg;.svn;CVS;__pycache__;_svn;vssver.scc;vssver2.scc;

Modify the list of ignored files and folders

  1. Press Ctrl+Alt+S to open IDE settings and select Editor | File Types.

  2. Switch to the Ignored Files and Folders tab.

    You can add a new extension (the Add button), remove an existing one (the Remove button), or modify an existing extension (the Edit button).

  3. Apply the changes and close the dialog.

Adding files and folders to the list of ignored items
Last modified: 11 August 2021