Getting Started

Prerequisite

  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

Flat config

If you are using the ESLint Flat config, see examples below.

Minimal configuration

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

export default [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
  },
];

or if using require(..);

eslint.config.js
const html = require("@html-eslint/eslint-plugin");

module.exports = [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ... html.configs["flat/recommended"],
    files: ["**/*.html"],
  },
];
eslint.config.js
import html from "@html-eslint/eslint-plugin";

export default [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
    rules: {
      ...html.configs["flat/recommended"].rules, // Must be defined. If not, all recommended rules will be lost
      "@html-eslint/indent": "error",
    },
  },
];

or if using require(..);

eslint.config.js
const html = require("@html-eslint/eslint-plugin");

module.exports = [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
    rules: {
      ...html.configs["flat/recommended"].rules, // Must be defined. If not, all recommended rules will be lost
      "@html-eslint/indent": "error",
    },
  },
];

Explicit plugin and parser configuration

eslint.config.js
import html from "@html-eslint/eslint-plugin";
import htmlParser from "@html-eslint/parser";

export default [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser: htmlParser,
    },
  },
];

or if using require(..);

eslint.config.js
const html = require("@html-eslint/eslint-plugin");
const htmlParser = require("@html-eslint/parser");

module.exports = [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"],
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser: htmlParser,
    },
  },
];

eslintrc config (.eslintrc.*)

Populate it with the following on your .eslintrc.js. If it does not exist create a .eslintrc.js config file in the root of your project. We can apply HTML-ESLint plugin rules to only HTML files(*.html) by using overrides in .eslintrc.js. (see ESLint Configuration)

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

Editor Configuration

VSCode

To get vscode-eslint support, we need to add the following in vscode settings.

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