Getting Started

Prerequisite

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

Installation

Terminal

npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin

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.

eslint.config.js

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

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

or if using require(..);

eslint.config.js

const html = require("@html-eslint/eslint-plugin");
const parser = require("@html-eslint/parser");

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

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.
  ]
}