22388

Visual Studio 2015 - HTML - Angular Syntax Highlight

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-?

<a href="https://i.stack.imgur.com/lu3gm.png" rel="nofollow"><img alt="Syntax highlight example" class="b-lazy" data-src="https://i.stack.imgur.com/lu3gm.png" data-original="https://i.stack.imgur.com/lu3gm.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

<hr /><h2>What I have tried so far</h2>

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.

<em>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.</em>

<h3>Color Theme Editor</h3>

I recently discovered a new extension for Visual Studio called <a href="https://visualstudiogallery.msdn.microsoft.com/6f4b51b6-5c6b-4a81-9cb5-f2daa560430b" rel="nofollow">Color Theme Editor</a>. 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.

<h3>Other Extensions</h3>

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:

<ul><li>Microsoft ASP.NET and Web Tools</li> <li>Microsoft ASP.NET Web Frameworks and Tools</li> <li>Visual Studio Extensions for Windows Library and JavaScript</li> </ul>

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.

<h3>Web Tools Extension</h3>

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 <em>which is a copy of the angular element</em>.

<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.

<h3>XSD files</h3>

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.

Answer1:

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.

Answer2:

did you tried ReSharper with AngularJS plugins <a href="https://blog.jetbrains.com/dotnet/2013/02/28/angularjs-support-for-resharper/" rel="nofollow">https://blog.jetbrains.com/dotnet/2013/02/28/angularjs-support-for-resharper/</a>

AngularJS plugins

<a href="https://resharper-plugins.jetbrains.com/packages/AngularJS/" rel="nofollow">https://resharper-plugins.jetbrains.com/packages/AngularJS/</a>

Recommend

  • c++11 regex extracting text
  • No resource found that matches the given name: attr 'homeHint'
  • What's the usecase for ons.ready()?
  • Theme in user control
  • jquery mobile, use android hardware back button to close a panel
  • ActionBar three-dot dropdown opens at the wrong place
  • After Installing PMD in Luna in Prespective it is Not Showing?
  • Styling text for textarea Wicket
  • How do I embed a custom user-control in MS Word?
  • Android error - Failed to find style 'toolbarStyle' in current theme
  • gulp.watch running same task multiple times when saving many files
  • HTML code to upload images
  • Installing SSL on AWS EC2 Bitnami Mean Stack
  • How to modify the HTML tag in Drupal 6?
  • Use neo4j server instead of embedded mode
  • Configuring Ninject
  • button in popup.html not working
  • Typecasting `this` of a base class template to its derived class
  • VB.NET 2012 Property Set on Property Get
  • CKeditor stripping font tags instead of converting to span
  • how do you obtain the address of an instance after overriding the __str__ method in python
  • How can I add div content to a new page in jspdf?
  • Is there any way to call saveCurrentTurnWithMatchData without sending a push notification?
  • Regex for Specific Tag
  • Avoid registering duplicate broadcast receivers in Android
  • How to know which Linq statement produced the SQL on hand during runtime?
  • Easiest way to get current unix timestamp via XSL
  • How to get current document uri in XSLT?
  • Not able to aggregate on nested fields in elasticsearch
  • Is playing sound in Javascript performance heavy?
  • Inline R code in YAML for rmarkdown doesn't run
  • Swift: Switch statement fallthrough behavior
  • Insert into database using onclick function
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Knitr HTML Loop - Some HTML output, some R output
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Android Google Maps API OnLocationChanged only called once