mjbvz / vscode-lit-html

Adds syntax highlighting for html inside of JavaScript and TypeScript tagged template strings

Adds syntax highlighting and language support for html inside of JavaScript and TypeScript tagged template strings, such as used in lit-html and other frameworks.

Features

• Syntax highlighting of inline html blocks.
• IntelliSense for html tags and attributes.
• Quick info hovers on tags.
• Formatting support.
• Auto closing tags.
• Folding html.
• CSS completions in style blocks.
• Works with literal html strings that contain placeholders.

Usage

The lit-html extension adds highlighting and IntelliSense for lit-html template strings in JavaScript and TypeScript. It works out of the box when you use VS Code's built-in version of TypeScript.

If you are using VS Code 1.30 or older and are using a workspace version of typescript, you must currently configure the TS Server plugin manually by following these instructions

Configuration

You can either configure this plugin using a tsconfig or jsconfig as described here, or configure the plugin using VS Code. This requires VS Code 1.30+ and TS 3.2+. Note the VS Code based configuration override the tsconfig or jsconfig configuration.

Tags

This extension adds html IntelliSense to any template literal tagged with html or raw:

import {html} from 'lit-html'

const a = html`
    <div></div>
`

You can enable IntelliSense for other tag names by settings "lit-html.tags":

"lit-html.tags": [
    "html",
    "template"
]

Formatting

The plugin formats html code by default. You can disable this by setting "lit-html.format.enabled": false:

"lit-html.format.enabled": false

vscode-lit-html's Issues

Add format to html

Thank you for this extension.
Could you add format to HTML block inside a tag function?

Tag pattern settings to override the default begin pattern

The extension is great. But in my case, I desired a custom tag pattern. Sometimes, I need a pattern to render html like below:

return /* @html */`
	<div>hello</div>
`

I prefer the pattern like

(?x)(\\s+?(\\w+\\.)?(\\/\\*\\s@)?(?:html|raw)(\\s\\*\\/)?\\s*)(`)

I have set it in my ~/.vscode/extentions. I do know that the pattern is not very grace for your repository. So maybe a setting for tag pattern can help us set the custom begin.

Thanks a lot.

Highlighting does not work in html files

After update Visual Studio Code to version 1.29.0, highlighting html is not working.

Closing tag autocompletion is missing '>'

Steps to reproduce

1. Type <some-tag></

Actual

• The plugin suggests /some-tag

Expected

• The plugin suggest /some-tag>

Suggestions

Even better, the plugin could automatically insert the closing tag when user finishes typing the opening tag. For example, the plugin automatically inserts </some-tag> after user types <some-tag> or <some-tag attribute1="value1" attribute2="value2">.

Syntax highlight JS parts

From @TimvdLippe on October 17, 2017 12:30

In the code snippet gif in the README, the syntax highlighting of HTML looks very nice. However, the ${title} seems to not be highlighted to note that title is a JS variable. Could the dynamic parts of the template literal be syntax highlighted as JS?

Copied from original issue: microsoft/typescript-lit-html-plugin#6

@page error in styled-components

I mistakenly posted the issue here, close it

Glitched syntax highlighting when ${var} in css prop value

Syntax highlighting glitches when ${var} in a css prop. Stumbled on this accidently just now, haven't yet tracked it down:

Syntax-highlighting for svg template literals

The HTML within this JavaScript template literal is highlighted:

html`<p>foo</p>`

However lit-html also support an svg tag, and the SVG (i.e. HTML) is not syntasx-highlighted:

svg`<g style="transform: translate(10px -10px)"></g>`

Intellisense adding "this" when its already there

I am pretty sure it is this module - I have tried disabling it and trying to cause the issue I describe below and I can't. When I re-enable this module the problem occurs fairly quickly afterwards - not every time but seems to be a timing issue when typing fast.

The problem... I am typing something fairly rapidly like
this.willHaveAProblem = this.shadowRoot.querySelector('#test')
as I am typing after I have typed this. an option for (for instance) willHaveAProblem appears as a possibility. I can either press tab or sometimes have finished typing the complete variable and type a space, but the result I end up with is
this.this.willHaveAProblem
that is a double this.
It is not every time and its not always the left hand side of an equals, it can be anywhere.

It sometimes seems related to the existence of class methods. For instance, I am frequently typing something like the following in the constructor because the function is to be called by a lit-html event

this._myClassMethod = this._myClassMethod.bind(this)

the intellisense options shown after I have typed the = or I have already added the following:
<some-element @value-changed="${this._myClassMethod}"> somewhere in the render() function

sometimes have both a class property and a class method. If I select the property the issue never occurs, if I select the class method then it sometimes occurs.

The HTML selection & documentation are different

The HTML file has the highlight the background color of the HTML tag name when selected and the documentation title is styled. In the JS file no.

Atom Plugin?

This looks awesome. would you consider porting it to atom?

Best,
B

[Feature Request] Extend to other languages

Are there any plans to extend this functionality to other languages?
I would love to see syntax highlighting in PowerShell - inside HereStrings, specifically.

Here are the two common PowerShell extensions:
.ps1
.psm1

Possible/easy to enable for ejs templates?

The plugin doesn't currently highlight tagged templates strings in ejs files

<div>
  <%- html`<button>` %>
</div>

The<button> doesn't get syntax highlighting

Any idea what would go into enabling this? I'd love to help but not sure where to start

it does not work with svg``

Support highlighting in script tags

Currently syntax highlighting only works inside .js files. It would be great if it could also support highlighting inside <script> tags inside .html files.

Warn for malformed HTMLfragments

lit-html requires that the HTML be roughly well formed, and that expression only occur in valid attribute value or text content positions.

This is not allowed at all:

html`<${'a'}></${'a'}>`

and users would like warnings on malformed HTML in general, like:

html`<div><span><div>`

The shortcut to comment doesn't work with CSS

The shortcut to comment doesn't work with CSS, it comments as HTML:

add possibility to use comments /*html*/

It would be nice if the extention would also work with comments like so:

/*html*/`<div></div>`

Instead of only rely on

html`<div></div>`

One might use a library that is not named "html".

Thank you for this great plugin!

Expecting property value when using multi-line template literal

It seems that including an expression within a style attribute does not work if you have multiple nested templates.

string "html" should be ignored when at the end of a template literal

I found an edge case but it could be common. If you have the string "html" at the end of a template literal the syntax highlighting kicks in for the rest of the document but it's not ended so it messes up the rest of the file.

Can I use this to highlight a Vue template inside a JS file?

EDIT: #38

EDIT: I feel like I just wasted hours of my life! The solution was #14 simply paste into the lit.html.json file:

"begin": "(`)(?=$|[\s\S]<[a-zA-Z][\s\S]>[\s\S]*)",

or even just "(`)"

Please could you just make this default?! I read the whole political problems thread with the guy that came up with this addition, but who cares? This extension is almost perfect with such a tiny mod! THANKS for your work on this!! :)

---

Hi,

In my standard js file that contains my Vue component I have:

Vue.component('results', {
  props: { result: Object },
  template: `<div>
  <p>Your Expression is <strong>{{result.typeOfExpression}}</strong></p>
  <p>You are <strong>{{result.duality}}</strong></p>
  <p>You are a <strong>{{result.complexity}}</strong> Expression</p>
  <p>Your primary number is <strong>{{result.primaryNumber}}</strong></p>
  <p>Your second number is<strong>{{result.secondNumber}}</strong></p>
  <p>Your third number is<strong>{{result.thirdNumber}}</strong></p>
  <h3>Your 9-Energy Natural Expression is:</h3>
  <h2><strong>{{result.primaryNumber}}-{{result.secondNumber}}-{{result.thirdNumber}}</strong></h2>
  <p><strong>{{result.text}}</strong></p>
</div>`,
});

But the HTML is not being highlighted as it is not in a tagged template literal?

I have been playing about with the syntax for ages now.. please could someone show me how I could make this work?

I can put the HTML string into a variable and have it:

template: variableWithHTMLInString

But how could I make a variable that then has the syntax highlighted?

If I add html in front of the template string the highlighting works, but the program doesn't as it is undefined! Why is this, can't find it in the docs?

Cheers!

Build tag name completions from HTMLElementTagNameMap

When writing custom elements it's possible to add their name and class to the type system via HTMLElementTagNameMap:

/** A test element */
export class XFoo extends HTMLElement {}

declare global {
  interface HTMLElementTagNameMap {
    'x-foo': XFoo;
  }
}

It's be great if tag name completion and documentation came from the keys and values of HTMLElementTagNameMap.

Even better would be if we standardized on some JSDoc annotations for describing attributes for attribute completion:

/** 
 * A test element
 * @attribute bar The description of the bar attribute.
 */
export class XFoo extends HTMLElement {}

How to use with Monaco editor?

Do you have any idea?

func(html`...`) is not recognized, but func(<space>html`...`) is

Support for nested html

For now, the plugin does not support nested html methods, for example one from lit-html readme:

const render = () => html`
  <ul>
    ${repeat(items, (i) => i.id, (i, index) => html`
      <li>${index}: ${i.name}</li>`)}
  </ul>
`;

Nested <li>... is not properly highlighted.

Add IntelliSense

Generalize name/description of package

Hi!

Thanks for this vscode plugin. Only one I've found that successfully highlights html in js template strings. Great work! 👏

Might I suggest to generalize the description or name of the package? It was very hard to find, I had to digg to the bottom of vscode issues on github to find your post about your package (thanks for posting there btw!).

I use choojs as a front-end framework which also uses js template strings for the html. Maybe if the description or key works would contain "html in js template strings" it would be easier to find when searching in vscode packages. I don't even know if that is possible, anyway.

Again awesome work, thank you.
I might soon try to install your intellisens plugin seems awesome aswell 😃

Cheers

HTML only tags

I believe this is tagged template literal w(data, ":calendar")..., yet extension doesn't work. Would you try parsing for things other than HTML since it could be abbreviated and you claim to support this family of languages?

CSS @apply rules are marked as errors.

ts-style-plugin will give an error for CSS @apply rules within <style> of HTML template literals (of polymer, not lit-html).

Spec: https://tabatkins.github.io/specs/css-apply-rule/

@apply is used a lot for Polymer 3. Supporting it will ease the migration from Polymer 2 -> Polymer 3 -> lit-html.

The selected tag highlight does not work

Add emmet support inside html template tag

I tried to dig into this myself, but couldn't find anything on it, so it might not be possible (not sure), but it would be nice if emmet worked inside the html template tagged literal.

Doesn't work at all in VSCode Insiders 1.26

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)

Does not work when a space exists before html

works

const view = (state, emit) =>html`
  <div>Hello World!</div>
`

not working

const view = (state, emit) => html`
  <div>Hello World!</div>
`

CSS IntelliSense not working inside html template

I have tried every available extension for CSS autocomplete. This works but not completely supported.

CSS in HTML stopped being highlighted as of VSC Version: 1.25.0

I'd swear it used to work, but it's possible I'm losing my mind. Apologies if it's the latter.

The color picker doesn't work

The color picker doesn't work.

Support HyperHTML and/or contextual html function calls

HyperHTML follows a similar approach like lit-html. Thus, a slight different way of accessing the html tagged template string function using this. context:

class MyElement extends HyperHTMLElement {
  render() {
    return this.html`
    Hello <strong onclick=${this}>HyperHTMLElement</strong>
    ( ${this.state.clicks} )`;
  }
...

See https://github.com/WebReflection/hyperHTML-Element.

Can this work with standard template literals (non-tagged)?

Should this be working with non-tagged template literals?

For example, running insiders 1.20 and a ts file including the following I don't get any syntax highlighting:

return `
    <div class="mb-Summary" data-mb-controls="${idx}" aria-selected="${data.summarySelected}">
        <a class="mb-Summary_TitleAndStatus">
                <h2 class="mb-Summary_Title">${data.Stake} ${data.Type}</h2>
        </a>
    </div>
`

Should that work?

Cannot find name 'html'

All the examples have 'html' prefixed to the template string but not how to declare html as something to use. I'm working on SPFX extensions and have to use template inline strings everywhere to manipulate innerHtml and would love to make this work.

this.domElement.innerHTML = `
  <div class="${styles.app}">
    <!-- ... -->
  </div>
`

If I just add 'html' before the template string I get a syntax error, which makes sense cause it looks like a variable that isn't being declared anywhere.

Do I literally have to add declare var html somewhere to make this work?

Coincidentally, there's some nice HTML-in-JS-string-literal highlighting just in this Github post, and I didn't need an extension or funny keyword to make it work 😉

Slightly more loose rule

I hope the plugin allow some variants to support more libraries:

• foohtml (prefixes)
• fooHTML (uppercases)

What do you think?

Improve the CSS intellisense

The CSS intellisense autocompletes with HTML:

Highlighting attributes breaks when not wrapped with "

According to the HTML specifications, attributes do not require to be wrapped in ".

html syntax highlighting in coffeescripts triple quoted strings?

Hello dear folks,

is there an easy way to convince vscode-lit-html to perform html-style syntax highlighting in coffeescript's triple quoted multi-line strings?

""" <div class="fieldset"> <video class="videoPlayer" v-bind:src="player.url" type="video/mp4" controls></video> </div> """

I've looked a bit through lit-html and I think the functionality shouldn't be so far away from what you guys already offer. Maybe it's just a case of adding a few lines in some json file?

I understand its a typescript/javascript extension, but it would be supercool if somebody could look into it.

Best,
Sascha

HTML autocomplete not working...

Not sure if this is an issue for this extension or not, but syntax highlighting is totally working, but autocompletion is acting strange...

...so, instead of getting a list of html tags, I seem to be getting a list of, well, words, and nothing more. I'm assuming that the 'abc' icon denotes that it is simply suggesting plain old words in the English language, when all I want is for the autocompletion suggestions to be html tags.

Anyway, again, not sure if this is an issue for this extension, but I'm not sure what to do ¯\_(ツ)_/¯

Support html formatter settings

Testing microsoft/vscode#42361

Ideally, the html settings from VSCode would be used.

IMO the settings used required is "html.format.contentUnformatted" to control which tags should not be changed by the formatter.

The collapse buttons doesn't appear

The collapse buttons doesn't appear.

it only works with html` not html(space)`

Request: Please support Vue/other frameworks by changing one line of code.

Hi,

It has taken a lot of messing about, but now your plugin works as I hoped it would when I first discovered it.

 lit-html.json:

"begin": "(`)(?=$|[\\s\\S]*<[a-zA-Z][\\s\\S]*>[\\s\\S]*)",

I have no idea why this, or something similar, would not be default? It should really be an option in vscode itself. Now it works for everything, including Vue:

export default {
  name: 'App',
  components: {
    UserList,
  },
  template: `
  <div class="container mx-auto p-4">
     <h1>Users</h1>
    <user-list class="mt-6"></user-list>
  </div>
  `,
};

I don't know why this extension is artificially crippled. I think there is something I don't understand, please help me. There is no decent alternative at the moment, many thanks for making it, I don't mean to come over as angry, but the situation seems so wrong.

Falsely errors when interpolation is within <style>

The error is: "property value expected"

Version: 1.6.0

Doesn't syntax highlight when properties don't have quotes.

lit-html supports property and event listener assignments without quotes. Yet the syntax highlighting doesn't work unless you have quotes
e.g
<my-element .prop=${this.thing} @click=${e => this.routine(e)}></my-element>
should syntax highlight but doesn't