@nice-move/eslint-plugin-html

ESLint plugin to lint script tags in HTML.

Installation

1npm install @nice-move/eslint-plugin-html --save-dev

Usage

Eslint 8.x

1// eslintrc.js
2
3module.exports = {
4  extends: ['plugin:@nice-move/html/recommended']
5};
6
7// or
8
9module.exports = {
10  extends: ['plugin:@nice-move/html/base']
11};
12
13// or
14
15module.exports = {
16  overrides: [
17    {
18      files: ['*.{htm,html}'],
19      plugins: ['@nice-move/eslint-plugin-html']
20    },
21    {
22      files: ['**/*.{htm,html}/**/html-script-legacy.js'],
23      parserOptions: {
24        sourceType: 'script'
25      }
26    },
27    {
28      files: ['**/*.{htm,html}/**/html-script-module.js'],
29      parserOptions: {
30        sourceType: 'module'
31      }
32    }
33  ]
34};

Eslint 9.x

1// eslint.config.mjs
2
3import {
4  base,
5  recommended
6} from '@nice-move/eslint-plugin-html/lib/configs-next.mjs';
7
8let configs = [...base];
9
10// or
11
12configs = [...recommended];
13
14// or
15
16configs = [
17  {
18    files: ['*.{htm,html}'],
19    processor: '@nice-move/html/html',
20    plugins: {
21      '@nice-move/html': plugin
22    }
23  },
24  {
25    files: ['**/*.{htm,html}/**/html-script-legacy.js'],
26    parserOptions: {
27      sourceType: 'script'
28    }
29  },
30  {
31    files: ['**/*.{htm,html}/**/html-script-module.js'],
32    parserOptions: {
33      sourceType: 'module'
34    }
35  }
36];
37
38export default config;

Todos

• SVG support

Tips

Different from eslint-plugin-html

@nice-move/eslint-plugin-html using processor to treat <script> 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 support

When using Eslint for VS Code, you may need to add following code to settings:

1// example: settings.json or .vscode/settings.json
2// I don't know why `eslint-plugin-html` don't need this.
3{
4  "eslint.validate": ["html"]
5}

Known Issues

Not compatible with import/first rule.

See: https://github.com/import-js/eslint-plugin-import/issues/2407

1<script>
2  import 'http://something';
3
4  console.log('this example trigger error');
5</script>

Can't share variable between multiple script tags

See: Reason why