Code Style. TypeScript
for Windows and Linux
for macOS
Use this page to configure formatting options for TypeScript files. View the result in the Preview pane.
On this page:
- Tabs and Indents
- Spaces
- Wrapping and braces
- Blank Lines
- Punctuation
- Code Generation
- Imports
- Arrangement
- Set from
Tabs and Indents
Spaces
Use this tab to specify where you want PyCharm to insert spaces automatically. Select the check boxes next to the decription 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 PyCharm will apply to various code constructs on reformatting the source code. Check the results in the Preview pane.
Right Margin (columns)
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 Right margin.
- 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.
Keep when reformatting
Use the check boxes to configure exceptions that PyCharm 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 reformatting.
Wrapping options
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. |
Wrap always | 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. |
Blank Lines
Use this tab to define where and how many blank lines you want PyCharm 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 import statements and around classes, fields, methods, or functions.In the text box next to each option, specify the minimum number of extra blank lines to be left. |
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.
Semicolon to terminate statements | |
Quotes | |
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: |
Code Generation
On this tab, configure the code style for generated code.
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;
}
}
|
Naming conventions | In this area, configure or accept default prefixes that will be added automatically to the names of generated fields and properties. |
Comment Code | In this area, configure code style for generated comments.
|
Imports
Merge imports for members from the same module |
|
Use paths relative to tsconfig.json | When this check box is selected, PyCharm calculates import paths using the tsconfig.json file as the root. When this check box is cleared, PyCharm calculates import paths relative to the project root. For example, if your project is structured as follows: With the check box selected, PyCharm 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 PyCharm should skip during automatic import of a symbol. Instead, PyCharm 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 |
Arrangement
In this tab, define a set of rules to rearrange your TypeScript code according to your preferences.
Grouping Rules | Use this area to set the grouping rules. |
Matching 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.
|
Empty rule | 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. |
Set from
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.