Code Style. TypeScript
Use this page to configure formatting options for TypeScript files. View the result in the Preview pane on the right.
Tabs and Indents
Use tab character
| An indentation consists of two parts. One part results from nesting code blocks and the other part is determined by alignment. |
In this text box, specify the number of spaces that fits in a tab.
In this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted for each indent level.
In this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted between the elements of an array, in expressions, method declarations, and method calls.
Keep indents on empty lines
If this checkbox is selected, WebStorm retains indents on empty lines as if they contained some code. If the checkbox is cleared, WebStorm deletes the tab characters and spaces on empty lines.
Indent chained methods
| In declarations of functions, the second and further methods in a chain are displayed on a separate line. |
Indent all chained calls in a group
The checkbox is available only when the Indent chained methods checkbox is selected.
Use this tab to specify where you want WebStorm to insert spaces automatically. Select the checkboxes next to the description of relevant locations and check the results in the Preview pane.
Wrapping and braces
In this tab, customize the exceptions, brace placement and alignment options that WebStorm will apply to various code constructs on reformatting the source code. Check the results in the Preview pane.
Hard wrap at
In this field, specify the number of spaces required to the right of an element. If you accept the Default option then the value from the global settings is used.
Wrap on typing
In this field, specify how the edited text is fitted in the specified Hard wrap at field.
Default - choose this option to use the Wrap on typing value from the global settings.
Yes - choose this option to use the value from the Right Margin field.
No - if you choose this option a line can exceed the value specified in the 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.
Keep when reformatting
Use the checkboxes to configure exceptions that WebStorm will make when reformatting the source code. For example, by default, the Line breaks checkbox is selected. If your code contains lines that are shorter than a standard convention, you can convert them by disabling the Line breaks checkbox before reformatting.
A wrapping style applies to various code constructs, specified in the left-hand pane (for example, method call arguments, or assignment statements).
Do not wrap
When this option is selected, no special wrapping style is applied, the nested alignment and braces settings are ignored.
Wrap if long
Select this option to wrap lines going beyond the right margin with proper indentation.
Select this option to wrap all elements in lists so that there is one element per line with proper indentation.
Chop down if long
Select this option to wrap elements in lists that go beyond the right margin so that there is one element per line with proper indentation.
Align when multiline
If this checkbox 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.
Select this checkbox to move the specified character or characters to the next line when the lines are wrapped.
'else' on new line
Use this checkbox to move the corresponding statements or characters to the next line.
New line after
Select this checkbox to move the code after the specified character to a new line.
Special else if treatment
|If this checkbox is selected, |
Indent case branches
If this checkbox is selected, the
|From the drop-down list, choose how to align objects: |
|Choose one of the following options to configure alignment for equality signs: |
| Align 'from' clauses: When this checkbox is selected, WebStorm aligns |
With this option on, WebStorm will align the new code on the fly. Existing
Braces placement options
Braces placement style
| Use this drop-down list to specify the position of the opening brace in class declarations, method declarations, function declarations, and other types of declarations. The available options are: |
|From this drop-down list, choose the braces introduction method for |
Use this tab to define where and how many blank lines you want WebStorm to retain and insert in your code after reformatting. The results are displayed in the Preview pane.
Keep Maximum Blank Lines
In this area, specify the number of extra blank lines to be kept after reformatting.
Minimum Blank Lines
In this area, configure whether to have or not to have extra empty lines after the blocks of
Use the drop-down lists in this tab to form directives in automatic insertion of terminating semicolons, single and double quotes, and trailing commas.
Semicolon to terminate statements
| 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: |
On this tab, configure the code style for generated code.
Use 'public' modifier
| Use this checkbox to have the public access modifier inserted or omitted in the generated code.|
For example, during generation of a public method from the following:
| In this area: |
| In this area, configure code style for generated comments. |
Merge imports for members from the same module
Use paths relative to
|When this checkbox is selected, WebStorm calculates import paths using the |
For example, if your project is structured as follows:
With the checkbox selected, WebStorm generates the following import statement:
If the checkbox is cleared, the following import statement is generated:
Use directory import (Node-style module resolution)
Use .js file extension in module name
When this checkbox is selected, WebStorm automatically adds the
Do not import exactly from
| In this field, specify the exact paths that WebStorm should skip during automatic import of a symbol. Instead, WebStorm will look for alternative paths to import the symbol. |
This is particularly useful for modules that allow importing their submodules instead of the entire module. For example, to prefer imports like
To manage the list of modules to skip:
Sort imported members
Sort imports by modules
In this tab, define a set of rules to rearrange your TypeScript code according to your preferences.
|Use this area to set the grouping rules. |
|Use this area to define elements order as a list of rules, where every rule has a set of matches such as modifier or type. |
|Use this area to create a new matching rule or edit an existing one. You can select from the following filters: |
This icon appears when you select Order by Name from the Order list. The icon indicates that the items in this rule are sorted alphabetically.
The link appears in the upper-right corner of the page, when applicable. Click this link and choose the language to be used as the base for the current language code style.
To return to the initial set of code style settings and discard the changes, click Reset.