Code Style Assistance in TypeScript
ReSharper provides a lot of features for keeping your code neat and clean. Being tightly interwoven with the majority of other ReSharper's features, they help you produce code and change existing codebases according to the specific code style. The code style, which includes naming standards, formatting rules, and many other tiny aspects can be configured to a very detailed level and shared across your team.
ReSharper provides the following code style assistance features in TypeScript:
- Naming Style
- Code formatting rules
- Quotes style
- Module import style
- Optimizing reference comments
- Terminating statements
- Arranging modifiers
- Implicit/Explicit Typing
ReSharper 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 ReSharper suggests symbol names in code completion, generates new members, 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 on configuring and applying naming style, see Naming Style
Code formatting rules
An important aspect of code style is how to format the code, i.e. how to use whitespaces and blank lines to arrange and separate code blocks, whether and how to use tabs for indents, whether and how to wrap long lines, etc.
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, code templates and refactorings. The formatting rules can be also applied to the existing code in the current selection, current file, or in a larger scope up to the entire solution.
As an alternative to digging through options pages, you can select a block of code and configure only those formatting rules that are applicable to this block, observing the changes right in this block.
To configure formatting rules for selected code
- In the editor, select a block of code that you want to reformat.
- Press Alt+Enter or click on the action indicator to the left of the caret to open the action list.
- Choose .
- In the Configure format dialog that opens, you will see all formatting rules that affect the selected code block. The code block itself will be surrounded with a dotted frame:
- As you change the formatting rules, you will see how they affect the code in the selected block.
- Click Save to apply the modifications and let ReSharper choose where to save them, or save the modifications to a specific settings layer using the Save To drop-down list. For more information, see Managing and Sharing ReSharper Settings. ReSharper will save your modifications and reformat the code block.
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 page of ReSharper options. ReSharper will detect and highlight the code that differs from your preference. To enforce this preference in the existing codebase, run code cleanup with the 'Full cleanup' default profile or with a custom profile where the corresponding option selected.
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.
To apply a preferred module import style
- Use the Prefer adding module aliases to qualifying when importing types check box on the page of ReSharper options to specify your preference.
- Run code cleanup in the desired scope with the 'Full Cleanup' profile.
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 check box in the TypeScript specific profile settings.
Optimizing reference commentsReSharper 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 check box in the TypeScript specific profile settings.
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 page of ReSharper options. ReSharper will detect and highlight the code that differs from your preference. To enforce this preference in the existing codebase, run code cleanup with the 'Full cleanup' default profile or with a custom profile where the corresponding option selected.
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.
The preference of using implicit 'any' can be also 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 check boxes are selected in the TypeScript specific section.
Your implicit/explicit typing preferences are also taken into account by ReSharper's code inspection.