问题
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.
回答1:
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.
回答2:
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/
来源：https://stackoverflow.com/questions/38659594/visual-studio-2015-html-angular-syntax-highlight