New features for supporting JavaScript in ReSharper 8.1

Due to the ever-growing popularity of the JavaScript language, we continue to improve its support in ReSharper. Below I would like to demonstrate some of the mechanisms by which ReSharper 8.1 makes JavaScript development faster and safer.

Improved auto-completion with TypeScript

In the process of working with pure JavaScript, we had the opportunity to significantly improve support for autocompletion in ReSharper by adding type definitions from TypeScript to the project. In order to enable this functionality, you just need to find the corresponding DefinitelyTyped package in the NuGet directory and install it:

In the absence of TypeScript annotations, the auto-completion mechanism in ReSharper is limited to what it can infer from the JavaScript file itself. Since JS is a dynamically typed language, it is not always possible to get complete information about imported characters and the relationships between them. Therefore, in addition to the derived elements (which are highlighted in bold in the autocomplete window), ReSharper also shows all the properties of all characters that are in the solution. In this case, it is the responsibility of the developer to understand whether a particular element has a particular property or function, and this situation, unfortunately, can be a source of additional problems.

If you take, for example, underscore.js - ReSharper is not able to display the properties of the symbol _ (underscores), and, accordingly, the user needs to choose from all possible identifiers. In addition, information about the parameters of the function is also not available:

But after we add strongly typed definitions from the *.d.ts file, ReSharper can select in bold those elements that are allowed for the _ character, which reduces the risk of an error:

ReSharper can now also show information about function parameters:

Javascript ssr

The structured search and replace mechanism (StructuralSearch & Replace, SSR) allows a developer to perform search and replace operations not on fixed search strings or regular expressions, but on structural code definitions in which you can select variable names, literals, etc. And now this mechanism is available for the JavaScript language.

Let's start with an example of finding the declaration of objects with the assignment of a single property:

The template used above contains the Name element type in order to find any character that looks like the name of a variable or property. Accordingly, the Find Results window gives us a list of all the places in the code where the matching elements were found.

Of course, the search for code by templates is only half of what SSR can do, because you can still make a replacement. For example, imagine that you decide to replace all declarations using the Array type with the use of square brackets. Here's how to define a template for this:

For the $args$ $ variable, this template uses the tag type any number of arguments , which represents a set of function arguments.

I want to emphasize that the SSR mechanism is semantically sensitive . For example: when searching for the condition $x$ > 100 the SSR mechanism will also find if (100 >= x) code if (100 >= x) :

In the same spirit, prefix and postfix operators are considered interchangeable , provided, of course, that their resulting values ​​are not written anywhere:

Also, please note that the SSR mechanism ignores tokens that do not affect the behavior of the program , such as parentheses or curly braces or semicolons:

And, of course, it is possible to generate SSR templates directly from existing code:

Improvements in the window FileStructure

One of the main problems of the JavaScript language is to understand the organizational structure of a certain piece of JS code. In order to simplify this process, the FileStructure window has been redone to simplify the presentation of both JavaScript and TypeScript code. Let's look at some of the features of this useful window.

For a start, ReSharper learned how to derive function names from either declarations or variable names :

ReSharper is also able to determine the names of elements from the documentation when they are not explicitly specified in the code:

The FileStructure window uses ellipsis (...) to select additional function arguments . In the example below, ReSharper sees that varArgsFunction uses the value of arguments :

Some function calls, in fact, are higher-level constructs — modules . ReSharper tries to identify these structures and present their elements: both private and exported. Notice that for the constructor we also display its fields:

Smart search using items

We have already written about this feature in our TypeScript blog post (English), but it is worth mentioning again: a new feature has appeared in ReSharper 8.1 called SmartUsageSearch. In the process of searching for properties, for example, ReSharper is able to find both common use cases and the so-called. “Smart” uses - that is, cases of non-trivial type inference. The final result is presented below - note that this feature is available for both JavaScript and TypeScript:

Well that's all for now

We hope you enjoy the new functionality described in this post. We continue to work on support for JavaScript and TypeScript in ReSharper, so very soon there will be other new and interesting features. See you later!