https://github.com/nice-move/eslint-plugin-html
ESLint plugin for script tags in HTML files
https://github.com/nice-move/eslint-plugin-html
eslint eslint-plugin html
Last synced: 4 months ago
JSON representation
ESLint plugin for script tags in HTML files
- Host: GitHub
- URL: https://github.com/nice-move/eslint-plugin-html
- Owner: nice-move
- License: mit
- Created: 2022-04-11T04:05:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-02T08:52:04.000Z (over 1 year ago)
- Last Synced: 2025-09-27T11:38:41.015Z (9 months ago)
- Topics: eslint, eslint-plugin, html
- Language: JavaScript
- Homepage:
- Size: 308 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nice-move/eslint-plugin-html
[ESLint] plugin to lint script tags in HTML.
[![npm][npm-badge]][npm-url]
[![github][github-badge]][github-url]
![node][node-badge]
[eslint]: https://eslint.org/
[npm-url]: https://www.npmjs.com/package/@nice-move/eslint-plugin-html
[npm-badge]: https://img.shields.io/npm/v/@nice-move/eslint-plugin-html.svg?style=flat-square&logo=npm
[github-url]: https://github.com/nice-move/eslint-plugin-html
[github-badge]: https://img.shields.io/npm/l/@nice-move/eslint-plugin-html.svg?style=flat-square&colorB=blue&logo=github
[node-badge]: https://img.shields.io/node/v/@nice-move/eslint-plugin-html.svg?style=flat-square&colorB=green&logo=node.js
## Installation
```bash
npm install @nice-move/eslint-plugin-html --save-dev
```
## Usage
### Eslint 8.x
```cjs
// eslintrc.js
module.exports = {
extends: ['plugin:@nice-move/html/recommended']
};
// or
module.exports = {
extends: ['plugin:@nice-move/html/base']
};
// or
module.exports = {
overrides: [
{
files: ['*.{htm,html}'],
plugins: ['@nice-move/eslint-plugin-html']
},
{
files: ['**/*.{htm,html}/**/html-script-legacy.js'],
parserOptions: {
sourceType: 'script'
}
},
{
files: ['**/*.{htm,html}/**/html-script-module.js'],
parserOptions: {
sourceType: 'module'
}
}
]
};
```
### Eslint 9.x
```mjs
// eslint.config.mjs
import {
base,
recommended
} from '@nice-move/eslint-plugin-html/lib/configs-next.mjs';
let configs = [...base];
// or
configs = [...recommended];
// or
configs = [
{
files: ['*.{htm,html}'],
processor: '@nice-move/html/html',
plugins: {
'@nice-move/html': plugin
}
},
{
files: ['**/*.{htm,html}/**/html-script-legacy.js'],
parserOptions: {
sourceType: 'script'
}
},
{
files: ['**/*.{htm,html}/**/html-script-module.js'],
parserOptions: {
sourceType: 'module'
}
}
];
export default config;
```
## Todos
- [ ] SVG support
## Tips
### Different from [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html)
`@nice-move/eslint-plugin-html` using [processor](https://eslint.org/docs/developer-guide/working-with-plugins#processors-in-plugins) to treat `` and `<script type="module">` differently.
See: https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/139
And `@nice-move/eslint-plugin-html` is bundle-able.
### [Visual Studio Code](https://code.visualstudio.com/) support
When using [Eslint for VS Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), you may need to add following code to settings:
```jsonc
// example: settings.json or .vscode/settings.json
// I don't know why `eslint-plugin-html` don't need this.
{
"eslint.validate": ["html"]
}
```
## Known Issues
### Not compatible with [import/first](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/first.md) rule.
See: https://github.com/import-js/eslint-plugin-import/issues/2407
```xhtml --hack:not-html
<script>
import 'http://something';
console.log('this example trigger error');
```
### Can't share variable between multiple script tags
See: [Reason why](#different-from-eslint-plugin-html)