HTML ESLint is an open-source ESLint plugin and monorepo that brings rule-based linting to HTML markup, including React component HTML, with an online playground and a dedicated rules catalog.
What is HTML ESLint?
HTML ESLint is a monorepo hosted at github.com/yeonjuan/html-eslint that packages @html-eslint/eslint-plugin, an ESLint plugin for linting HyperText Markup Language. It takes HTML files, HTML embedded in JavaScript template literals, and React, Angular, or Svelte component markup as input, and outputs standard ESLint diagnostics that surface syntax and style problems in your editor and CI. The project is developed by yeonjuan and released under the MIT License. It intentionally lints only HTML syntax; JavaScript inside HTML is out of scope, and the README explicitly recommends eslint-plugin-html for that job.
Key Features
- ESLint-native rule engine — Runs as a standard ESLint plugin, so it integrates with existing ESLint configuration, editor extensions, and command-line workflows.
- React-specific linting — The monorepo includes a separate React section with its own getting-started guide and rules, covering HTML in React components.
- Multi-framework support — Per the repository description, it lints HTML in JavaScript Template Literals, React, Angular, and Svelte files.
- Online playground — A browser-based playground at html-eslint.org/playground lets you paste HTML and see lint results without installing anything.
- Comprehensive docs — The project site includes getting-started instructions covering installation, configuration, and editor setup, plus a full rules listing and a developer guide.
- Template engine integration — A dedicated doc explains how to integrate the plugin with template engines.
- Clear scope boundaries — The plugin does not attempt to parse JavaScript; it hands off inline script linting to eslint-plugin-html.
Who is it for?
HTML ESLint is for developers and teams who already use ESLint and want the same enforcement for their HTML markup. Front-end developers use it to catch malformed tags and enforce consistent formatting in plain HTML files. React developers use the accompanying React configuration to lint HTML within their component code. Developers working with Angular or Svelte templates can apply the same plugin to their markup, and teams using template engines can follow the integration guide. It is also useful for maintainers who want a standardized, rule-driven alternative to bespoke HTML validators.
What can you do with HTML ESLint?
- Front-end developers: add HTML linting to an existing ESLint setup by installing
@html-eslint/eslint-pluginand adding it to your ESLint plugins and rules configuration. - React component authors: use the monorepo's React-specific rules and configuration to catch HTML issues in React components before they render.
- Editor-first developers: configure the plugin in your editor using the official installation and configuration guide, so lint diagnostics appear inline as you edit.
- CI pipeline owners: run the plugin as part of an ESLint step in continuous integration to block HTML errors across a repository.
How does HTML ESLint work?
The plugin works through ESLint's normal plugin mechanism. You install the package, register it in your ESLint configuration, and select the rules you want to enable. The getting-started documentation at html-eslint.org/docs/getting-started walks through installation, configuration, and editor integration step by step. When you run ESLint on an HTML file, the plugin parses the markup and reports rule violations using ESLint's standard output format.
Alternatives
- eslint-plugin-html — a separate plugin that lints JavaScript inside HTML files rather than the HTML syntax itself; the HTML ESLint README recommends it for inline script linting.
FAQ
Is HTML ESLint free?
Yes. The project is distributed under the MIT License, and the GitHub repository includes a Buy Me a Coffee link for optional donations.
Does HTML ESLint lint JavaScript?
No. HTML ESLint lints HTML syntax only. For linting inline JavaScript in HTML files, the README explicitly recommends using eslint-plugin-html instead.
What frameworks does HTML ESLint support?
According to the repository metadata, it lints HTML files, HTML in JavaScript Template Literals, React, Angular, and Svelte. The monorepo includes a dedicated section and rules for React.
How do I get started with HTML ESLint?
Install the @html-eslint/eslint-plugin npm package, add it to your ESLint configuration, and run ESLint on your HTML files. The official getting-started guide covers installation, configuration, and editor setup.
