Visual Studio 2015 - HTML - 角度语法突出显示

Question

我们在html页面中大量使用angular，当前以ng-开头的属性会获得应用于属性内容的不同前景颜色。角度表达式{{expression}}中的值也是如此。这使得阅读更大的HTML文档更容易，特别是在使用Angular部件时。

但是，只要将data-前缀添加到角度标记（如将ng-if更改为data-ng-if），突出显示就会丢失/删除。所以我的问题是如何让.html和.cshtml文本编辑器将collor格式应用于以data-ng-开头的html属性？

---

到目前为止我尝试过的

我开始试图找到我可以找到ng-属性前缀的识别位置，并认为我可以从那里编辑它，但这是我卡住的地方。

请注意，在每次尝试解决此问题之间，我已重新启动Visual Studio。如果还有其他什么我应该做/尝试以确保某个地方的缓存刷新请告诉我，也许我解决了问题，但由于这个原因我没有看到结果。

Color Theme Editor

我最近发现了一个名为Color Theme Editor的Visual Studio新扩展。使用颜色匹配我发现ng-属性使用Text Editor -> HTML Client Template Value在主题中应用了颜色。试图找到这个我搜索VS中的选项并遇到Options -> Text Editor -> HTML (Web Forms) -> Formatting -> Tag Specific Options...但我在这里找不到任何特定的Angular属性。

Other Extensions

我现在想的可能它实际上是扩展的一部分而不是在Visual Studio中。这些是我安装的相关扩展：

• Microsoft ASP.NET和Web工具
• Microsoft ASP.NET Web框架和工具
• 适用于Windows库和JavaScript的Visual Studio扩展

我在VS内部找不到任何可以编辑任何设置的东西，但我可能会找错了地方。

Web Tools Extension

我找到了一个名为C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Schemas\1033\HTML的文件夹，并编辑了文件SchemaCatalog.xml以包含一个新元素，它是angular元素的副本。

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

然后我创建了一个名为angular.xsd的angularData.xsd文件的副本，并使用ng-在data-ng-上进行了查找/替换。在SchemaCatalog.xml我订购了订单项，以便新记录在具有CustomPrefix="data-"的记录之前。这似乎也没有任何影响。

XSD files

我也尝试查找文件夹C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Packages\schemas\html和.xsd文件，但在这里我也找不到任何与angular或ng-作为前缀相关的措辞。

Answer 1

我能够找到的是ng-XXX属性的这种颜色可以在字体和颜色/ HTML客户端模板值中修改（在“显示项目”面板中）。我的猜测是安装了Angular的某个客户端模板。一个告诉VS ng-前缀是Angular标签，使其成为“客户端模板”标签。我能够找到这个文件：

C：\ Program Files（x86）\ Microsoft Visual Studio 14.0 \ Common7 \ IDE \ Extensions \ Microsoft \ Web Tools \ Schemas \ 1033 \ HTML \ angular.xsd

这里列出了一些名称，但我不确定添加其他带有data-ng-前缀的名称是否会应用此颜色。此外，我到目前为止还没有发现存储这些客户端模板的位置以及如何最终管理它们。

Answer 2

你用AngularJS插件https://blog.jetbrains.com/dotnet/2013/02/28/angularjs-support-for-resharper/尝试过ReSharper吗？

AngularJS插件

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