Code Style

Last modified: 26 May 2024

File | Settings | Editor | Code Style for Windows and Linux

WebStorm | Settings | Editor | Code Style for macOS

the Settings icon

Scheme

In this area, choose the code style scheme and change it as required. Code style scheme settings are automatically applied every time WebStorm generates, refactors, or reformats your code.

The IDE comes with two pre-defined schemes: the Project scheme and the Default scheme.

  • In the Project scheme, the settings that you configure apply only to your current project.

    These settings are stored in the codeStyles folder under .idea and are shared through VCS together with the project.

    The IDE creates the folder after you modify code style settings for your project.

  • In the Default scheme (IDE-level scheme), the settings that you configure apply to all existing projects that have the Default code style scheme selected.

    These settings are stored in the codestyles folder under the WebStorm configuration directory and are not shared through VCS.

If you want to use the project code style scheme as your default scheme, you can copy it to the IDE level. The other way around is also possible: you can overwrite your current project settings with the settings from an IDE-level scheme and share them with other members of your team.

Item

Description

Scheme

From this list, select the scheme to be used. The predefined schemes are shown bold. The custom schemes, ones created as copies of the predefined schemes, are in plain text. The location where the scheme is stored is written next to each scheme, for example, the Default scheme is stored in the IDE, the Project scheme is stored in the project.

Show Scheme Actions

Click this button to invoke the list of commands to manage the schemes:

  • Copy to IDE: select this option to copy the scheme settings to WebStorm.

    tip

    The option is available only for the Project scheme.

  • Export: select this option to export the selected scheme in the IntelliJ IDEA code style XML or EditorConfig format (if the EditorConfig plugin is enabled) .

    Export code style scheme

    Learn more from Manage code style on a directory level with EditorConfig.

    tip

    The option is available for the Project and IDE schemes.

  • Import Scheme: select this option to import the scheme of the selected type from the specified location.

    Import the scheme

    tip

    The option is available for the Project and IDE schemes.

  • Copy to Project: select this option to overwrite your current project code style settings with the settings from the selected IDE code style scheme.

    tip

    The option is available only for IDE schemes.

  • Duplicate: select this option to create a copy of the selected scheme.

    tip

    The option is available only for IDE schemes.

  • Reset: select this option to reset the default or bundled color scheme to the initial defaults shipped with WebStorm. This command becomes available only if some changes have been done.

    tip

    The option is available only for IDE schemes.

  • Rename: select this option to change the name of the selected custom scheme. Press to save changes, or to cancel.

    tip

    The option is available only for IDE schemes.

General

Line Separators

WebStorm lets you configure line separator and indentation options for various languages. When reformatting source code, WebStorm will apply the specified indentation behavior and skip the sections denoted with the special formatting off/on markers.

Item

Description

Line Separator

Use this list to specify which line separator is to be used in files created by WebStorm. The available options are:

  • System-Dependent: select this option to use the default selection.

  • Unix and macOS (\n): select this option to use the Unix and macOS line separator.

  • Windows (\r\n): select this option to use the Windows line separator.

  • Classic Mac OS (\r): select this option to use the \r line separator, which was used in Classic Mac OS (up to Mac OS 9).

Hard wrap at

In this field, specify the number of columns to be used to display pages in the editor.

Wrap on typing

Select this checkbox to ensure that edited text always fits in the specified right margin.

Visual guides

In this field, specify multiple right margins. You can leave a default value or enter the number of spaces for your margin. If you want to specify several margins, enter numbers separated by comma.

Indents detection

Select Detect and use existing file indents for editing to detect the indentation style in the current file and use this style instead of the indents specified in the Code Style settings for the specific language.

WebStorm displays the indentation information in the status bar of the editor. You can click the indentation information to see the available actions, such as enable or disable this option, and change the current indentation to the ones specified in the Code Style settings for the specific language.

Status bar indents options

EditorConfig

Select the Enable EditorConfig support checkbox to use EditorConfig for code style. In this case you can specify code style settings that override the IDE settings and have different code styles within a project.

If you decide to use IDE settings after creating the EditorConfig settings file, you need to clear the Enable EditorConfig support checkbox.

Formatter

In this area, specify the markers to limit code fragments that you want to exclude from reformatting. In the source code, formatting markers are written inside line comments.

Item

Description

Do not format

In this field, specify a glob pattern with the names of files and directories that you want to exclude from reformatting, code arrangement, and import optimization, for example: *.{html,htm}.

You can specify several glob patterns separated with a semicolon ;.

Use the asterisk * wildcard to disable reformatting altogether.

Turn formatter on/off with markers in code comments

  • If this option is enabled, fragments of code between line comments with the formatting markers will be reformatted according to these markers: code fragments with on-markers will be reformatted, and the fragments with off-markers will remain intact after you reformat your code. See Example of using formatting markers.

    After you select this checkbox, the fields below become available, and you can specify the character strings to be treated as formatting markers.

  • If this option is disabled, the formatting markers will be ignored and the code between the line comments with markers will be reformatted.

Off:

In this field, specify the character string that will indicate the beginning of a code fragment which you want to exclude from reformatting. Type a character string with the @ symbol in preposition or leave the predefined value @formatter:off.

On:

In this field, specify the character string that will indicate the end of a code fragment which you want to exclude from reformatting. Type a character string with the @ symbol in preposition or leave the predefined value @formatter:on.

Enable regular expressions in formatter markers

Select this checkbox to use regular expressions instead of specifying the formatting markers explicitly. WebStorm matches formatter on/off markers using the regular expression specified instead of the exact string.

For example, using regular expressions allows you to have several markers for enabling the formatter and for disabling it. In that case, you can use the following regular expressions: @formatter:(off|disable|no) and @formatter:(on|enable|yes).

See Example of using formatting markers for a demo.

Example of using formatting markers

https://resources.jetbrains.com/help/img/idea/2024.1/ws_formatter_settings_region_on_off.png
Gif

The example shows two code fragments. One of them, line 2 - line 8, is enclosed in the @formatter :off and @formatter:on markers while the other one, line 11 - line 17, is not.

Formatting markers

See also

Procedures