Visual Studio -为HTML模板和语法高亮显示使用自定义脚本标签类型

Visual Studio - Using Custom Script Tag Type for HTML Templates and Syntax Highlighting

本文关键字：显示 自定义 脚本 类型 标签 高亮 语法 Studio HTML Visual      更新时间：2023-09-26

我使用Visual Studio 2012来编辑HTML和JavaScript。我通过在内联脚本标签中使用部分视图来添加模板(见下面的代码)。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>

我无法说服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>

我是这样做的:

@using (Html.NgTemplate("Text"))
{
    <div class="control-group">
        <label class="control-label">{{item.label}}</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" ng-model="item.value">
        </div>
    </div>
}

Visual studio不知道它是一个脚本标签，并给我完整的自动完成。

使用Trey Mack的回答，我无法在class=" "中获得css类的列表。

然而，通过将标签类型更改为text/html并修改app.run，我得到了语法和CSS类名列表。

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

然后……

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/html"]').each(function(idx, el) {
        $templateCache.put(el.id, el.innerHTML);
    });
});

注:我使用VS 2015

相关文章：