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.
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"
]
}
XML support
This plugin parses HTML and XML markup slightly differently, 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.
Settings
html/html-extensions
By default, this plugin will only consider files ending with those extensions as HTML: .erb
,
.handlebars
, .hbs
, .htm
, .html
, .mustache
, .nunjucks
, .php
, .tag
, .twig
, .vue
,
.we
. You can set your own list of HTML extensions by using this setting. Example:
{
"plugins": [ "html" ],
"settings": {
"html/html-extensions": [".html", ".we"],
}
}
html/xml-extensions
By default, this plugin will only consider files ending with those extensions as XML: .xhtml
,
.xml
. You can set your own list of XML extensions by using this setting. Example:
{
"plugins": [ "html" ],
"settings": {
"html/xml-extensions": [".html"],
}
}
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 "warn"
or 1
to display warnings, "error"
or 2
to
display errors. Example:
{
"plugins": [ "html" ],
"settings": {
"html/report-bad-indent": "error",
}
}
html/javascript-mime-types
By default, the code between <script>
tags is considered as JavaScript code only if there is no
type
attribute or if its value matches the pattern
/^(application|text)\/(x-)?(javascript|babel|ecmascript-6)$/i
. You can customize the types that
should be considered as JavaScript by providing one or multiple MIME types. If a MIME type starts
with a /
, it will be considered as a regular expression. Example:
{
"plugins": [ "html" ],
"settings": {
"html/javascript-mime-types": ["text/javascript", "text/jsx"],
"html/javascript-mime-types": "/^text\\/(javascript|jsx)$/",
}
}