v0.30.0

Linting HTML in Template literals 🚀

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

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

2. Edit your eslint configuration file

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

export default [
  {
    // You can use the @html-eslint rules in your ESLint configuration for JS!
    // This is used to lint HTML written inside Template Literal.
    "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,
     }
  },
]

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*$"],
          }
        }
    },
}

What's Changed

• fix: fix base indent in template literals by @yeonjuan in #242

Full Changelog: v0.29.0...v0.30.0