Ignore the indent in lit-html html function, with typescript-eslint lint rule

Question

Don't want to use eslint-disable-next-line, I'd like to ignore all the html result

import { html } from 'lit-html';
render() {
    // This part will have ugly indent
    return html`<div
      class=${classMap({
        'row-height': true,
      })}
    ></div>`;
}

Similar question: Ignore the indentation in a template literal, with the ESLint `indent` rule

I have tried

"@typescript-eslint/indent": ["error", "2", { "ignoredNodes": ["TemplateLiteral > *"] }]

But not working, because html() returns TemplateResult Object which is defined in lit-html, not a AST node type, right?

So is there any solution for this? Thanks in advance.

Related Info: https://eslint.org/docs/rules/indent#ignorednodes

Use prettier to format it as a workaround: https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi — Tina Chen, Aug 05 '21 at 06:51

score 1 · Answer 1 · answered Aug 08 '22 at 15:03

1

Try to replace "TemplateLiteral > *" by "TemplateLiteral *" (i.e. remove the > character).

The > character indicates to only ignore the direct children. By removing it, you ignore all children, no matter how deep they are nested.

answered Aug 08 '22 at 15:03

CedX

3,854
2
36
45

Ignore the indent in lit-html html function, with typescript-eslint lint rule

1 Answers1