JavaScript improvements in ReSharper 7

ReSharper 7 greatly enhances JavaScript support by adding more analysis, quick fixes, code completion, as well as support for Jasmine and PhantomJS unit test runners.

Code Analysis and Context Actions

One of the biggest issues when writing JavaScript code, or any kind of dynamic code in general, is the potential mistakes that can lead to runtime errors. Not having a compiler as a safety net to detect some problems has it’s downside.

With ReSharper 7, we have placed a lot of effort in trying to analyze code and offer a series of context actions, be it quick fixes or refactoring. In fact, we added 30+ new context actions in ReSharper 7

Converting numbers to different formats

image

You can now convert back and forth from decimal to hexadecimal, to octal, all with a single Alt+Enter action.

Dealing with Conditionals

From simple if inversions of conditionals

image

to converting if conditionals to ternary and back

image

image

as well as the ability of merging multiple if statements or separating them out

image

image

All in all, we’ve added quite a lot of context actions to deal with conditionals.

Accessor Properties

ReSharper 7 also adds support for the new property accessors in EcmaScript 5

image

when selecting to wrap get-accessor gives way to

image

Alternatively, if selecting the first option, we’d get

image

defineProperty support

We also now support defineProperty in multiple ways

image

resulting in

image

Much more

These are just some of the context actions out of the 30+ that we have added, including tiny but small annoyances such as using double quotes when single is required

image

making JavaScript a bit easier to work with and help in learning.

Code Completion

In terms of Code Completion, we have added support for event handlers under WinJS/WinRT (see below), as well as some nice little additions available globally

image

Once again, we also provide support for new methods defined in ECMAScript 5

image

WinJS

With Visual Studio 2012 allows us to create Windows 8 Metro applications using C# and XAML, as well as JavaScript and HTML. ReSharper 7 also provides support for JavaScript for Metro applications. Once again, we have covered this previously.

Here is a sample of Code Completion with addEventListener/removeEventListener:

image

Unit Testing Enhancements

We’ve also added support for Jasmine and PhantomJS test driver in ReSharper 7, which we’ve already covered in this post.

Invisible but important features

Internally, Visual Studio 2011 provides 5 JavaScript files that are implicitly referenced in every JS file in a project. They contain DOM definitions, standard JS objects and other important information. It aids in producing code completion and tooltips. In Visual Studio 2012, Microsoft allows developers to configure these files via options and surfaces an API. ReSharper uses this API to get information from these files, making the code completion / navigation flexible.

We’ve also drastically improved performance of JavaScript. In general, now working with script files should be a much faster experience.

JSLint for ReSharper

Last but not last, for those of you that like JSLint, know that although we do not ship support for JSLint out of the box, there is already a plug-in available from the community. Lars-Erik has written JSLint for ReSharper and it’s already available for ReSharper 7.0.

As always, we appreciate the feedback.

This entry was posted in ReSharper Tips&Tricks and tagged , , . Bookmark the permalink.

2 Responses to JavaScript improvements in ReSharper 7

  1. Vasiliy Aksyonov says:

    What about “inline” refactoring? WebStorm can do this

  2. Chris Marisic says:

    Excellent post, screen shots tell the whole story i don’t even need to read (definitely the way to get people to grok information from blog)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">