eslint-plugin-html
==================
[](https://www.npmjs.com/package/eslint-plugin-html)
[](https://travis-ci.org/BenoitZugmeyer/eslint-plugin-html)
This [`ESLint`](http://eslint.org) plugin allows linting and fixing inline scripts contained in HTML
files.
Migration 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 chose how [scopes
are shared between script tags in the same HTML file](#multiple-scripts-tags-in-a-html-file).
Migration to v3
---------------
If you are considering upgrading to v3, please read [this guide](MIGRATION_TO_V3.md).
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:
```javascript
{
"plugins": [
"html"
]
}
```
Note: by default, when executing the `eslint` command on a directory, only `.js` files will be
linted. You will have to specify extra extensions with the `--ext` option. Example: `eslint --ext
.html,.js src` will lint both `.html` and `.js` files in the `src` directory. See [ESLint
documentation](http://eslint.org/docs/user-guide/command-line-interface#ext).
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 remove
`eslint-plugin-html` from your dependencies if you still have this.