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:
- .erb
- .handelbars
- .hbs
- .htm
- .html
- .mustache
- .nunjucks
- .php
- .tag
- .twig
- .vue
- .we
Supported XHTML extensions:
Only script tags with no type attribute or a type attribute containing a MIME type known to
represent JavaScript such as text/javascript
or application/javascript
, or text/babel
will be
linted.
Usage
Simply install via npm npm install eslint-plugin-html --save
add the plugin to your ESLint
configuration. See
ESLint documentation.
Example:
{
"plugins": [
"html"
]
}
Settings
html/indent
By default, the code between <script>
tags is dedented according to the first non-empty line. The
setting html/indent
allows to ensure that every script tags follow an uniform indentation. Like
the indent
rule, you can pass a number of spaces, or "tab"
to indent with one tab. Prefix this
value with a +
to be relative to the <script>
tag indentation. Example:
{
"plugins": [ "html" ],
"settings": {
"html/indent": "0",
"html/indent": "+2",
"html/indent": "tab",
}
}
html/report-bad-indent
By default, this plugin won't warn if it encounters a problematic indentation (ex: a line is under
indented). If you want to make sure the indentation is correct, use the html/report-bad-indent
in
conjunction with the indent
rule. Pass 1
to display warnings, or 2
to display errors. Example:
{
"plugins": [ "html" ],
"settings": {
"html/report-bad-indent": 2,
}
}
html/xml-mode
By default, files with an extension known to be XML (.xml
, .xhtml
) will be considered as XML.
This slightly changes the markup parsing, 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
<script>
tags: the CDATA
delimiter is considered as normal
text and thus, part of the script.
The setting html/xml-mode
allows to force all files to be considered as XML (by passing true
) or
HTML (by passing false
). Example:
{
"plugins": [ "html" ],
"settings": {
"html/xml-mode": true,
}
}