Code Style. TypeScript

On this page of Rider settings, you can configure various aspects of code style in TypeScript. Code style preferences are grouped in the following tabs:

Tabs and Indents
Naming
Code Style
Spaces
Line Breaks
Braces Layout
Other

Tabs and Indents

On this tab, you can specify how Rider should format indents in your code when you type or when you reformat existing code.

Naming

On this tab, you can configure symbol naming rules for TypeScript.

Rider helps you define, control, and apply naming style for symbols in your code. Naming style is implemented as a set of rules, each of which targets specific identifiers with the set of constraints (e.g. a rule can target static private readonly fields). Each rule can have one or more associated styles that define suffixes, prefixes, capitalization of compound words, etc.

These rules are taken into account when Rider suggests symbol names in code completion, generates new members, applies code templates and performs refactorings. Rider also helps you detect and fix violations of naming rules. If necessary, the automatic checkup of naming rules can be configured or disabled.

Code Style

Preferences configurable on this tab affect the behaviour of specific Code Style and Cleanup features. The preferences are taken into account when Rider applies refactorings, code templates or produces generated code. They can also be applied to the existing code by using code cleanup with the corresponding settings.

The preferences with the Notify with selector have corresponding code inspections that notify you if this aspect of the code style in the inspected scope differs from the the preferred style. Using the selectors, you can configure severity levels of the inspections.

Item	Description
Quotes (inherited from JavaScript)	The preference in this section defines whether apostrophe (') or quote (") should be used as a quote symbol. This preference is shared with the corresponding preference for JavaScript, i.e. if you change it here, the same preference on the Code Editing \| JavaScript \| Code Style page of Rider options it also changed.
Modifiers	The preference in this section defines whether the 'public' modifier should be used explicitly.
Aliases	Preferences in this section define how to handle aliases. Prefer adding module aliases... specifies whether to use non-qualified type names and add the necessary module aliases or use fully qualified type names. Relative file reference style in 'require' specifies whether or not to use the leading `./` characters. For example, `import X = require("file1")` or `import X = require("./file1")`. If you choose Relative to root folder, you can specify the path to the root folder on the Code Editing \| TypeScript \| Generated Code page of Rider options.
Type specification	Preferences in this section define whether and when types should be specified explicitly and whether the implicit 'any' is allowed. The preference of using implicit 'any' can also be configured in project settings. If the implicit 'any' types are not allowed in the project settings, they are always highlighted as errors independently of your code style preferences.

Spaces

This tab is used to configure automatic insertion/deletion of spaces in certain positions of your source code. You can adjust the values and check the preview pane at the bottom of the page to see how your preferences affect the code.

Line Breaks

Use this tab to configure how Rider should add or remove line breaks before/after specific language constructions and whether to wrap long lines exceeding the length specified by the Right margin (columns). Options in the Preserve Existing Formatting section are only applied when Rider reformats existing code while the remaining sections contain options that also take effect when you type new code. You can adjust the values and check the preview pane at the bottom of the page to see how your preferences affect the code.

Braces Layout

Use this tab to adjust the way Rider arranges braces when it generates and reformats your code; in particular, there are several ways to position braces after if or for operators.

For every item, there is a preview pane in the bottom part of the page where you can observe changes after tweaking specific preferences.

Other

This tab helps configure a number of additional settings that control how Rider treats new code and reformats existing code. You can adjust the values and check the preview pane at the bottom of the page to see how your preferences affect the code.

Last modified: 11 October 2017