Visual Studio 2015 - HTML - Angular Syntax Highlig

Question

We use angular heavily in our html pages and currently attributes that start with ng- get a different fore color applied to content inside the attribute. This is also the case with values inside an angular expression {{expression}}. This makes reading larger HTML documents easier on the eye especially when working with the Angular parts.

However as soon as you add the data- prefix to an angular tag like changing ng-if to data-ng-if the highlighting is lost/removed. So my question is how can I get the .html and .cshtml text editor to apply collor formatting to my html attributes that start with data-ng-?

---

What I have tried so far

I started with trying to find where I could find the recognition of the ng- attribute prefix and figured I could edit it from there but this is where I got stuck.

Note that between each attempt to solve this issue I have restarted Visual Studio. If there is something else I should do/try as well to ensure that a cache somewhere is refreshed please let me know, maybe I solved the issue but am not seeing results because of that.

Color Theme Editor

I recently discovered a new extension for Visual Studio called Color Theme Editor. Using color matching I found that the ng- attributes had the color applied in the theme using Text Editor -> HTML Client Template Value. Trying to find this I searched the Options in VS and came across Options -> Text Editor -> HTML (Web Forms) -> Formatting -> Tag Specific Options... but I could not find anything specific to the Angular attributes here.

Other Extensions

I am now thinking maybe its actually a part of an extension and not baked into Visual Studio. These are the relevant extensions I have installed:

• Microsoft ASP.NET and Web Tools
• Microsoft ASP.NET Web Frameworks and Tools
• Visual Studio Extensions for Windows Library and JavaScript

I can not find any thing inside of VS where I can edit settings for any of this but I could be looking in the wrong place.

Web Tools Extension

I found a folder named C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Schemas\1033\HTML and have edited the file SchemaCatalog.xml to include a new element which is a copy of the angular element.

 <schema File="angularData.xsd" FriendlyName="AngularDataJS" Uri="http://schemas.microsoft.com/intellisense/angular" IsSupplemental="true" CustomPrefix="data-ng-" />

I then created a copy of the angular.xsd file with the name angularData.xsd and did a find/replace on ng- with data-ng-. In the SchemaCatalog.xml I ordered the line items so that the new record was before records that had the CustomPrefix="data-". This also seemed to not have any effect.

XSD files

I have also tried looking in the folder C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Packages\schemas\html and the .xsd files but here I also could not find anything with wording relating to angular or ng- as prefix.

Answer 1

did you tried ReSharper with AngularJS plugins https://blog.jetbrains.com/dotnet/2013/02/28/angularjs-support-for-resharper/

AngularJS plugins

https://resharper-plugins.jetbrains.com/packages/AngularJS/

Answer 2

What I was able to find out is that this color for ng-XXX attribute can be modified in Font&Colors / HTML Client Template Value (in Display Items panel). My guess is that there is somewhere client template for Angular installed. One which tells VS that ng- prefix is Angular tag making it "client template" tag. I was able to find this file:

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Schemas\1033\HTML\angular.xsd

Some names are listed there but I am not sure if adding others with data-ng- prefix will apply this color. Also I found so far nothing about where those client templates stored and how to eventually manage them.