JavaScript support improvements in recent ReSharper releases
There are quite a few things in ReSharper 2016.1 designed to advance your JavaScript experience.
This update improves support for JSX, enhances regular expression features, supports more complex type annotations and constructs in JsDoc, provides full-featured JSON and JSON schema support, and supports a lot of experimental ECMAScript features.
Also worth noting is official support for NodeJS, meaning that all your NPM package dependencies and node modules are now handled nicely.
Advanced JSX experience
JSX is a very popular ECMAScript extension that allows you to use XML-like syntax for JavaScript expressions. JSX is primarily used with the ReactJS framework, though not necessarily limited to it.
Earlier in ReSharper 10 we introduced initial support for JSX by providing all the features you usually expect from HTML in JSX tags.
Because JSX markup can embed JavaScript code, expect to have usual assistance for JavaScript inside JSX, too.
Starting with ReSharper 2016.1, if you use plain JS files in Visual Studio or use Visual Studio versions earlier than 2015, ReSharper now provides its own syntax highlighting for JSX constructs, so that you won’t even notice that your Visual Studio version is not the most bleeding-edge one. (You will however need to disable Visual Studio’s own syntax errors to have the best possible experience in this case.)
Improved support for JS regular expressions
Earlier in ReSharper 10, we extended our support for regular expressions in JavaScript by automatically injecting them into RegExp constructor and regex-related String methods (search and match). You can complete regex flags in RegExp constructor as well.
Also, you can enjoy having a context action for injecting regular expression facilities into any JavaScript string.
Enhanced JSDoc support
JSDoc is supported for documentation purposes since ReSharper 9.1.
ReSharper 10 offered extended JSDoc support by using types specified in JSDoc for improving our existing features, such as code completion. Most of the types defined by JSDoc 3 were supported, including primitive types, union types, signatures, record types, type definitions, and callback definitions.
ReSharper 2016.1 goes further as it supports templates (generics) and type inference for them, improves rendering for JSDoc that uses HTML tags, and supports structured parameter and property syntax.
Also note that now all the JSDoc keywords are supplied with a short description of their meaning.
JSON and JSON schemas
Starting with ReSharper 2016.1, JSON is an officially supported language. That means that you get the usual ReSharper features in JSON files like typing assistance, formatting, rearrange code, and code analysis with quick-fixes.
If your JSON file is supplied with a JSON schema, then you’ll be provided with code completion based on schema, and your JSON will be validated against the schema, providing fixes for validation issues.
For several known JSON schemas, you get enhanced features such as regular expressions support, JSON Path references, file and folder references and completion for them, and code completion for packages (NPM, Bower and NuGet).
As a special bonus, completion for open source license names in SPDX format is provided for NPM and DNX package descriptions.
Note that all provided features are available for all supported Visual Studio versions.
ECMAScript Experimental
ReSharper 2016.1 provides initial support for most of the currently known ECMAScript experimental constructs (some of which are going to become part of the ECMAScript 2016 specification while others are still in proposal).
Now you can easily code with ReSharper while using transpilers such as Babel or when using ReactJS with ES2016 elements. Support is provided for: async functions and await, comprehensions, exponentiation operator, rest in object destructuring and spread in object literals, bind operator, class properties, decorators, new export statements, and call-constructors.
Node.JS support
ReSharper 2016.1 now fully supports working with Node.JS modules and NPM packages. This results in enhanced code assistance, in particular, better code completion and inspections when you use Node.JS modules.
We hope you enjoy these features when working with JavaScript. Do let us know about your experience with that by leaving a comment below.
trailmax says:
April 26, 2016Resharper should be renamed to ReJSer. So many JS features now, original product purpose seems to be irrelevant now. Are you guys planning to split the product into web and non-web related Re*ers?
Jura Gorohovsky says:
April 27, 2016No, we’re not planning to split the product as we don’t see any considerable reasons in doing so. A very large share of ReSharper users develop web applications with .NET backends, and they benefit from support on both ends.
rosdi says:
April 27, 2016Love it… we surely need more javascript and typescript support!
Anton Lobov says:
April 27, 2016Thank you! For sure, more features are to come.
Clay Shannon says:
April 27, 2016What I would love to see is jquery-aware highlighting of bad code in .cshtml files. I can have bad javascript/jquery and it compiles just fine but doesn’t work. It would be great if Resharper could point out those javascript/jquery errors and provide suggestions on fixing them, as it does for C#.
Anton Lobov says:
April 28, 2016To improve your jQuery experience, you can include jquery.d.ts file in your solution, that will make ReSharper much better aware of jQuery-own symbols, and it will improve code completion, navigation, etc.:
https://raw.githubusercontent.com/borisyankov/DefinitelyTyped/master/jquery/jquery.d.ts.
Also could you please provide some examples of what you treat as “bad javascript/jquery”? Due to dynamic nature of JavaScript, it’s impossible to do strict type checking, so not all the cases of type mismatches and non-existing properties can be tracked. That’s why your examples will help to figure out some particular cases in which ReSharper’s behaviour can be improved, if you provide them. Thanks in advance!
And you’re welcome to create a feature request about all this in YouTrack. 🙂
https://youtrack.jetbrains.com/newIssue?project=RSRP&clearDraft=true&c=Subsystem+JavaScript&c=Assignee+Anton.Lobov&c=Priority+Critical&c=Type+Feature
Francis Kim says:
May 17, 2016Take my money!!