eslint-plugin-html

A ESLint plugin to lint and fix inline scripts contained in HTML files.

- [Usage](#usage) - [Disabling ESLint](#disabling-eslint) - [Linting HTML](#linting-html) - [Multiple scripts tags in a HTML file](#multiple-scripts-tags-in-a-html-file) - [History](#history) - [XML support](#xml-support) - [Settings](#settings) - [`html/html-extensions`](#htmlhtml-extensions) - [`html/xml-extensions`](#htmlxml-extensions) - [`html/indent`](#htmlindent) - [`html/report-bad-indent`](#htmlreport-bad-indent) - [`html/javascript-tag-names`](#htmljavascript-tag-names) - [`html/javascript-mime-types`](#htmljavascript-mime-types) - [`html/ignore-tags-without-type`](#htmlignore-tags-without-type) - [Troubleshooting](#troubleshooting) - [No file linted when running `eslint` on a directory](#no-file-linted-when-running-eslint-on-a-directory) - [Linting templates (or PHP)](#linting-templates-or-php) - [Linting VUE files](#linting-vue-files) - [Migration from older versions](#migration-from-older-versions) - [To v4](#to-v4) - [To v3](#to-v3) - [Credits](#credits) ## Usage Simply install via `npm install --save-dev eslint-plugin-html` and add the plugin to your ESLint configuration. See [ESLint documentation](http://eslint.org/docs/user-guide/configuring#configuring-plugins).

Example with ESLint 9 and above (flat config)

```javascript import html from "eslint-plugin-html" export default [ { files: ["**/*.html"], plugins: { html }, }, ] ```

Example with ESLint 8 and below

```json { "plugins": ["html"] } ```

## Disabling ESLint To temporarily disable ESLint, use the `` HTML comment. Re-enable it with ``. Example: ```html ``` To disable ESLint for the next script tag only, use the `` HTML comment. Example: ```html ``` Disabled script tags are completely ignored: their content will not be parsed as JavaScript. You can use this to disable script tags containing template syntax. ## Linting HTML This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like [`@eslint-html`](https://yeonjuan.github.io/html-eslint/) or [@angular-eslint](https://github.com/angular-eslint/angular-eslint). `eslint-plugin-html` is compatible with those plugins and can be used along them. ## Multiple scripts tags in a HTML file When linting a HTML with multiple script tags, this plugin tries to emulate the browser behavior by sharing the global scope between scripts by default. This behavior doesn't apply to "module" scripts (ie: ` ``` This is perfectly valid by default, and the ESLint rules `no-unused-vars` and `no-undef` shouldn't complain. But if those scripts are considerated as ES modules, `no-unused-vars` should report an error in the first script, and `no-undef` should report an error in the second script. ### History In `eslint-plugin-html` v1 and v2, script code were concatenated and linted in a single pass, so the scope were always shared. This caused [some issues](MIGRATION_TO_V3.md), so in v3 all scripts were linted separately, and scopes were never shared. In v4, the plugin still lint scripts separately, but makes sure global variables are declared and used correctly in the non-module case. ## XML support This plugin parses HTML and XML markup slightly differently, mainly when considering `CDATA` sections: - in XML, any data inside a `CDATA` section will be considered as raw text (not XML) and the `CDATA` delimiter will be droped ; - in HTML, there is no such thing for ` ``` ### Linting VUE files Initially, [`eslint-plugin-vue`](https://github.com/vuejs/eslint-plugin-vue) was using `eslint-plugin-html` to lint code inside script tags. Since v3, `eslint-plugin-vue` is using its own parser, so it is _incompatible_ with `eslint-plugin-html`. You should use `eslint-plugin-vue` exclusively and remove `eslint-plugin-html` from your dependencies if you still have it. ## Migration from older versions ### To v4 `eslint-plugin-html` v4 requires at least ESLint v4.7. This is because a lot of internal changes occured in ESLint v4.7, including a [new API to support autofixing in preprocessors](https://eslint.org/docs/developer-guide/working-with-plugins#processors-in-plugins). If you are still using an older version of ESLint, please consider upgrading, or keep using `eslint-plugin-html` v3. The big feature (and breaking change) in `eslint-plugin-html` v4 is the ability to choose how [scopes are shared between script tags in the same HTML file](#multiple-scripts-tags-in-a-html-file). ### To v3 If you are considering upgrading to v3, please read [this guide](MIGRATION_TO_V3.md). ## Credits A big thank you to [@kuceb](https://github.com/kuceb) for the logo image!