for Windows and Linux
for macOS
Use this page to configure formatting options for TypeScript files. View the result in the
Preview pane on the right.
On this page:
Tabs and Indents
| Item | Description |
|---|
| 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, IntelliJ IDEA 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 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 between the elements
of an array, in expressions, method declarations and method calls. |
| Keep indents on empty lines | If this check box is selected, then IntelliJ IDEA will keep indents on the empty lines as if they
contained some code.
If this check box is not selected, IntelliJ IDEA will delete the tab characters and spaces. |
|
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 IntelliJ IDEA 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 IntelliJ IDEA 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 IntelliJ IDEA uses the Wrap on typing
option that is specified in the global settings.
- Yes - in this case IntelliJ IDEA 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 IntelliJ IDEA 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.
Wrapping options
The wrapping style applies to the various code constructs, specified in the left-hand pane (for example, method call arguments, or assignment statements).
| Item | Description |
|---|
| Wrapping style | From this drop-down list, select the desired wrapping style:
|
Alignment options
| Item | Description |
|---|
| Align when multiline | If 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 line | Select this check box to have the specified character or characters moved to the next line
when the lines are wrapped. |
| 'else' on new line | Use 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 treatment | If 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
| Item | Description |
|---|
|
Braces placement style
|
Use this drop-down list to specify the position of the opening brace in
class declarations,
method 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 braces | From 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 IntelliJ IDEA analyzes the number of lines in
the entire statement but not only its condition.
-
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 IntelliJ IDEA 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.
| Item | Description |
|---|
| Keep Maximum Blank Lines | In this area, specify the number of blank lines to be kept after reformatting in the specified locations. |
| In code | Use 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
| Item | Description |
|---|
| Align object properties | From 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.
|
| Use semicolon to terminate statements | Select this check box to have statements terminated with a semicolon. |
|
Generated Code
|
In this area, configure the code style in import statements,
see Creating Imports, section Importing TypeScript Symbols.
- String literal type: from this drop-down list,
choose the type of quotes to be used in
import statements.
The available options are Single quotes and Double quotes.
|
|
Use 'public' modifier
|
Use this check box to have the public access modifier inserted or omitted in the generated code.
For example, during generation of a public method from the following:
class Test {
public test():void {
var x = 1;
}
}-
If the check box is selected, the public access modifier is automatically inserted in the generated code:
class Test {
public test():void {
this.extracted();
}
extracted(){
var x = 1;
}
} -
If the check box is cleared, the public access modifier is omitted during code generation:
class Test {
public test():void {
this.extracted();
}
public extracted(){
var x = 1;
}
}
See TypeScript Language Handbook, chapter Private/Public Modifiers .
|
Imports
| Item | Description |
|---|
| 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 .
-
When this check box is cleared, for each imported symbol a separate import statement is generated.
|
Use paths relative to tsconfig.json | When this check box is selected, IntelliJ IDEA calculates import paths using the
tsconfig.json file as the root.
When this check box is cleared, IntelliJ IDEA calculates import paths relative to the project root.
For example, if your project is structured as follows:
With the check box selected, IntelliJ IDEA generates the following import statement:
import {ClassName} from 'directory_2/file_2'If the check box is cleared, the following import statement is generated:
import {ClassName} from '../directory_2/file_2' |
|
Use directory import (Node-style module resolution)
|
|
|
Do not import exactly from
|
In this field, specify the exact paths that IntelliJ IDEA should skip during automatic import of a symbol.
Instead, IntelliJ IDEA 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 import {Observable} from 'rxjs/Observable'
to a more general import {Observable} from 'rxjs', add rxjs to the list.
To manage the list of modules to skip:
-
Click
 to the right of the field.
-
In the Change modules dialog box that opens, click
and specify the module name in the Add module dialog box.
To remove a module from the list, select it and click  .
|
|
Sort imported members
|
-
When this check box is selected, IntelliJ IDEA 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 .
-
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 .
-
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 .
|
Set from...
Click this link to reveal the list of languages to be used as the base for the current language code style.
So doing, only the settings that are applicable to the current language are taken. All the other settings
are not affected.
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
Procedures:
Reference:
Language and Framework-Specific Guidelines: