Code Style Assistance in TypeScript

Naming Style

ReSharper helps you define, control, and apply desired naming styles for symbols in your code. There is a set of rules, each of which targets specific identifiers with the set of constraints . Each rule can have one or more associated styles that define capitalization of compound words, underscores, suffixes, prefixes, and so on.

These rules are taken into account when ReSharper produces new code with code completion and code generation features, applies code templates and performs refactorings. ReSharper also helps you detect and fix violations of naming rules. If necessary, the automatic checkup of naming rules can be configured or disabled.

For more information about configuring and applying naming style, refer to Naming style

Managing and applying code formatting rules

An important aspect of code style is how to format the code, that is, how to use whitespaces, tabs, and line breaks to arrange code elements, whether and how to use tabs for indents, whether and how to wrap long lines, and so on.

The extensive set of ReSharper code formatting rules has a default configuration that takes into account default Visual Studio formatting options as well as numerous best practices. You can configure every detail of formatting rules and enforce the rules in your code. These rules are applied when ReSharper produces new code with code completion and code generation features, applies code templates and performs refactorings. The formatting rules can also be applied to the existing code in the current selection, current file, or in a larger scope up to the entire solution.

ReSharper stores formatting preferences using the mechanism of shared settings. You can configure formatting rules in options pages under the Code Editing | TypeScript | Formatting Style group. You can also store and share formatting settings in the EditorConfig and Clang-Format files.

Quotes style

TypeScript specification allows you to use both single (') and double (") quotes for handling string literals. It is a good idea to stick to the same quote style within your project or solution. To do so, you can configure your preference as well as the severity level of the corresponding code inspection on the Code Editing | TypeScript | Syntax Style page of ReSharper options. ReSharper will detect and highlight the code that differs from your preference. To enforce this preference in the existing codebase, either run code cleanup with one of the built-in profiles Full Cleanup or Reformat & Apply Syntax Style, or create and run a custom profile where the corresponding option selected.

This preference is shared with the same preference of JavaScript, so when you change it in one language the preference in other language changes too.

Module import style

There are different approaches to importing types from other modules: you can either add module aliases or use fully qualified type names. ReSharper helps you apply the preferred way of importing types in the desired scope.

If necessary, you can use a custom profile for applying module import style. To do so, create a custom cleanup profile and tick the Optimize 'import' statements checkbox in the TypeScript specific profile settings.

Optimizing reference comments

ReSharper helps you detect and remove unused reference comments. To optimize reference comments, Run code cleanup in the desired scope with the 'Full Cleanup' profile or create a custom cleanup profile and tick the Optimize reference comments checkbox in the TypeScript specific profile settings.

Terminating statements

JavaScript/TypeScript do not require the semicolon to terminate a statement if the statement ends with a line break or if there is only one statement enclosed in braces. However, it is often recommended to use semicolon after each statement (refer to this StackOverflow thread for example). ReSharper can help you add semicolons automatically.

To terminate statements in specific file, project, or solution, run code cleanup in the desired scope with the 'Full cleanup' profile or with a custom profile where the Terminate statement is selected in the JavaScript/TypeScript section.

Arranging modifiers

If you prefer to use or not to use explicit 'public' modifier, you can configure your preference as well as the severity level of the corresponding code inspection on the Code Editing | TypeScript | Syntax Style page of ReSharper options. ReSharper will detect and highlight the code that differs from your preference. To enforce this preference in the existing codebase, either run code cleanup with one of the built-in profiles Full Cleanup or Reformat & Apply Syntax Style, or create and run a custom profile where the corresponding option selected.

Implicit/Explicit Typing

TypeScript specification allows specifying types implicitly or explicitly as well as use 'any' keyword for types. Using ReSharper code style assistance, you can define whether and when types should be specified explicitly and whether the implicit 'any' is allowed.

Use the controls in the Type specification group on the Code Editing | TypeScript | Syntax Style page of ReSharper options to specify your preferences.

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.

To apply your implicit/explicit typing preferences in a specific file, project, or solution, run code cleanup in the desired scope with the 'Full cleanup' profile or with a custom profile where the Synchronize type annotation presence with code style and Add explicit 'any' type annotation if needed checkboxes are selected in the TypeScript specific section.

Your implicit/explicit typing preferences are also taken into account by ReSharper's code inspection.