AngularJS support for ReSharper
February 28th, 2013 by Matt EllisIn 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:
It also supports the HTML5 “data-” prefixed versions of the same 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:
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)
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:
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.
Tags: angularjs, JavaScript, plugins, ReSharper, ReSharper 7.1
February 28th, 2013 at 5:34 pm
Wooooohooooooooo!
February 28th, 2013 at 11:24 pm
Now I want the same thing for Knockout…:)
March 1st, 2013 at 12:57 pm
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!
March 1st, 2013 at 3:04 pm
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.
March 1st, 2013 at 10:00 pm
Terrific, thanks Frank, I’ll check that out!
March 1st, 2013 at 10:00 pm
Terrific, thanks Frank I’ll check that out!
March 1st, 2013 at 10:27 pm
@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.
March 3rd, 2013 at 11:46 pm
How come no ultimate edition support?
March 4th, 2013 at 3:53 am
Awesome stuff Jetbrains!
March 4th, 2013 at 1:51 pm
Hi Steve. Could you clarify, please? This plugin doesn’t require any particular support for Visual Studio editions.
March 4th, 2013 at 9:10 pm
Guys this is awesome,
Can you enable template support for TypeScript too? would be awesome!
March 11th, 2013 at 3:01 pm
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
April 15th, 2013 at 7:02 pm
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.
April 16th, 2013 at 11:05 am
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.
June 12th, 2013 at 11:00 am
Great, Just what I was looking for.
June 12th, 2013 at 1:13 pm
this does not work with the resharper 8 beta
June 12th, 2013 at 8:52 pm
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
June 13th, 2013 at 10:01 am
@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.