[Feature request] ESLint plugin

[Fordi]

For the most part this just works, but functions within tagged markup get weird indent assertions, e.g.,

        ${collection.map((item) => {
          const { prop1, prop2 } = workWith(item);  // eslint: expected indentation of 4 but found 10 (indent)
          return html`  // eslint: expected indentation of 4 but found 10 (indent)
            <${Widget} prop1=${prop1} prop2=${prop2} />
          `;
        })} // eslint: expected indentation of 2 but found 8 (indent)

So I'd request an eslint plugin where you could specify the name of the template function, and make the linter comprehend it, or directions to the resources I'd need to implement one.

[Fordi]

I found eslint-plugin-lit, which works, albeit by disabling lit/binding-positions (👍 ) and lit/no-invalid-html (😢 ). It doesn't fix the indent comprehension, though. If anyone has any further tips, I'd love to hear 'em.

[developit]

Starting from the Lit plugin is a great idea - I'd begun hacking on something, but quickly realized it was going to take a lot more work than I had time to prototype: https://gist.github.com/developit/61d009284458ad4d757991e1756b7f41

[ruffin--]

It looks like spread attributes are also a show-stopping issue with eslint.

TIL:

Spread props: <div ...${props}> instead of <div {...props}>

[GGabrielDev]

This is kinda old, I know, but there's no progress with this? Would be nice to integrate EsLint to my project knowing that it will work out nicely with HTM.

Sadly, I'm still not savvy enough to write my own EsLint plugin :(