vscode plugin is opinionated about html syntax

[chase-moskal]

hello!

the plugin issues a warning for this line:

<input type=text .value=${this.draft}/>
                  ^^^^^

This binding is directly followed by a '/' which is probably unintended. lit-plugin(no-unintended-mixed-binding)(2317)

it wants me to add a space before void element closers, />

i find the unnecessary space distasteful, so all my projects omit it

hopefully this warning can simply be removed, this is opinionated linting territory

love the plugin, i use it every day, cheers!

[chase-moskal]

closing, i think this is lit-html's fault

it appears they don't wrap strings in quotes automatically. shame

[web-padawan]

This isn't opinionated, but intended behavior coming from a limitation of the HTML parser used by lit-html.

When using a following code example:

import { html, render } from "lit-html";

const myTemplate = name =>
  html`
    <input type="text" .value=${name}/>
  `;

render(myTemplate("lit-html"), document.body);

The input value would include trailing slash and contain lit-html/ and not lit-html.

it appears they don't wrap strings in quotes automatically. shame

Again, you don't have to wrap strings in quotes when writing valid HTML.

[chase-moskal]

intended behavior coming from a limitation of the HTML parser used by lit-html

yes, i now understand this is not the fault of this plugin

i was originally assuming lit-html would be built to always wrap strings in quotes for me, however that was only a misapprehension on my part.. in my opinion it's just another mildly unfortunate design decision (in addition to lack of elegant spread operator) for the otherwise shiny lit-html

thanks for the detailed explanation, i'm sure in time more folks will find similar confusion as me and find your post helpful!

:beers: