WebStorm 2017.1 Help

Code Style

File | Settings | Editor | Code Style for Windows and Linux
WebStorm | Preferences | Editor | Code Style for macOS
Ctrl+Alt+S
/help/img/idea/2017.1/settings.png


On this page:

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.

Code styles are defined at the project level and at the IDE level (global).

  • At the Project level, settings are grouped under the Project scheme, which is predefined and is marked in bold. The Project style scheme is applied to the current project only.

    You can copy the Project scheme to the IDE level, using the Copy to IDE... command.

  • At the IDE level, settings are grouped under the predefined Default scheme (marked in bold), and any other scheme created by the user by the Duplicate command (marked as plain text). Global settings are used when the user doesn't want to keep code style settings with the project and share them.

    You can copy the IDE scheme to the current project, using the Copy to Project... command.

ItemDescription
SchemeFrom this drop-down 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.
/help/img/idea/2017.1/cogwheel_black_with_arrow.pngClick this button to invoke the drop-down list of commands to manage the schemes:
ItemDescriptionAvailable for
Copy to IDE...Choose this command to copy the scheme settings to the IDE.Project
Export...Choose this command to export the selected scheme to an xml file in the selected location:
/help/img/idea/2017.1/export_scheme.png
Project and IDE
Import Scheme...Choose this command to import the scheme of the selected type from the specified location:
/help/img/idea/2017.1/import_scheme.png
Project and IDE
Copy to Project...Choose this command to copy the scheme settings to be stored with a project. IDE
Duplicate...Choose this command to create a copy of the selected scheme.IDE
ResetChoose this command 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.IDE
RenameChoose this command to change the name of the selected custom scheme. Press Enter to save changes, or Escape to cancel.Custom schemes

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.
ItemDescription
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 and macOS (\n) - choose this option to use the Unix and macOS line separator.
  • Windows (\r\n) - choose this option to use the Windows line separator.
  • Classic Mac (\r) - choose this option to use the Classic Mac line separator.

Refer to 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 marginSelect this check box to ensure that edited text always fits in the specified right margin.

Indents Detection

Use this area to specify the default options for indentation.

ItemDescription
Detect and use existing file indents for editingSelect this check box for WebStorm to detect the existing indents in a file and use them for editing instead of the indents specified in the Code Style settings for the specific language.
Show notifications about detected indentsSelect this check box to show a notification if WebStorm detects indents that are different from the ones specified in the Code Style settings for the specific language.

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.

ItemDescription
Enable formatter markers in comments
  • If this check box is selected, fragments of code between line comments with the formatting markers will not be reformatted and will preserve the original formatting. After you select this 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 expressionsSelect this check box 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.

Formatting markers usage example

The original source code The code after reformatting
/help/img/idea/2017.1/js_formatting_markers_original.png
When the formatting markers are disabled, the original formatting is broken:
/help/img/idea/2017.1/js_formatting_markers_off.png

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

/help/img/idea/2017.1/js_formatting_markers_original.png

EditorConfig

In this area enable the support of the EditorConfig plugin.

ItemDescription
Enable EditorConfig supportSelect this check box to enable the EditorConfig plugin support. In this case you can specify your own code style settings that override the IDE settings. However, if you decide to use IDE settings after creating the EditorConfig settings file then you need clear the Enable EditConfig support check box. See also Configuring Code Style procedure.
ExportClick this button if you want to export the current IDE code style settings into the .editconfig file.

See Also

Last modified: 28 April 2017