Feature request: use this with HTML in Javascript template literals

[RobertAKARobin]

The /*html*//html template literal syntax is used by several libraries, like Lit:

const myTemplate = /*html*/`
<div>
  <h1>Hello, world!</h1>
</div>
`;

document.body.innerHTML = myTemplate;

It would be nice if html-eslint could be run on Javascript template literals like this.

See also https://github.com/pushqrdx/vscode-inline-html

[yeonjuan]

@RobertAKARobin Agree! Thanks for the suggestion. I can't think of a way to implement this off the top of my head, but it seems like a useful feature.

[jpradelle]

It would be awesome for Lit webcomponents linting. I didn't find any project doing this for eslint.

[yeonjuan]

I'm working on this 👍

[yeonjuan]

Hi @RobertAKARobin, @jpradelle I'm happy to announce that this feature has been implemented and deployed in 0.29.0.
How to use

1. Updates both @html-eslint/parser and @html-eslint/eslint-plugin version to 0.29.0.

npm install -D @html-eslint/eslint-plugin@0.29.0 @html-eslint/parser@0.29.0

2. Edit your eslint configuration file

import eslintHTML from "@html-eslint/eslint-plugin";
import eslintHTMLParser from "@html-eslint/parser";

export default [
  {
    "plugins": {
      "@html-eslint": eslintHTML
    },
    "rules": {
      // Specifies the @html-eslint rules to apply to Template Literal.
      "@html-eslint/no-inline-styles": 1,
      "@html-eslint/indent": 1,
     }
  },
  {
    "files": ["**/*.html"],
    "languageOptions": {
      parser: eslintHTMLParser,
    },
    "plugins": {
      "@html-eslint": eslintHTML,
    },
    "rules": {
      // Specifies the @html-eslint rule to apply to HTML files.
     "@html-eslint/no-inline-styles": 1
    }
},
]

3. Now you can see that this plugin linting the html syntax inside the template literal.

// TaggedTemplateExpression
html`
<div style="${style}">
    ^^^^^^^^^^^^^^^// Unexpected usage of inline style

</div>`;

// TemplateLiteral
const code = /* html */`
<div style="${style}">
    ^^^^^^^^^^^^^^^// Unexpected usage of inline style

</div>`

4. If you want to specify that linting should be done with keywords other than html, you can utilize the settings option.

 {
    "plugins": {
      "@html-eslint": eslintHTML
    },
    settings: {
        html: {
          templateLiterals: {
               // default options
               tags: ["^html$"],
               comments: ["^\\s*html\\s*$"],
          }
        }
    },
}

[jpradelle]

Awesome, thanks a lot ! Works great for a lot of rules.

But I have an issue with indent rule: #241