Doesn't work at all in VSCode Insiders 1.26

[smlombardi]

Maybe I don't get something, but this is not working at all for me.

I used to use the "Angular 2 Inline" extension for html syntax highlighting for inline templates in my TS files.

I uninstalled that and installed the vscode-lit-html extension. But now templates in typescript files do not have syntax highlighting, formatting, nor Intellisense.

I am using the VSCode version of Typescript, currently 2.7.2.

---

VS Code version: Code - Insiders 1.26.0-insider (bd953248ad6a8e2f8896bfb78b3ae40e0fd47426, 2018-07-06T05:11:13.829Z) OS version: Darwin x64 17.6.0

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz (8 x 2800)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: enabled
rasterization: enabled
video_decode: enabled
video_encode: enabled
vpx_decode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|2, 2, 2| |Memory (System)|16.00GB (0.23GB free)| |Process Argv|/Users/st016lo/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron| |Screen Reader|no| |VM|0%|

Extensions (25)

Extension|Author (truncated)|Version ---|---|--- code-settings-sync|Sha|2.9.2 better-comments|aar|1.2.6 Bookmarks|ale|0.19.1 project-manager|ale|8.0.0 lit-html|bie|1.5.2 bracket-pair-colorizer|Coe|1.0.59 vscode-eslint|dba|1.4.12 tslint|eg2|1.0.33 vscode-great-icons|emm|2.1.36 prettier-vscode|esb|1.5.0 auto-rename-tag|for|0.0.15 path-autocomplete|ion|1.10.0 svg|joc|0.1.1 ecdc|mit|0.12.0 HTMLHint|mka|0.5.0 theme-monokai-pro-vscode|mon|1.1.8 vscode-scss|mrm|0.6.2 vscode-stylefmt|mrm|2.5.0 incrementor|nms|0.1.0 vscode-versionlens|pfl|0.21.1 quicktype|qui|11.0.26 stylelint|shi|0.37.0 rewrap|stk|1.9.1 sort-lines|Tyr|1.7.0 change-case|wma|1.0.0 (4 theme extensions excluded)

[mjbvz]

You are using template strings like:

html`<a>`

right? What when using TS 2.9?

[justinribeiro]

I can't duplicate this in 1.26.0-insider; seems to be working without issue. Have a piece a code we can look at?

[smlombardi]

This has no syntax coloring or hinting for me.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-tested-badge',
  template: `<span class="badge badge-pill badge-usertested">User Tested</span>`
})
export class UserTestedBadgeComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

[kytosai]

You must type "html" before "`" to highlight html tag in => After you must remove "html" text after coding in

I think this is bad :( .

[smlombardi]

@KytoSai Really? That is nuts. I'm going to stick with Angular2-Inline extension, then.

[justinribeiro]

If you're coding in Angular as in the sample provided, angular2-inline is likely the better option here, which takes advantage of the vscode-ng-language-service to give you specific completion and intellisense for that case.

I've stated this before, but ECMAScript 2015 spec and current ECMAScript 2019 draft states that template literals are strings. It's hard to assume that all template literals are html/css and that a single plugin or editor should parse them all as such, when all the specs says it's that it should be a string and may be something entirely different based on whom the developer is and what they are trying to accomplish. Hence why the extension looks for tagged literals, as support becomes more targeted and specific and helps meet a defined expectation of the developer.

Matt did release Comment tagged templates which adds basic syntax highlighting for JavaScript and TypeScript tagged template strings using a language identifier. This is also an option that covers the gap to handle more language cases in cases where no tagged literal is available.

[mjbvz]

Duplicate of #14