What is eslint-plugin-html?
eslint-plugin-html is an ESLint plugin that allows you to lint and fix inline scripts contained in HTML files. It helps ensure that your JavaScript code within HTML files adheres to the coding standards and best practices defined by your ESLint configuration.
What are eslint-plugin-html's main functionalities?
Linting inline scripts in HTML files
This feature allows you to lint JavaScript code that is embedded within HTML files. The plugin parses the HTML file, extracts the inline scripts, and applies ESLint rules to them.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
var foo = 'bar';
console.log(foo);
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Fixing issues in inline scripts
In addition to linting, eslint-plugin-html can also automatically fix certain issues in your inline scripts, just like ESLint does for standalone JavaScript files.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
var foo = 'bar';
console.log(foo);
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Other packages similar to eslint-plugin-html
eslint-plugin-vue
eslint-plugin-vue is a plugin for ESLint that provides linting rules for Vue.js applications. It supports linting of Vue single-file components (SFCs), which can contain HTML, JavaScript, and CSS. While eslint-plugin-html focuses on linting inline scripts in HTML files, eslint-plugin-vue is tailored for Vue.js development and provides a broader set of rules specific to Vue components.
eslint-plugin-react
eslint-plugin-react is an ESLint plugin that provides linting rules for React applications. It helps enforce best practices and coding standards for React components, including JSX syntax. Unlike eslint-plugin-html, which is designed for generic HTML files, eslint-plugin-react is specifically aimed at React development and includes rules for JSX and React-specific patterns.
eslint-plugin-angular
eslint-plugin-angular is an ESLint plugin that provides linting rules for AngularJS applications. It helps enforce best practices and coding standards for AngularJS code. While eslint-plugin-html is used for linting inline scripts in HTML files, eslint-plugin-angular is tailored for AngularJS development and includes rules specific to AngularJS patterns and practices.
eslint-plugin-html
This ESLint
plugin extracts and lints scripts from HTML files.
Supported HTML extensions: .html
, .xhtml
, .htm
, .vue
, .hbs
Only script tags with no type attribute or with a type containing text/javascript
will be linted.
Usage
Simply add the plugin to your ESLint configuration. See
ESLint documentation.
Example:
{
"plugins": [
"html"
]
}