Getting Started

Contents

  1. Prerequisites
  2. Installation
  3. Configuration
  4. Lint HTML in JavaScript Template Literals
  5. Legacy Configuration
  6. Editor Configuration

Prerequisites

  1. Node.js: ^12.22.0 || ^14.17.0 || >=16.0.0.
  2. ESLint: >=6.

Installation

  1. npm
Terminal 
npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin
  1. yarn
Terminal 
yarn add -D eslint @html-eslint/parser @html-eslint/eslint-plugin

Configuration

Update your configuration file:

eslint.config.js 
import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";

export default defineConfig([
    // lint html files
    {
        files: ["**/*.html"],
        plugins: {
            html,
        },
        // When using the recommended rules
        extends: ["html/recommended"],
        language: "html/html",
        rules: {
            "html/no-duplicate-class": "error",
        }
    }
]);

Lint HTML code inside JavaScript Template Literals

In addition to standalone HTML files, html-eslint also supports linting HTML inside JavaScript and TypeScript template literals, such as:

html`<div class="box">${content}</div>`;
// or
const code = /* html */ `<img class="image" src=${src}/>`;

To enable this, you don’t need to set a language. Just apply html-eslint rules to your JavaScript or TypeScript files, and the plugin will detect and lint HTML within template literals.

eslint.config.js 
import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";

export default defineConfig([
    {
        files: ["**/*.js", "**/*.ts"],
        plugins: {
            html,
        },
        rules: {
            "html/require-img-alt": "error",
        },
    },
]);

Legacy Configuration

If you are using ESLint version v8 or earlier, you can configure it as follows.

eslintrc.js 
module.exports = {
  //...
  plugins: ["@html-eslint"],
  overrides: [
    {
      files: ["*.html"],
      parser: "@html-eslint/parser",
      extends: ["plugin:@html-eslint/recommended-legacy"],
    },
  ],
};

Editor Configuration

VSCode

To enable vscode-eslint support in VSCode, add the following to your VSCode settings.

.vscode/settings.json 
{
  "eslint.enable": true,
  "eslint.validate": [
    "javascript", // ...
    "html" // Add "html" to enable linting `.html` files.
  ]
}