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

admin管理员组

文章数量:1353129

I’m using Visual Studio 2012 to edit HTML and JavaScript. I’m adding templates by using partial views in inline script tags (see code below). AngularJS, a Javascript framework, requires that the type be text/ng-template, but Visual Studio does not recognize it as being HTML and does not provide syntax highlighting. If the type is text/HTML everything works fine.

My question: is there a way in Visual Studio 2012 to associate a custom script type to do HTML syntax highlighting? The solution should work not just for text/ng-template, but for other types where you want HTML syntax highlighting.

<script type="text/ng-template" id="filterOrder.html">
    <!-- Sidebar ment-->
    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>

I’m using Visual Studio 2012 to edit HTML and JavaScript. I’m adding templates by using partial views in inline script tags (see code below). AngularJS, a Javascript framework, requires that the type be text/ng-template, but Visual Studio does not recognize it as being HTML and does not provide syntax highlighting. If the type is text/HTML everything works fine.

My question: is there a way in Visual Studio 2012 to associate a custom script type to do HTML syntax highlighting? The solution should work not just for text/ng-template, but for other types where you want HTML syntax highlighting.

<script type="text/ng-template" id="filterOrder.html">
    <!-- Sidebar ment-->
    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>

• javascript
• html
• visual-studio
• visual-studio-2012
• angularjs

Share Improve this question Follow edited May 20, 2016 at 0:04 Michael Gaskill 8,0421010 gold badges3939 silver badges4444 bronze badges asked Apr 30, 2013 at 17:05 Mike Barlow - BarDevMike Barlow - BarDev 11.3k1818 gold badges6363 silver badges8484 bronze badges 3

• 3 This might help, though I'm not sure. – Evan Hahn Commented Apr 30, 2013 at 17:07
• It's for this very reason I use templateUrl and load partials externally, each in there own html file. – Lukus Commented Aug 29, 2013 at 7:27
• possible duplicate of Keep correct HTML syntax highlighting in <script> "text/html" templates – drzaus Commented Jan 30, 2015 at 20:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I couldn't convince VS2012 to highlight the text/ng-template scripts, so I resorted to using text/template and added a bit to my startup code. This will enumerate the script tags of whatever type you want and add them to $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 triggers HTML intellisense in my setup.

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

This is what I did:

@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 has no idea that it is a script tag and gives me full auto-plete.

Using Trey Mack's answer I wasn't able to get listings of css classes in class="".

However, by changing the tag type to text/html and modifying the app.run I'm getting syntax and CSS class name listings.

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

then...

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);
    });
});

P.S. I'm using VS 2015

本文标签：