Geek Answers Handbook

Visual Studio 2015 - HTML - Angular Syntax Highlighting

We heavily use angular in our html pages and currently attributes starting with ng- get a different background image color applied to the content inside the attribute. This also applies to values ​​inside an angular {{expression}} . This makes it easy to read large HTML documents by eye, especially when working with parts of angular.

However, as soon as you add the data- prefix to the angular tag, for example, with ng-if replaced by data-ng-if , the selection will be lost / deleted. So my question is how to get the text editor .html and .cshtml apply collor formatting to my html attributes starting with data-ng- ?

Syntax highlighting example

What I tried so far

I started by finding where I could find the recognition of the ng- attribute ng- , and decided that I could edit it, but I'm stuck here.

Please note that between each attempt to resolve this problem, I restarted Visual Studio. If there is anything else I have to do / try to make sure the cache is updated, please let me know, maybe I solved the problem, but because of this I do not see the results.

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 used in the theme using Text Editor -> HTML Client Template Value . Trying to find this, I looked for an option in VS and came across Options -> Text Editor -> HTML (Web Forms) -> Formatting -> Tag Specific Options... but I could not find anything specific for the angular attributes.

Other extensions

Now I think, maybe this is actually part of the extension and is not baked in Visual Studio. These are the appropriate extensions I installed:

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

I cannot find anything inside VS where I can edit the settings for any of them, but I could search in the wrong place.

Web Tool Extensions

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

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

Then I made a copy of the angular.xsd file named angularData.xsd and searched / replaced with ng- using data-ng- . In SchemaCatalog.xml I ordered the positions so that the new record was before the records with CustomPrefix="data-" . It also had no effect.

XSD Files

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

+3
source share
2 answers

What I was able to find out is that this color for the ng-XXX attribute can be changed to Font & Colors / HTML Template Value (in the Display Items panel). I assume there is somewhere a client template for Angular. The one that tells VS that the ng- prefix is ​​an Angular tag that creates its client template tag. I managed 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'm not sure that adding others with the data-ng- will apply this color. Also, I did not find anything about where these client templates are stored and how to ultimately manage them.

+1
source

More articles:


All Articles