JavaScript and TypeScript tools

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.

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

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.

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.

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.

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.

ReSharper extends the built-in code analysis rules with support for three static analysis tools: JSLint, ESLint, and TSLint. All of these linters help ensure that JavaScript and TypeScript code is readable and maintainable. They also allow adding custom rules, which can be included in ReSharper code analysis.

In case a Node.js interpreter is already configured on your machine, you can enable linters in ReSharper settings under Tools | Web Linters.