AngularJS Intellisense in Visual Studio 2012

Feb 19, 2013

Recently, a lot of people have asked for Intellisense support for AngularJS in the Visual Studio HTML editor. The bad news is that there is no extensibility for providing additional HTML attribute Intellisense, so I can’t ship this support in Web Essentials.

The good news is that we can accomplish this through a more manual mechanism.

Here’s what you need to do:

Step 1

Find the file commonHTML5Types.xsd located in the Visual Studio install directory and back it up (just in case). Mine is here: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html

Step 2

Download this new version of commonHTML5Types.xsd and replace the existing one from the directory in Step 1 with it.

Step 3

Restart Visual Studio and that's it. You now have all the ng-* attributes available in Intellisense. This Works On My Machine^tm, so please let me know if it works on yours too.

I still want to add native support in either Visual Studio or Web Essentials, so if this is something you’re interested in, please vote for it here.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Get latest CSS 3 support in Visual Studio 2010Not everybody is able to upgrade to Visual Studio 2012 RC due to company policy or other reasons, bu...Debug JavaScript in Visual Studio 2005Explains how to enable debugging of JavaScript in Visual StudioHTML5 & CSS3 in Visual Studio 2010 SP1Since the release of Visual Studio 2010 SP1 beta last month, there has been a lot of questions regar...

Comments (24) -

Nick

2/19/2013 7:52:35 PM #

Is it possible to extend resharper?

Jarle

3/8/2013 3:34:42 AM #

Since it is JetBrains that made ReSharper, maybe you should try asking them!

Jarle

3/8/2013 3:40:39 AM #

After a quick lookup on their site, the answer is yes

confluence.jetbrains.com/.../ReSharper+7+Plugin+Development

Dmitriy

2/20/2013 2:10:17 AM #

nice job. it works

Mads Kristensen

2/20/2013 8:37:44 AM #

Awesome!! Thanks for confirming

Frank

2/20/2013 2:31:54 AM #

That doesn't seem to work for me with ReSharper (VS 2012.1). What exactly does the category="Angular" attribute do?

Alon

2/20/2013 6:36:51 AM #

This does not work for me (i have resharper too)

Ricky

2/20/2013 6:44:39 AM #

Thanks for sharing. I have created the VS2010 version for anybody who's interested.

http://sdrv.ms/Xp1KPF

Mads Kristensen

2/20/2013 8:38:05 AM #

Nice! Thanks

prabhakar

2/27/2013 3:41:59 AM #

Frank

2/20/2013 10:30:29 AM #

For everyone using ReSharper: You could either disable ReSharpers Intellisense for HTML (you'll easily find it in the settings) or you can go ahead and get a Resharper plugin called resharper-angularjs.

https://github.com/JetBrains/resharper-angularjs

Note that you'll need the ReSharper SDK to compile the plugin.

Volkan Atabey

2/23/2013 12:42:07 PM #

thanks mads kristensen ;)

Kevin Hakanson

2/25/2013 10:28:31 AM #

I did something similar for jQuery Mobile data- attributes a couple years ago in Visual Studio 2010. The project is on github, but I haven't updated for VS2012 or recent version of jQuery Mobile. Feel free to take if it has value.
github.com/hakanson/intellisense-jquery-mobile

Chowdhury M Rahman

2/25/2013 10:32:41 AM #

Works.
Thank you so much.

Jon Galloway

2/25/2013 11:17:32 AM #

What about putting the Angular attributes in a new angular.xsd and referencing it from commonHTML5Types.xsd using <xsd:import schemaLocation="angular.xsd"/> ? It'd still require an edit to commonHTML5Types.xsd but would work better with any other edits or additions.

BrainCrumbz

3/8/2013 2:55:05 AM #

Thanks for sharing! My tiny tiny contribution:

** I like not to have complaints and green squiggles for unknown HTML5 attributes, so I always use the data-ng-* version of angular attributes. Hence I just cloned the xsd:attribute items inside angularJSDirectives.xsd, obtaining name=”data-ng-app”, name=”data-ng-bind”, and so on

** ng-app seems to be listed twice

Matthew Blott

3/20/2013 2:28:27 AM #

Ha, I don't like the squiggles either

tim.l

3/8/2013 1:16:02 PM #

I found open source that already
github.com/refactorthis/angularjs-visualstudio

michael

3/14/2013 11:49:49 AM #

Awesome!
Needs "ng-submit."

ranadheer

3/22/2013 5:26:11 AM #

Thank you very much. it is working...

nadeemc

4/8/2013 10:35:24 AM #

Very useful, thank you! Modified to use data-ng-* instead. For this interested in doing the same, open the file in notepad, find-and-replace name="ng- with name="data-ng-

Mark Rendle

4/10/2013 10:05:23 AM #

I added some missing tags (mostly form-related ones like ng-pattern) in a gist here: https://gist.github.com/markrendle/5356469

John O'Connor

4/28/2013 2:48:12 AM #

Thanks Mads, this is a great help! What I'd still like to see though is javascript intellisense for angular. While I can get one or two method names to pop up by adding a script reference to angular.js at the top of my .js file, there's no parameter information and lots of other missing things. What's needed is a vsdoc file with XML comments as has been done for jQuery. Do you know if anyone has any plans to generate such a file for angular?