v0.29.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

• feat: add @html-eslint/template-parser package by @yeonjuan in #224
• feat: support linting html in template literals in no-inline-styles by @yeonjuan in #226
• feat: support linting html in template literals in lowercase by @yeonjuan in #227
• feat: support linting html in template literals in attrs-newline by @yeonjuan in #228
• feat: support linting html in template literals in element-newline by @yeonjuan in #229
• feat: support linting html in template literals in id-naming-convention by @yeonjuan in #230
• feat: support linting html in template literals in no-duplicate-attrs by @yeonjuan in #232
• feat: support linting html in template literals in no-abstract-roles by @yeonjuan in #233
• feat: support linting html in template literals in no-obsolete-tags by @yeonjuan in #234
• feat: support linting html in template literals in no-extra-spacing-attrs by @yeonjuan in #235
• refactor: refactor types and predicates utils by @yeonjuan in #236
• feat: support linting html in template literals in indent by @yeonjuan in #237
• feat: support linting html in template literals by @yeonjuan in #238
• feat: support linting html in template literals in no-extra-spacing-text by @yeonjuan in #239
• fix: fix errors in no-multiple-empty-lines by @yeonjuan in #240

Full Changelog: v0.27.0...v0.29.0