Question

我正在使用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>

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 intellisense。

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

Answer 2

这就是我所做的：

@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不知道它是一个脚本标记，并且让我完全自动完成。

Answer 3

使用Trey Mack的答案我无法在class =“”中获取css类的列表。

但是，通过将标记类型更改为text / html并修改app.run，我将获得语法和CSS类名称列表。

pdfkit.from_file([html_url], pdf_url)

...然后

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

P.S。我正在使用VS 2015

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

3 个答案: