Is there an vscode extension we can use for syntax highlighing in html templates?

[Pika-Pool]

Right now it looks like a simple string. it'll be much better if we could get some syntax highlighting and ability to check/format the html and css in template string. Something like what the lit-html vscode extension does

[ECorreia45]

Not yet (working on it).

However, you can use inline-html or even the lit-html one and do the following in the code;

// utils/html.ts
export const html = x => x;

// my-button.ts
import {html} from './utils/html';

class MyButton extends WebComponent {
  get template() {
    return html`<button><slot></slot></button>`[0];
  }

  get stylesheet() {
    return html`<style>button {color: #900}</style>`[0];
  }
}

I know this is a hacky way but that is the best I can suggest for now.

I created a feature request for this
#16

[Pika-Pool]

The hack doesn't work as intended. The html function will return an array of type TemplateStringsArray, and not the string. This is my solution:

function html(strings: TemplateStringsArray, ...values: any[]) {
	return strings.reduce(
		(res, currString, currIndex) =>
			res + currString + (values[currIndex] ?? '').toString(),
		'',
	);
}