TypeScript Support in ReSharper 8.1
We have just recently announced TypeScript support as part of ReSharper 8.1 EAP, and this blog post is intended to give you more details on this exciting development. Note that ReSharper 8.1 is only the first milestone in supporting TypeScript, and while we’re ready to show a first set of TypeScript features, there’s still quite a long journey ahead.
Typing Assistance and Code Completion
Just like all the other languages ReSharper supports, TypeScript support in ReSharper 8 includes the following:
- Various forms of typing assistance such as automatic creation of closing quotes and terminal braces as well as overtype support.
- Support for live templates, ReSharper’s powerful alternative to Visual Studio snippets providing enhanced functionality such as e.g. insert/replace behavior on tab/enter.
- Ability to rearrange code (more on this in a later section).
As with other languages, ReSharper provides various navigation options, such as Go to Everything as well as its various specializations, such as Go to Member:
This is also available in element references to HTML and CSS related entities. For example, you can find usages of the
.ui-tooltip-top class below, which will take you to the HTML page where that style is used:
Our initial TypeScript support comes with two refactorings. The first is the Introduce Variable refactoring that lets you create a variable for the selected part of code. This refactoring is also sensitive to the number of occurrences of the same value when introducing a variable:
The other refactoring is Rename refactoring, whose name should be self-explanatory. Naturally, this refactoring also looks at references to the old name in the string literals and offers a chance to fix usages there too:
The Rename refactoring for TypeScript is also capable of detecting structurally compatible members, and offers to perform a rename on them too, as shown below:
Just as with other languages ReSharper supports, TypeScript support includes the Rearrange Code feature that lets you quickly change the position of code blocks within the file. To use it, step on e.g., a function, a hold the Shift+Ctrl+Alt keys:
Now, simply press the ↑Up or ↓Down keys to move the selected block in the file. This feature doesn’t just work for high-level constructs, but also for smaller ones (e.g., lambdas), where it’s possible not only to rearrange the position of the block but also use the ←Left and →Right keys to move the selected item in and out of different scopes. Also, this mechanic is available for rearranging arguments.
And finally, TypeScript support also includes the support for the greedy brace: using the same shortcut key combination, you can essentially move the opening or closing brace of a code block to leave in/out any part of that block outside of scope:
In the tradition of supporting various languages, ReSharper performs continuous checking of TypeScript files for errors and inaccuracies. For example, ReSharper is able to detect unused parameters:
It’s also able to detect invalid CSS references…
…as well as perform general stylistic clean-up such as, e.g., finding and fixing missing semicolons — note the Fix in Scope mechanic that’s available here:
Things to Come
At the moment, our TypeScript support is still a work in progress, and we’ve got a lot more to do: support for the type system (e.g., hierarchy navigation), generics and contextual typing are still in the works, and we’re working hard to bring them to you as soon as possible.
For the time being, check out ReSharper 8.1 EAP and let us know what you think!