CLion 2017.1 Help

Code Style. JavaScript

File | Settings | Editor | Code Style | JavaScript for Windows and Linux
CLion | Preferences | Editor | Code Style | JavaScript for macOS


Use this page to configure formatting options for JavaScript files. View the result in the Preview pane on the right.

On this page:

Tabs and Indents

ItemDescription
Use tab character
  • If this check box is selected, tab characters are used:
    • On pressing the Tab key
    • For indentation
    • For code reformatting
  • When the check box is cleared, CLion uses spaces instead of tabs.
Smart tabs
  • If this check box is selected, the part of indentation defined by the nesting of code blocks, is made of the tabs and (if necessary) spaces, while the part of indentation defined by the alignment is made only of spaces.
  • 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 sizeIn this text box, specify the number of spaces included in a tab.
IndentIn 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 indentIn this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted between the elements of an array, in expressions, method declarations and method calls.
Indent chained methods In declarations of functions, the second and further methods in a chain are displayed on a separate line.
  • When the check box is selected, the second and further methods in a chain are aligned with the first call.
  • When the check box is cleared, the second and further methods in a chain are aligned with the object on which they are invoked.
Indent all chained calls in a group The check box is available only when the Indent chained methods check box is selected.

Spaces

Use this tab to specify where you want spaces in your code. To have CLion automatically insert a space at a location, select the check box next to this location in the list. The results are displayed in the Preview pane.

Wrapping and braces

In this tab, customize the code style options, which CLion will apply on reformatting the source code. The left-hand pane contains the list of exceptions (Keep when reformatting), and placement and alignment options for the various code constructs (lists, statements, operations, annotations, etc.) The right-hand pane shows preview.

Alignment takes precedence over indentation options.

Right Margin (columns)

Use Right Margin field to specify a margin space required on the right side of an element. If you select Default option then a value of the right margin from the global settings is used.

Wrap on typing

Use Wrap on typing settings to specify how the edited text is fitted in the specified Right margin. You can select one the following options:

  • Default - in this case CLion uses the Wrap on typing option that is specified in the global settings.
  • Yes - in this case CLion uses the value specified in the Right Margin field.
  • No - in this case this option is switched off and a line can exceed the value specified in the right margin.

Keep when reformatting

Use the check boxes to configure exceptions that CLion will make when reformatting the source code. For example, by default, the Line breaks check box is selected. If your code contains lines that are shorter than a standard convention, you can convert them by disabling the Line breaks check box before you reformat the source code.

Alignment options

ItemDescription
Align when multilineIf this check box is selected, a code construct starts at the same column on each next line. Otherwise, the position of a code construct is determined by the current indentation level.
<character(s)> on next lineSelect this check box to have the specified character or characters moved to the next line when the lines are wrapped.
'else' on new lineUse this check box to have the corresponding statements or characters moved to the next line.
New line after <character> Select this check box to have the code after the specified character moved to a new line.
Special else if treatmentIf this check box is selected, else if statements are located in the same line.

Otherwise, else if statements are moved to the next line to the corresponding indent level.

Indent case branches If this check box is selected, the case statement is located at the corresponding indent level. Otherwise, case statement is placed at the same indent level with switch.

Braces placement options

ItemDescription
Braces placement style Use this drop-down list to specify the position of the opening brace in class declarations, function declarations and other types of declarations. The available options are:
  • End of line - select this option to have the opening brace placed at the declaration line end.
  • Next line if wrapped - select this option to have the opening brace placed at the beginning of the line after the multiline declaration line.
  • Next line - select this option to have the opening brace placed at the beginning of the line after the declaration line.
  • Next line shifted - select this option to have the opening brace placed at the line after the declaration line being shifted to the corresponding indent level.
  • Next line each shifted - select this option to have the opening brace placed at the line after the declaration line being shifted to the corresponding indent level, and have the next line shifted to the next indent level as well.
Force bracesFrom this drop-down list, choose the braces introduction method for if, for, while, and do () while statements. The available options are:
  • Do not force - select this option to suppress introducing braces automatically.
  • When multiline - select this option to have braces introduced automatically, if a statement occupies more than one line. Note that CLion analyzes the number of lines in the entire statement but not only its condition.

    For example, if the code is

    int foo (int Days) { if ((Days % 10) == 3) return 1; else return 0; }
    CLion will insert braces automatically:
    int foo (int Days) { if ((Days % 10) == 3) { return 1; } else { return 0; } }

  • Always - select this check box to have braces always introduced automatically.

Blank lines

Use this tab to define where and how many blank lines you want CLion to retain and insert in your code after reformatting. For each type of location, specify the number of blank lines to be inserted. The results are displayed in the Preview pane.

ItemDescription
Keep Maximum Blank LinesIn this area, specify the number of blank lines to be kept after reformatting in the specified locations.
In codeUse this field to set the number of the blank lines.

Punctuation

Use the drop-down lists in this tab to form directives in automatic insertion of terminating semicolons, single and double quotes, and trailing commas.

Item Description
Semicolon to terminate statements
  • Use semicolon to terminate statements in new code
  • Use semicolon to terminate statements always
  • Don't use semicolon to terminate statements in new code
  • Don't use semicolon to terminate statements always
Quotes
  • Use double quotes in new code
  • Use double quotes always
  • Use single quotes in new code
  • Use single quotes always
Trailing comma Use this drop-down list to configure whether you want to use trailing commas in objects, arrays, and for the parameters in method definitions and calls. The available options are:
  • Keep
  • Remove
  • Add when multiline

Other

ItemDescription
Formatting options
Align object propertiesFrom the drop-down list, select the type of objects' alignment:
  • Do not align: the attributes in sequential lines will be not aligned.
  • On colon: the attributes in sequential lines will be aligned against the colon.
  • On value: the attributes in sequential lines will be aligned against the value.
Align 'var' statements and assignmentsClick one of the following radio-buttons to choose the way equality signs are aligned:
  • Do not align: the equality signs are not aligned.
  • Align multiline 'var' statements: the multiline var statements are aligned against the equality signs by inserting additional spaces.
  • Align multiple 'var' statements and assignments: the multiple var statements are aligned against the equality signs by inserting additional spaces.
Coding style
Use semicolon to terminate statementsSelect this check box to have statements terminated with a semicolon.
Comment code
Line comment at first columnSelect this check box to have a line comment start at first column.
Add a space at comment startIf this check box is selected, a space will be inserted between a line comment character and the first character of a commented line. So doing, the option Line comment at first column must be unselected.
Align C-style commentsIf this check box is selected, the multiline C-style comments are aligned against the asterisk. Otherwise, the multiline comments are not aligned.

Imports

ItemDescription
Merge imports for members from the same module
  • When this check box is selected, imported symbols from the same module are listed in one import statement with a comma as separator. The members are listed in the order in which they are imported. To have them listed alphabetically, select the Sort imported members check box and run Code | Optimize Imports.
  • When this check box is cleared, for each imported symbol a separate import statement is generated.
Use paths relative to the project, resource or sources roots This option is applied during automatic generation of import statements in JavaScript code.
  • When this check box is selected, CLion suggests paths relative to the project root, resource root, or sources root.
  • By default, this check box is cleared and CLion suggests paths relative to the current file.
Sort imported members
  • When this check box is selected, CLion lists the imported members in merged import statements alphabetically. Note that the members are listed comma-separated in the order they are imported and re-sorted only when you run Code | Optimize Imports.
  • When this check box is cleared, the members in merged import statements are always listed comma-separated in the order they are imported.
Sort imports by modules
  • When this check box is selected, import statements are re-sorted alphabetically by the module names when you run Code | Optimize Imports.
  • When this check box is cleared, import statements are always shown in the order they are generated and this order is not changed after you run Code | Optimize Imports.

Set from...

Click this link to choose the base for the current language default code style from the pop-up list, that appears. The list contains two options:

  • Language: choose this option to inherit the coding style settings from another language. Select the source language from the list, that opens. So doing, only the settings that are applicable to the current language are taken. All the other settings are not affected.
  • Predefined code style: choose this option to use the coding standards defined for a specific framework. Select one of the following frameworks from the list:

This link appears in the upper-right corner of the language-specific code style page, when applicable.

Click Reset to discard changes and return to the initial set of code style settings.

See Also

Last modified: 19 July 2017