javascript - Visual Studio - 为 HTML 模板和语法突出显示使用自定义脚本标记类型

Question

我正在使用 Visual Studio 2012 编辑 HTML 和 JavaScript。我通过在内联脚本标签中使用部分 View 来添加模板(请参见下面的代码)。 AngularJS 是一个 Javascript 框架，它要求类型是 text/ng-template，但是 Visual Studio 不识别它是 HTML 并且不提供语法高亮。如果类型是 text/HTML 一切正常。

我的问题:Visual Studio 2012 中是否有一种方法可以关联自定义脚本类型以进行 HTML 语法高亮显示？该解决方案不仅适用于 text/ng-template，还适用于您希望突出显示 HTML 语法的其他类型。

<script type="text/ng-template" id="filterOrder.html">
    <!-- Sidebar comment-->
    Search: <input ng-model="query"/> 
    Sort by: 
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
    <div id="status">Current filter: {{query}}</div>
</script>

Answer 1

我无法说服 VS2012 突出显示 text/ng-template 脚本，所以我求助于使用 text/template 并在我的启动代码中添加了一些内容。这将枚举您想要的任何类型的脚本标签并将它们添加到 $templateCache。

    var app = angular.module('app', [...]);

    app.run(function ($templateCache) {
        // <script type="text/ng-template"> ... is preferred, but VS 2012 doesn't give intellisense there
        angular.element('script[type="text/template"]').each(function(idx, el) {
            $templateCache.put(el.id, el.innerHTML);
        });
    });

text/template 在我的设置中触发 HTML 智能感知。

<script type="text/template" id="home.html">
    <h3>HTML intellisense, code completion, and formatting!</h3>
</script>