JavaScript and TypeScript tools

When you use JavaScript or TypeScript to program a part or all of your application logic, you can lean on ReSharper. Its features are available in .js, .ts, .d.ts, and .json files, in JavaScript code embedded in HTML files, as well as in JSX syntax.

Code inspection and quick-fix in JavaScript

Code analysis

ReSharper's code analysis features help you quickly locate and correct errors and problems with about 100 code inspections for JavaScript and TypeScript code, and additionally about 50 TypeScript-specific inspections. Nearly all of the detected issues can be instantly fixed with quick-fixes.

In the example here, typing = where == was intended, could lead to a very subtle bug... but not with ReSharper.

When analyzing your code, ReSharper takes into account the language level, which is configurable. By default, a language level is selected based on project settings, but you can override the setting if necessary.

Navigating from a JavaScript symbol with ReSharper

Navigation and search

Most of ReSharper's navigation and search features are available in JavaScript and TypeScript. As usual, all commands for navigation from specific symbol are available with the Navigate To shortcut: Alt+~.

All your favourite search commands, such as Ctrl+T (Go to Everything/Type) and Ctrl+Shift+T (Go to File), are available as well. All supported navigation and search features take into account the specifics of JavaScript and TypeScript syntax. For example, File Structure can display data types of parameters if they are specified in XML documentation.

Structural Search and Replace is also aware of JavaScript/TypeScript syntax.

ReSharper's code completion in TypeScript

Code completion

Code completion features help you write JavaScript/TypeScript code faster. While you type, ReSharper analyses the surrounding context and symbols you recently entered in order to suggest suitable values in the completion list. For example, ReSharper can help you find built-in JavaScript methods and properties, as well as symbols from JavaScript libraries referenced in the current project.

ReSharper's context actions in TypeScript

Context actions and other helpers

ReSharper lets you quickly convert bits of your JavaScript/TypeScript code with 50 context actions for JavaScript and TypeScript plus about 20 TypeScript-specific actions.

The whole arsenal of other ReSharper coding assistance goodies — syntax highlighting, rearrange code, extend/shrink selection, just to name a few — is also at your disposal in JavaScript and TypeScript code.

ReSharper features in JSDoc

JSDoc support

ReSharper makes JSDoc comments much easier to read by highlighting their syntax. When you type JSDoc comments, ReSharper helps you by completing your input. For example, you can type /** above a function and ReSharper will generate documentation stubs for all parameters and for the return value. JSDoc types, typedefs and callbacks are also properly highlighted and become available in code completion.

Besides, all JSDoc comments for symbols are available on usages of these symbols in the Quick Documentation pop-up.

ReSharper's regular expressions assistance for JavaScript and TypeScript

Regular expression assistance

ReSharper's support for regular expressions includes full understanding of JavaScript/TypeScript regular expressions. By default, regular expressions are recognized in regular expression literals, RegExp constructors and methods, as well as in String object methods: match(), search(), replace(), split(). However, you can always tell ReSharper to analyze any string literal as regular expression.

ReSharper refactoring in JavaScript/TypeScript - Move to Resource

Refactorings

In JavaScript and TypeScript code, you can enjoy several refactorings that work the same as in C#: Inline Variable, Introduce Variable, Introduce Variable for Substring, and Rename.

In TypeScript, a set of refactorings on types is available: Copy Type, Introduce Field, Move Type to Another File or Namespace, and Move to Folder.

There is also one refactoring specific to JavaScript/TypeScript: Move to Resource. This refactoring works in JavaScript/TypeScript projects created from Visual Studio templates (e.g. Apache Cordova) and allows moving string literals to resource files.

All JavaScript/TypeScript refactorings are also available in JSX syntax.

Generating code from usage in JavaScript/TypeScript

Create from Usage

ReSharper allows you to use non-existing symbols and then generate proper implementations based on these usages in almost all supported languages. JavaScript and TypeScript are no exceptions — for any unresolved symbol ReSharper will suggest one or more ways to create it.

Generating constructor in TypeScript

Generate Constructors

When you press Alt+Insert on a TypeScript type declaration, ReSharper lets you quickly create a constructor for this type. The constructor generation wizard creates a non-default constructor that takes selected fields from the type and base types as parameters.

Overriding TypeScript type members

Implement/Override Members

For inherited types, there are two related code generation features:

  • Implement missing members implements any interface members or abstract members missing from the current class;
  • Override members does the same, but it also overrides virtual members if applicable.
Live templates for TypeScript

Code templates

ReSharper comes with dozens of live templates that cover all frequently used code constructs in JavaScript and TypeScript. There are also file templates for TypeScript classes, interfaces, and modules. You can extend the default set of templates with custom templates of your own.

Configuring formatting rules in JavaScript

Code style assistance

ReSharper helps you automatically maintain the two cornerstones of code style in JavaScript and TypeScript code: code formatting rules and naming conventions.

In fact, code formatting works even better than in C#: press Alt+Enter on a selected code block and choose Format selection | Configure to see and configure all formatting rules that affect the selected block.

Code style preferences specific to JavaScript and TypeScript are available: you can maintain consistent usage of either single (') or double (") quotes for handling string literals, and automatically add or remove the optional semicolon for statements.

In TypeScript, you can additionally control how to specify types in declarations (explicit type name, var, or any), whether to use the public modifier explicitly, and how to import modules.

All JavaScript and TypeScript code style preferences can be applied in any scope with a single command, using either quick-fixes or Code Cleanup.

Unit testing features in JavaScript

Unit testing assistance

ReSharper helps discover and run unit tests based on QUnit and Jasmine right in Visual Studio. You will be able to select which browser is used to execute your JavaScript/TypeScript tests or opt for headless testing with PhantomJS.

Similarly to .NET unit tests, you can browse JavaScript/TypeScript tests in your solution with Unit Test Explorer, run them from this window, from Solution Explorer or right from the editor, as well as use multiple unit test sessions.

JSON value helpers

JSON value helpers and schema catalogs

JSON value helpers allow you to tell ReSharper to provide code completion or validation for your own JSON files. You can add a helper in the JSON Value Helpers options page, matching based on a filename mask and/or schema match. Custom JSON schema catalogs can also be added in JSON options.

Note on shortcuts

All keyboard shortcuts provided in this page are available in ReSharper's default "Visual Studio" keymap. For details on ReSharper's two keymaps, see ReSharper Documentation.