ReSharper 6 Enhances the JavaScript Experience

Previous posts introducing ReSharper 6:

We already mentioned some of the benefits that ReSharper brings to the table when it comes to JavaScript development previously. In this post we are going to have a more in-depth look at some of the features.

Pimping jQuery

In addition to support for JavaScript, ReSharper 6 also provides certain functionality specific to jQuery.


Code Completion for Selectors

When working with jQuery selectors we often need to lookup certain DOM elements or CSS classes in order to operate with them. This can result in a back-and-forth between the code we are working on and looking up of a specific element. ReSharper 6 facilitates these cumbersome operations by providing code completion for selectors:

image

This completion is invoked by typing # between the quotes, where as if we were to type ., we’d get:

image

This completion is available anywhere a selector is required. Of course if we merely want to select a specific type of element, we also have completion:

image


Extending jQuery Extensions

One of the benefits of jQuery is the ease by which we can extend it to add our own functions and methods. ReSharper enhances this experience by providing completion also for custom extensions. For instance, if we were to write a new extension:

image

We now have myFoo available as a method of jQuery:

image

Much in the same way, if we want to extend an object:

image

we have:

image

Importing File References

Out of the box, Visual Studio requires a special comment to be added to script files to provide support for IntelliSense:

image

With ReSharper this is not required. If however, it is included, ReSharper will then limit the scope of Intellisense to the reference added. This reference can be provided by directly typing it in, in which case ReSharper offer completion:

image

as well as providing quick-fixes when errors are detected in paths:

image

Creating from Usage

Similar to C# and VB.NET, we can now also create JavaScript code based on usage. For instance, let’s say we write some code that calls a specific function named getInterval that does not yet exist. ReSharper prompts us to create a local function:

image

generating the code for us, providing us the same ability we have in C# to iterate through parameter names etc. The same applies to variables:

image

as it does to creating parameters and properties; once again, making the whole development experience a bit smoother.

Last but not least, ReSharper also provides the ability to create jQuery extension methods from usage:

image

Refactoring

Certain refactoring operations are now available in JavaScript. Firstly, in combination with Create from Usage, we can now easily add an extra parameter to a function call and have ReSharper offer to create it for us:

image

Introduce Variable is another refactoring option available:

image

And last but not least, Rename:

image

ReSharper is smart enough to handle the scope of the renaming outside of the current local scope, prompting you always with the option to fine-tune certain renaming’s.

Code Cleanup and Rearranging

In a previous blog post we mentioned briefly the code formatting options for JavaScript. These have now been extended and better organized. We can fine tune Lines Breaks, Braces Layout as well as Space via ReSharper | Options | JavaScript | Formatting Style. Below are the options for the newly added Spaces:

image

Running code-cleanup on JavaScript files is of course now also possible:

image

Also, out of the box, we provide certain filters, both in clean-up and analysis, such as those with min.* extensions. These can be changed in the options dialog, albeit it’s not highly recommended.

image


Rearranging Code

You can now rearrange code which includes moving parameters around, moving members up/down as well as arguments and object literals and arrays. All this is done using the same key combination as used in C# and VB.NET (Ctrl+Alt+Shift + Cursor Keys).

Code Inspections

JavaScript is a dynamic language. It has great advantages but can prove to be not the easiest language to work with, specially for novices. We’ve tried to ease some of that pain by providing code inspections, where possible. Among the many code inspections that currently are available are:

  • Syntax errors:
    image
  • Unused symbols:
    image
  • Dead code:
    image
  • Duplicate switch statements:
    image
  • Misuse of “this”:
    image
  • Accessing undefined global symbols:
    image

And this is just a few of the over 25 inspections that ReSharper supports along with their corresponding quick fixes. We believe that this will help remove some of the issues encountered at runtime, specially by newcomers.

Miscellaneous

Some of the other features provided for JavaScript are:

  • Configurable Naming Conventions: Much like C# and VB.NET you can define your own naming conventions.
    image
  • Context Actions Settings: You can fine-tune which of context actions you want enabled.
    image
  • Live Templates: Some predefined templates plus the ability to create custom live templates for JavaScript.
  • Navigation and Find Usages: Context-sensitive and context-insensitive (“Go to”) navigation support as well as Find Usages for JavaScript members. This was mostly covered in a previous post.
  • Unit Testing: Support for JavaScript unit testing with QUnit covered in a dedicated post.
  • Coding Assistance: Syntax highlighting, highlighting for matching delimiters, ability to comment and uncomment blocks of code etc. See previous post for some screenshots.

All in all, we hope that some of these features allow JavaScript to become a language to that easier to learn, use and enjoyable.

ReSharper 6 is currently in EAP. Download it today and start playing with it. We’d love to hear your feedback..

This entry was posted in News and Events and tagged , . Bookmark the permalink.

15 Responses to ReSharper 6 Enhances the JavaScript Experience

  1. Crazy freaking awesome! Can’t wait to start using this in production!

  2. Ross says:

    Release date?

  3. Looks really awesome and anxious to try it out.

    My concern is … is it currently stable enough to run on my primary development box? I love ReSharper 5 and haven’t had any issues with it, but I do a lot of JavaScript development so the new JavaScript support in ReSharper 6 would be a great asset for me.

    However, I don’t want to remove something that is working and install something that will crash every 5 minutes.

  4. @Ross
    Hoping for June

    @Makoto
    I can’t say for sure whether it would be stable enough in _your_ case but we’re not getting much crash reports. If you’re in precautionary mode, I suggest that you wait until we release Beta – that should happen soon.

  5. Thanks Jura! Really looking forward to trying out the beta release. Keep up the great work!

    I also really love how JetBrains also provided a FREE decompiler for the .NET community and looking forward to seeing how it’s integrated with ReSharper as well.

  6. R# 6 is really awesome. Been using the EAP for some time now, and it has a few glitches every now and then, but it’s perfectly usable (not the last two days as it has a problem with Goto Type, Goto file,…).

  7. Ross says:

    @Jura: Cool! My work just purchased Resharper 5 in March, are we going to need to repurchase Resharper 6 then?

  8. Will you be supporting other JS frameworks like ExtJS?

  9. @Carles
    Thank you! We’re working to get the “Go to” issues fixed.

    @Ross
    We’ve been offering free upgrades to ReSharper 6 since April 26. If your company purchased ReSharper 5 within a month before April 26, you might want to [contact JetBrains sales|http://www.jetbrains.com/company/contacts/index.html] for an upgrade discount. Even if the purchase had occurred earlier, you won’t have to repurchase full R#6 – you’ll only have to buy an upgrade which is around 60% of new license price.

    @Eric
    We haven’t planned support for ExtJS yet but in perspective, we’d love to know the usage scenarios that you’d like to be supported.

  10. Phileosophos says:

    Ok, now you’ve gone into must-have territory. I mean, I buy every Resharper upgrade anyway, but I’m positively *salivating* over this one. Now stop posting updates and finish that code!

  11. Joe White says:

    One thing that makes JavaScript pretty wretched to work with is the automatic-semicolon-line-break thing. Can ReSharper be configured to highlight it as a warning, or even an error, any time you leave off the explicit semicolon (like jsLint does)?

  12. creage says:

    Installed RC2, and the File Structure of JS files based on jQuery contains tons of “Object Literal” nodes. After analyzing, it seems Resharper marks each {var:value} entry as separate node, which can confuse a lot. Is it possible to strict this to “var dummy= {var:value}” only, so it marks “really” assigned objects, and additionally, instead of just saying “Object literal”, I’d like to see the “dummy” named node, in my case.

  13. @creage
    What you’re saying makes perfect sense. I’ve created a feature request that you can watch, and we’re hopeful to resolve it in one of future versions.

  14. @Joe
    Sorry for missing your comment earlier but I’m guessing that the Terminate all unterminated statements in file that shows up any place where you have a semicolon omitted is what you need.

  15. sampath says:

    function validateInput() {
    if () {
    if () {
    return false;
    }
    else if() {
    if () {
    return false;
    }
    }
    return true;
    };

    If I need to re-factor above kind of Nested if statements inside the javascript file (Jquery code).Could I use Resharper for that ? If yes How ?

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>