autocomplete html tags in strings in Visual Studio code?

Question

Is this possible in Visual Studio? I'm following a Wes Bos tutorial and while he's typing html in backticks (therefore in a string) in javascript, the html end tags autocomplete.

Answer 1

Are you looking for this extension ?

It allows syntax highlighting and auto completion inside tagged template strings.

Answer 2

I found bierner.lit-html works perfectly.

I tried Tobermory.es6-string-html too but this only gives syntax highlighting, not autocompletion.

Note that both require you to prefix your html strings with a special comment, or html:

class DashboardView extends View {
  __html__ = html`
    <div class="mt-8 px-2 text-center">
      Look, syntax highlighting!
    </div>
  `
}

Don't worry about the html prefix, it doesn't interfere with your code, and is recognised in other places which handle markdown like github, and as you can see, stackoverflow:

class DashboardView extends View {
  __html__ = `
    <div class="mt-8 px-2 text-center">
      No syntax highlighting :-(
    </div>
  `
}

And the cherry on the cake is that other plugins which operate on HTML such as bradlc.vscode-tailwindcss which adds tailwindcss class intellisense also work: