1. @nice-move/eslint-plugin-html
ESLint plugin to lint script tags in HTML
@nice-move/eslint-plugin-html
Package: @nice-move/eslint-plugin-html
Created by: nice-move
Last modified: Wed, 11 May 2022 10:37:13 GMT
Version: 0.0.0-beta.3
License: MIT
Downloads: 317
Repository: https://github.com/nice-move/eslint-plugin-html

Install

npm install @nice-move/eslint-plugin-html
yarn add @nice-move/eslint-plugin-html

@nice-move/eslint-plugin-html

ESLint plugin to lint script tags in HTML.

npm
github
node

Installation

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

Usage

 // 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'
      }
    }
  ]
};

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:

// 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 rule.

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

 <script>
  console.log('this example trigger error');
  import 'http://something';
</script>

Can't share variable between multiple script tags

See: Reason why

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin