WebStorm 9.0.0 Web Help

File | Settings | Editor | Code Style


Use this page to choose the code style scheme and change it as required. Settings of a code style scheme are automatically applied every time WebStorm generates, refactors, or reformats your code.

The code styles are defined at the project level and at the global level.

Project level

Settings at the project level are grouped under the Project scheme, which is predefined and is marked in bold font. The Project style scheme applies to the current project only.

The default scheme cannot be changed! When any modifications are made, WebStorm automatically creates a copy of the default scheme. If you want to use a different project level scheme, choose the desired scheme and copy its settings to project.

Global level

Settings at the global level are grouped under the predefined Default scheme, and any other scheme created by the user. The global settings are used when the user doesn't want to keep code style settings with the project, and share them.

Item Description
Scheme From this drop-down list, select the scheme to be used. The predefined schemes are shown in bold. The custom schemes, ones created as copies of the predefined schemes, are in plain text.
Manage Click this button to open the Code Style Schemes dialog that lets you manage the schemes.
Reset This link appears in the upper-right corner of the dialog when the current style or scheme are modified. Click this button to discard changes.

Line separators

Item Description
Line Separator (for new files) Use this drop-down list to specify which line separator is to be used in files created by WebStorm. The available options are:
  • System dependent - choose this option to use the default selection.
  • Unix - choose this option to use the Unix line separator.
  • Windows - choose this option to use the Windows line separator.
  • Mac - choose this option to use the Mac line separator.

Refer to the section Configuring Line Separators.

Right Margin (columns) In this text box, specify the number of columns to be used to display pages in the editor.
Wrap when typing reaches right margin Select this check box to ensure that edited text always fits in the specified right margin.

Default indent options

Item Description
Use tab character
  • If this check box is selected, tab characters are used:
    • On pressing the TabTabTabTabTabTabTabTabTabTabTab key
    • For indentation
    • For code reformatting
  • When the check box is cleared, WebStorm uses spaces instead of tabs.
Smart tabs
  • If this check box is selected, WebStorm inserts tabs for indentation and reformatting, but fine alignment to a necessary column is done only via spaces without replacing them with tabs. This is done in order to preserve visual representation of the source code, when the Tab Size is changed.
  • If this check box is cleared, only tabs are used. This means that a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.

The Smart Tabs check box is available if the Use Tab Character check box is selected.

Tab size In this text box, specify the number of spaces included in a tab.
Indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted for each indent level.
Continuation indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted at the next line in case of a construct break.

Formatter control

In this area, specify the markers to limit code fragments that you want to exclude from reformatting, see more in Reformatting Source Code. In the source code, formatting markers are written inside line comments, see Commenting and Uncommenting Blocks of Code .

Item Description
Enable formatter markers in comments
  • If this check box is selected, the fragments of code between the line comments with the formatting markers will not be reformatted but will preserve the original formatting. After you select the check box, the fields below become available and you can specify the character strings to be treated as formatting markers.
  • If the check box is cleared, the formatting markers will be ignored and the code between the line comments with markers will be reformatted.
Markers
Formatter off: In this text box, 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.
Formatter on: In this text box, 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.
Regular expressions Select this check box to use regular expressions instead of specifying the formatting markers explicitly.

Example of using formatting markers

The original source code The code after reformatting

js_formatting_markers_original

When the formatting markers are disabled, the original formatting is broken:

js_formatting_markers_off

When the formatting markers are enabled, the original formatting is preserved:

js_formatting_markers_original

See Also

Concepts:

Procedures:

Reference:

Web Resources: