How-To's

AngularJS support for ReSharper

In case you haven’t already been introduced, AngularJS is a popular JavaScript framework for creating dynamic web applications. It provides many of the services required to build such applications, not the least of which is a declarative approach to updating the UI. It favours the use of data binding and templates over direct DOM manipulation, and it makes it possible to create complex sites with a minimum of code. For more information, check out the examples on their home page, or take a look at the video tutorials by our very own John Lindquist.

We’ve just released a plugin that adds ReSharper support for some of AngularJS’ features (here’s a direct download link). It’s an initial version, so doesn’t cover everything, but what it provides should give you a helping hand in creating your sites. Currently, the plugin provides code-completion for Angular’s custom HTML attributes, and a bundle of Live Templates to make building common constructs easier.

Code completion will include all of AngularJS’ “ng-” attributes when editing HTML files, and include a description tooltip:

Code completion showing Angular attributes

It also supports the HTML5 “data-” prefixed versions of the same attributes.

Code completion with data prefixed attributes

And of course, since ReSharper has smart matching, you can type initials to quickly get to the start of the attribute you want. For example, you can type “dngbh” to get to the “data-ng-bind-html” attribute:

Code completion with smart matching

The plugin also ships with 26 Live Templates, based on the IntelliJ and WebStorm templates by Pawel Kozlowski and John Lindquist, respectively. They are split into functionality for directives, modules, scope, routing, html and global helpers. For example, you can use the “ngindex” template to create a simple HTML page to start your development,  or “ngb” to create a binding expression. These work in HTML or HTML-like files (Razor, ASPX, .html)

Expanding the binding template in a HTML file

The JavaScript templates can create code for directives, for loops, modules, routing and scope. These are available in JavaScript files, and within script tags in HTML-like files:

Expanding a scope function template

Please check out the templates explorer to get a full list, or to edit, add or remove templates.

This is just an initial release. We’d love to expand the feature set, supporting custom HTML element directives, navigation to model properties, binding expressions, and more. If there are any features you’d like to see, or if you find any bugs, please add a feature request to the Issues page. And of course, it’s Open Source – if you’d like to see a new feature, how about taking a crack at it? We’ll help.

Now, go and download it, and make lovely dynamic JavaScript applications.

Comments below can no longer be edited.

43 Responses to AngularJS support for ReSharper

  1. Avatar

    Johan says:

    February 28, 2013

    Wooooohooooooooo!

  2. Avatar

    Craig says:

    February 28, 2013

    Now I want the same thing for Knockout…:)

  3. Avatar

    Frank says:

    March 1, 2013

    Thanks, JetBrains for bringing this plugin to public attention! I used an old build of the plugin. I’m sure it will quickly continue to develop in the near future.

    @Craig: Web Essentials 2012 provides Knockout support out of the box, including binding-intellisense!

  4. Avatar

    Mark Rendle says:

    March 1, 2013

    Awesome work!

    Please, can you make the JavaScript Live Templates work in TypeScript files too? AngularJS and TypeScript go together like peanut butter and jam.

  5. Avatar

    Craig says:

    March 1, 2013

    Terrific, thanks Frank, I’ll check that out!

  6. Avatar

    Craig says:

    March 1, 2013

    Terrific, thanks Frank I’ll check that out!

  7. Avatar

    Matt Ellis says:

    March 1, 2013

    @Mark Good idea! I’ll add it to the next release.

    In the meantime, you can edit the templates scope to include *.ts files. When you edit the template, click the link that says “In JS expressions” and in the dialog that appears, check the “in files matching *.*” and expand the arrow. Set the text to *.ts and save the template.

  8. Avatar

    Steve Holmes says:

    March 3, 2013

    How come no ultimate edition support?

  9. Avatar

    Jason Finch says:

    March 4, 2013

    Awesome stuff Jetbrains!

  10. Avatar

    Matt Ellis says:

    March 4, 2013

    Hi Steve. Could you clarify, please? This plugin doesn’t require any particular support for Visual Studio editions.

  11. Avatar

    David Hanson says:

    March 4, 2013

    Guys this is awesome,

    Can you enable template support for TypeScript too? would be awesome!

  12. Avatar

    Matt Ellis says:

    March 11, 2013

    I’ve just pushed a 1.1 update that adds basic support for templates in TypeScript files. They work with tab expansion, but don’t appear in intellisense, as that’s provided by Visual Studio in .ts files.

    https://github.com/JetBrains/resharper-angularjs/wiki/Release-Notes

  13. Avatar

    Kamshare says:

    April 15, 2013

    Hi – I am new to .Net and wanted to learn AngularJS. Can someone help me to add this plugin to Visaul Studio.

    I downloaded this plugin and added a reference to this folder in Tools Menu > Options > Environment > Add-In/Macro Security > Added Path to AngularJS folder. This way I am not able to see the intellisence. I don’t even see this under Addins.

    Please help.

    Thank You.

  14. Avatar

    Matt Ellis says:

    April 16, 2013

    It’s not a Visual Studio addin, so you don’t need to add it with the Visual Studio addin manager. Instead, extract the files in the zip file, and double click the Install-AngularJS.7.1.bat file. This should install the plugin for you.

  15. Avatar

    Zeeshan Abbasi says:

    June 12, 2013

    Great, Just what I was looking for.

  16. Avatar

    daniel says:

    June 12, 2013

    this does not work with the resharper 8 beta

  17. Avatar

    Rusty says:

    June 12, 2013

    I ran the Install-AngularJS.7.1.bat file from the downloaded zip file, however my visual studio 2012 does not show any angularjs intellisense. I’m using Visual Studio 2012 Ultimate with ReSharper 7.0

  18. Avatar

    Matt Ellis says:

    June 13, 2013

    @daniel – you can use ReSharper 8’s extension manager (in the ReSharper menu) to download a version of the plugin for ReSharper 8.

    @Rusty – the plugin doesn’t work with 7.0, only 7.1. This is because 7.1 is a free upgrade to 7.0 – just download it from the website.

  19. Avatar

    Dov says:

    July 2, 2013

    Can you please explain in more details, how to install it for Resharper 8?
    I just downloaded Beta 8, and I don’t know exactly what to do in the Extension Manager.
    Thanks

  20. Avatar

    Matt Ellis says:

    July 3, 2013

    It’s very straight-forward. Simply go to the ReSharper menu, select “Extension Manager” and then it’s just like the normal NuGet interface. Select “Online” from the list on the left, and type “Angular” in the search box in the top right. You should now see the AngularJS extension listed. Click it, and click the install button. And that’s it!

  21. Avatar

    Dov says:

    July 3, 2013

    Thanks, I just installed it.
    You should add to the steps above that before searching for “Angular”, the user should select from the upper left drop-down, “Include Prerelease”.

  22. Avatar

    Lanier says:

    August 15, 2013

    Do you know how to fix this?

    <div class="bar" style="width:{{Progress}}%;"></div>

    Resharper think that this is a critical error saying:
    Property Progress doesn’t exist in css 3.0

    In fact, if there were any way to say ingore errors that contain {{}} that would probably fix most of the false warning/errors resharper is showing me for angular.

  23. Avatar

    Tomer says:

    August 28, 2013

    How do I get rid of the red marker on Angular’s directives (or mine)?

  24. Avatar

    Matt Ellis says:

    September 10, 2013

    @Lanier, @Tomer – unfortunately, the plugin doesn’t recognise this syntax, and so they get treated as errors. Also, Visual Studio’s syntax highlighting gets involved and complains that Angular’s directives aren’t valid HTML.

  25. Avatar

    Sam Blowes says:

    December 10, 2013

    Are there any plans to allow angular tags.
    Like ng-form ?

    It currently shows a warning when using tags like this are in your page.

  26. Avatar

    Sam Blowes says:

    December 10, 2013

    @Lanier you should be using the ngStyle attribute
    http://docs.angularjs.org/api/ng.directive:ngStyle

  27. Avatar

    Bruce Wayne says:

    December 18, 2013

    Needs an update for the latest resharper! Jetbrains should have a vested interest in maintaining this …

  28. Avatar

    Bruce Wayne says:

    December 18, 2013

    Apologies, it is updated – I should learn to read 😉 get it via the resharper -> extension manager

  29. Avatar

    Tacker says:

    February 27, 2014

    I ran the .bat file but still don’t see the intellisense. Am I missing an additional step?

    • Avatar

      Tacker says:

      February 27, 2014

      Disregard this question. I saw your post on using extension manger. All is well. Thanks.

  30. Avatar

    sandeep says:

    April 14, 2015

    Can’t get it to work with resharper 9.1 and vs 2013

    • Avatar

      sandeep says:

      April 14, 2015

      I should have asked – Is there a plugin available for Resharper 9.1?

  31. Avatar

    Matt Ellis says:

    April 19, 2015

    It’s now available for 9.1. Check in the extension manager.

  32. Avatar

    Martin Cook says:

    August 21, 2015

    Hi, does this provide intelligence for a typescript vuewmodel do we can type vm. and we get all the properties and methods available on that class?

  33. Avatar

    Martin Cook says:

    August 21, 2015

    *intellisense

  34. Avatar

    Milo says:

    October 21, 2015

    I’m looking in the jetBrains extension manager, and its not there..??!!?

    I’m confused.

    • Avatar

      Milo says:

      October 21, 2015

      I tried, the download, unzip, install.bat file. rebooted.

      Reason I ask, is the standard VS intellise won’t show as the resharper seems to interfer.

      • Avatar

        Matt Ellis says:

        October 23, 2015

        Apologies, the plugin has only just been updated for 9.2. It’s now available to download in ReSharper → Extension Manager. (Ignore the zip files, they’re for ReSharper 8.x and possibly older)

  35. Avatar

    Blake says:

    March 8, 2016

    I’ve installed the AngularJS (for Resharper 10) 1.4.1 extension into Visual Studio 2012 multiple times to no avail. Restarted Visual Studio, restarted computer, uninstalled and then reinstalled. I’ve added the angular.js file into the project. I’ve tried everything I can find on this but it still does not work. My Resharper version is 10.0.2 and I’m using Visual Studio 2012 (11.0.50727.1)

    With just a simple project with a simple HTML file with the “ng-app” is reported as: “Validation (XHTML5): Attribute ng-app is not a valid attribute of element body”.

    I did notice that when I type “ng” that I get a hint list below my text showing different options such as “ng-…” or “data-ng-…” or “x-ng-…” but no intellisense other than that and when I complete it as ng-app=”” I get that error.

    Please help, I’m googled out.

    • Avatar

      Matt Ellis says:

      March 21, 2016

      Hi Blake. I think this is actually an issue with VS2012. As you’re seeing the “ng-…” items in the list, it seems like the ReSharper plugin is working as expected. However, the validation error is a Visual Studio warning. I don’t have VS2012 available any more, so can only suggest looking at Visual Studio’s options pages to see if you can disable this warning.

  36. Avatar

    Sunny says:

    July 11, 2016

    Hi Matt Ellis I use Avalon(https://github.com/RubyLouvre/avalon) to build my websit,
    It’s like AngularJS ,ReSharper not support ,Would you support in future?

  37. Avatar

    Luke says:

    August 24, 2016

    Hi Matt,

    I have ReSharper 2016.2. I can’t find the extension in the Extension Manager, but from looking at your GitHub repo it looks like you updated it. Are you planning on adding it to the Extension Manager? Or is there a way I can install it without using that?

    • Avatar

      Matt Ellis says:

      August 25, 2016

      Hi Luke. It’s not updated for 2016.2 yet, but it will be over the next few days.

Discover more