Better JavaScript and TypeScript support in Rider 2017.2

We announced a new Rider 2017.2 EAP build late last week but we only outlined the changes that it brought. This week, let’s dive into what’s new. To start off, here’s a summary of changes in JavaScript and TypeScript support, courtesy of a newer version of the IntelliJ platform that Rider has migrated to.

When hovering objects with the mouse and holding Ctrl, the inferred type for objects (annotated with parameter hints) is displayed in a tooltip.
TypeScript type hints

The settings (under Editor | Code Style) allow configuring how members of a class are arranged. We can define how different blocks of code such as the constructor, fields and methods are ordered in our classes.
JavaScript and TypeScript class members arrangement

Using Rearrange code (Ctrl+Shift+A then type “rearrange”), these code style settings can be automatically applied.
Rearrange Code

Here are some of the other JavaScript and TypeScript improvements that Rider has inherited:

  • There’s the new Move Symbol (Ctrl+Shift+R) refactoring that lets us safely move classes, global functions or variables across ES6 modules. The refactoring updates all imports and exports automatically.
  • When using CSS modules and importing them into a JavaScript file, Rider provides code completion and navigation support for class names in that module.
  • Angular Material and webpack improvements! Code completion and navigation for Material attributes is now available. And when using webpack, Rider better understands complex configurations and now properly resolves paths in import statements and import suggestions.
  • When running Mocha tests with Istanbul code coverage, Rider can display coverage reports right within the IDE and displays how many files were covered with tests and the percentage of covered lines in them. We can always jump to file and see what lines were and were not covered.

Interested? Please download Rider 2017.2 EAP and give the new build a try!

This entry was posted in How-To's and tagged , , , . Bookmark the permalink.

6 Responses to Better JavaScript and TypeScript support in Rider 2017.2

  1. Carel Lotz says:

    When will the rearrange code be available for C#? This is currently the number one feature that prevents our team from using Rider. We use the File Layout Template functionality in R# to ensure consistency across file formatting which makes merge conflicts around file formatting manageable in team environments. See https://youtrack.jetbrains.com/issue/RIDER-2522

    • Dev says:

      Well, you bought a C# IDE so naturally the focus is on JS and TS :D!

      JetBrains: split TS and JS into a separate licence from both R# and Rider.

    • Jura Gorohovsky says:

      Carel, I’ve followed up in the issue you’re referring to, and to sum things up here for everyone, you can apply an existing file layout with Rider’s version of Code Cleanup but you can’t currently create new file layouts. We’ll improve this in future but if you do have your team-wide file layout set and saved with your solution(-s), then what you’re after should be possible and shouldn’t prevent your team from using Rider.

  2. Julo says:

    They must have plugged a module from Webstorm straight in Rider, didn’t cost them much to do that I guess…

Leave a Reply

Your email address will not be published. Required fields are marked *