ReSharper 2017.1 Help

Code Style Assistance in JavaScript

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.

Similarly to other languages, all JavaScript code style preferences can be applied in the desired scope with a single command using either Fix in scope or Code cleanup.

ReSharper provides the following code style assistance features in JavaScript:

Naming Style

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

Managing and applying 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.

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

As an alternative to digging through options pages, you can select a block of code, press Alt+Enter and choose Format | Configure to configure formatting rules applicable to this block, observing the changes right in this block.

Quotes style

JavaScript 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 | JavaScript | Code 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, run code cleanup with the 'Full cleanup' default profile or with a custom profile where the corresponding option selected.

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

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 (see 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.

See Also

Last modified: 31 May 2017