Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
By Douglas Coburn - Sep 13, 2024
eslint-plugin-html
Advanced tools
eslint-plugin-html
A ESLint plugin to lint and fix inline scripts contained in HTML files.
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.
- Usage
- Disabling ESLint
- Linting HTML
- Multiple scripts tags in a HTML file
- XML support
- Settings
- Troubleshooting
- Migration from older versions
- Credits
Usage
Simply install via npm install --save-dev eslint-plugin-html and add the plugin to your ESLint
configuration. See
ESLint documentation.
Example:
{
"plugins": [
"html"
]
}
Disabling ESLint
To temporarily disable ESLint, use the <!-- eslint-disable --> HTML comment. Re-enable it with
<!-- eslint enable -->. Example:
<!-- eslint-disable -->
<script>
var foo = 1
</script>
<!-- eslint-enable -->
To disable ESLint for the next script tag only, use the <!-- eslint-disable-next-script --> HTML
comment. Example:
<!-- eslint-disable-next-script -->
<script>
var foo = 1
</script>
Disabled script tags are completely ignored: their content will not be parsed as JavaScript. You can use this to disable script tags containing template syntax.
Linting HTML
This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not
provide any rule related to HTML. For that, you can use other plugins like
@eslint-html or
@angular-eslint. eslint-plugin-html is
compatible with those plugins and can be used along them.
Multiple scripts tags in a HTML file
When linting a HTML with multiple script tags, this plugin tries to emulate the browser behavior by
sharing the global scope between scripts by default. This behavior doesn't apply to "module"
scripts (ie: <script type="module"> and most transpiled code), where each script tag gets its own
top-level scope.
ESLint has already an
option to tell the parser
if the script are modules. eslint-plugin-html will use this option as well to know if the scopes
should be shared (the default) or not. To change this, just set it in your ESLint configuration:
{
"parserOptions": {
"sourceType": "module"
}
}
To illustrate this behavior, consider this HTML extract:
<script>
var foo = 1
</script>
<script>
alert(foo)
</script>
This is perfectly valid by default, and the ESLint rules no-unused-vars and no-undef shouldn't
complain. But if those scripts are considerated as ES modules, no-unused-vars should report an
error in the first script, and no-undef should report an error in the second script.
History
In eslint-plugin-html v1 and v2, script code were concatenated and linted in a single pass, so
the scope were always shared. This caused some issues, so in v3 all scripts
were linted separately, and scopes were never shared. In v4, the plugin still lint scripts
separately, but makes sure global variables are declared and used correctly in the non-module case.
XML support
This plugin parses HTML and XML markup slightly differently, mainly when considering CDATA
sections:
- in XML, any data inside a
CDATAsection will be considered as raw text (not XML) and theCDATAdelimiter will be droped ; - in HTML, there is no such thing for
<script>tags: theCDATAdelimiter is considered as normal text and thus, part of the script.
Settings
Note: all settings can be written either as
"html/key": valueor in a nested object"html": { "key": value }
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, .we.
You can set your own list of HTML extensions by using this setting. Example:
{
"plugins": [ "html" ],
"settings": {
"html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML
}
}
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"], // consider .html files as XML
}
}
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", // code should start at the beginning of the line (no initial indentation).
"html/indent": "+2", // indentation is the <script> indentation plus two spaces.
"html/indent": "tab", // indentation is one tab at the beginning of the line.
}
}
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-tag-names
By default, the code between <script> tags is considered as JavaScript. You can customize which
tags should be considered JavaScript by providing one or multiple tag names.
Example:
{
"plugins": [ "html" ],
"settings": {
"html/javascript-tag-names": ["script", "customscript"],
}
}
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) or module (case insensitive). 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"], // also use script tags with a "text/jsx" type attribute
"html/javascript-mime-types": "/^text\\/(javascript|jsx)$/", // same thing
}
}
Troubleshooting
No file linted when running eslint on a directory
By default, when executing the eslint command on a directory, only .js files will be linted. You
will have to specify extra extensions with the --ext option. Example: eslint --ext .html,.js src
will lint both .html and .js files in the src directory. See ESLint
documentation.
Linting templates (or PHP)
eslint-plugin-html won't evaluate or remove your template markup. If you have template markup in
your script tags, the resulting script may not be valid JavaScript, so ESLint will fail to parse
it. Here are some workarounds:
-
You can use HTML comments to disable ESLint for specific script tags.
-
For PHP, you can use
eslint-plugin-php-markupto lint php files, it use a same way to process php markup likeeslint-plugin-html. -
Another possible hacky workaround to make sure the code is valid JavaScript is to put your template markup inside a comment. When the template is rendered, the generated JS code must start with a new line, so it will be written below the comment. PHP example:
<script>
var mydata
// <?= "\n mydata = " . json_encode($var) . ";" ?>
console.log(mydata)
</script>
Linting VUE files
Initially, eslint-plugin-vue was using
eslint-plugin-html to lint code inside script tags. Since v3, eslint-plugin-vue is using its
own parser, so it is incompatible with eslint-plugin-html. You should use eslint-plugin-vue
exclusively and remove eslint-plugin-html from your dependencies if you still have it.
Migration from older versions
To v4
eslint-plugin-html v4 requires at least ESLint v4.7. This is because a lot of internal changes
occured in ESLint v4.7, including a new API to support autofixing in
preprocessors.
If you are still using an older version of ESLint, please consider upgrading, or keep using
eslint-plugin-html v3.
The big feature (and breaking change) in eslint-plugin-html v4 is the ability to choose how scopes
are shared between script tags in the same HTML file.
To v3
If you are considering upgrading to v3, please read this guide.
Credits
A big thank you to @kuceb for the logo image!
FAQs
A ESLint plugin to lint and fix inline scripts contained in HTML files.
The npm package eslint-plugin-html receives a total of 343,327 weekly downloads. As such, eslint-plugin-html popularity was classified as popular.
We found that eslint-plugin-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 25 Jul 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
The Wildcard Gamble: Understanding the Risks of Floating Dependency Ranges in npm
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
By Sarah Gooding - Sep 13, 2024
Security News
New Rust RFC Proposes Adding Support for Trusted Publishing to Crates.io
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.
By Sarah Gooding - Sep 12, 2024