<p dir="auto">Copied from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="126581960" data-permission-text="Title is private" data-url="https://github.com/microsoft/vscode/issues/2000" data-hovercard-type="issue" data-hovercard-url="/microsoft/vscode/issues/2000/hovercard" href="https://github.com/microsoft/vscode/issues/2000">microsoft/vscode#2000</a></p>
<p dir="auto">When using Angular 2 and TypeScript I noticed that editing <code class="notranslate">template</code> strings of components in TypeScript files are not working as one expect. There is not autocomplete for tags and other usual HTML editing features.</p>
<p dir="auto">For example</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;'
})
export class AppComponent { }"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto">Of course it's because the type definition has declared <code class="notranslate">template</code> as a String and no part of VSCode knows that it's an HTML string.</p>
<p dir="auto">My proposal is to define a <code class="notranslate">HTMLString</code> type where it's basically just string but helps tooling in cases like this.</p>
<p dir="auto">If it was possible to do this, then we can define <code class="notranslate">CSSString</code>, <code class="notranslate">JavaScriptString</code>, <code class="notranslate">SCSSString</code> and so on...</p>
<h2 dir="auto">Motivation</h2>
<p dir="auto">ES6 Template strings make it much easier to put blocks of HTML code inline with JavaScript. This can be leveraged in frameworks like Angular. One disadvantage to this though, is that IDEs don't know that the string block should be formatted as HTML so there is no syntax highlighting.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({ selector: 'angular-demo' })
@View({
  template: `&lt;h3&gt;My Template&lt;/h3&gt;
             &lt;p&gt;I can put blocks of HTML here.&lt;/p&gt;
             &lt;p&gt;Unfortunately, there is no syntax highlighting.&lt;/p&gt;`
})
class Demo{ }"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">selector</span>: <span class="pl-s">'angular-demo'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-v">View</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`&lt;h3&gt;My Template&lt;/h3&gt;</span>
<span class="pl-s">             &lt;p&gt;I can put blocks of HTML here.&lt;/p&gt;</span>
<span class="pl-s">             &lt;p&gt;Unfortunately, there is no syntax highlighting.&lt;/p&gt;`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">Demo</span><span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Proposal</h2>
<p dir="auto">I propose a simple HTMLString type that is simply an alias for string but can signal to text editors that the string should be styled as HTML and can use HTML completion. This should be implemented in lib.d.ts to standardize the use of the type.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 * Alias for the string type used to denote the string should be shown with
 * HTML syntax highlighting
 */
type HTMLString = string;"><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> * Alias for the string type used to denote the string should be shown with</span>
<span class="pl-c"> * HTML syntax highlighting</span>
<span class="pl-c"> */</span>
<span class="pl-s1">type</span> <span class="pl-v">HTMLString</span> <span class="pl-c1">=</span> <span class="pl-s1">string</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Strengths:</h3>
<ul dir="auto">
<li>Simple to implement</li>
<li>No breaking changes</li>
<li>IDE support is optional</li>
</ul>
<h3 dir="auto">Weaknesses:</h3>
<ul dir="auto">
<li>Requires IDEs to be interested in implementing</li>
</ul>