feature_request(docs): configuring HTML ESLint with other plugins for HTML files #433
Description
1. Summary
It would be helpful if HTML ESLint documentation will contain information on how users should configure HTML ESLint if they use other ESLint plugins for HTML files like eslint-plugin-html.
2. Argumentation of the need of the documentation improvements
I created the additional configuration file eslinthtml.config.mjs for HTML ESLint and additionally need launching ESLint with the argument --config — eslint --config eslinthtml.config.mjs. I can’t configure HTML ESLint and eslint-plugin-html both in a single file eslint.config.mjs. Due to the ESLint discussion #18808 opened by @yeonjuan and issues #14286 and #17655 it’s not possible and not planned. If it’s possible, please show me what I need to change in my MCVE (the item 4.3.1 of this issue).
Whether it’s possible or not, setting the HTML ESLint configuration may take a lot of time. Documentation improvements can significantly reduce the time needed for setting.
3. MCVE
3.1. Installation
npm init
npm install --save-dev eslint eslint-plugin-html @eslint/js @html-eslint/eslint-plugin @html-eslint/parser3.2. HTML file for testing
KiraExample.html:
<!-- example comment -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Kira example HTML</title>
<script>
let Kira = "Goddess"
</script>
</head>
<body>
<p>Kira Goddess!</p>
</body>
</html>4. Configurations
4.1. Solely for HTML ESLint
4.1.1. Configuration file
eslinthtml.config.mjs:
import eslintPluginHtml from "@html-eslint/eslint-plugin";
import htmlParser from "@html-eslint/parser";
export default [{
files: ["**/*.html"],
languageOptions: {
parser: htmlParser
},
plugins: {
"@html-eslint": eslintPluginHtml,
},
rules: {
...eslintPluginHtml.configs["flat/recommended"].rules
}
}];4.1.2. CLI command
D:\SashaDebugging\KiraESLintHTML>npx eslint KiraExample.html --config eslinthtml.config.mjs
D:\SashaDebugging\KiraESLintHTML\KiraExample.html
5:1 error Expected indentation of 4 space but found no indent @html-eslint/indent
6:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
7:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
8:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
10:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
13:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
14:1 error Expected indentation of 4 space but found no indent @html-eslint/indent
16:1 error Expected indentation of 4 space but found no indent @html-eslint/indent
17:1 error Expected indentation of 8 space but found 1 tab @html-eslint/indent
18:1 error Expected indentation of 4 space but found no indent @html-eslint/indent
✖ 10 problems (10 errors, 0 warnings)
10 errors and 0 warnings potentially fixable with the `--fix` option.4.1.3. Behavior
Expected. ESLint returns HTML ESLint’s errors.
4.2. Solely for eslint-plugin-html
4.2.1. Configuration file
eslintjs.config.mjs:
import pluginJs from "@eslint/js";
import eslintPluginHtmlInlineScripts from "eslint-plugin-html";
export default [{
files: ["**/*.{cjs,js,html,mjs}"],
plugins: {
eslintPluginHtmlInlineScripts
},
rules: {
...pluginJs.configs.all.rules
}
}];4.2.2. CLI command
D:\SashaDebugging\KiraESLintHTML>npx eslint KiraExample.html --config eslintjs.config.mjs
D:\SashaDebugging\KiraESLintHTML\KiraExample.html
11:7 error 'Kira' is assigned a value but never used no-unused-vars
11:7 error 'Kira' is never reassigned. Use 'const' instead prefer-const
✖ 2 problems (2 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.4.2.3. Behavior
Expected. ESLint returns JavaScript errors in the HTML file.
4.3. Merged configuration
4.3.1. Configuration file
eslint.config.mjs:
import pluginJs from "@eslint/js";
import eslintPluginHtml from "@html-eslint/eslint-plugin";
import htmlParser from "@html-eslint/parser";
import eslintPluginHtmlInlineScripts from "eslint-plugin-html";
import { defineConfig } from "eslint/config";
export default defineConfig([{
files: ["**/*.{cjs,js,html,mjs}"],
plugins: {
eslintPluginHtmlInlineScripts
},
rules: {
...pluginJs.configs.all.rules
}
},
{
files: ["**/*.html"],
languageOptions: {
parser: htmlParser
},
plugins: {
"@html-eslint": eslintPluginHtml,
},
rules: {
...eslintPluginHtml.configs["flat/recommended"].rules
}
},
]);4.3.2. CLI command
D:\SashaDebugging\KiraESLintHTML>npx eslint KiraExample.html
Oops! Something went wrong! :(
ESLint: 9.38.0
TypeError: Cannot read properties of undefined (reading 'ignorePatternRegExp')
Occurred while linting D:\SashaDebugging\KiraESLintHTML\KiraExample.html:1
Rule: "capitalized-comments"
at isCommentValid (D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\rules\capitalized-comments.js:217:13)
at processComment (D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\rules\capitalized-comments.js:281:20)
at Array.forEach (<anonymous>)
at Program (D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\rules\capitalized-comments.js:321:7)
at ruleErrorHandler (D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\linter\linter.js:1173:33)
at D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\linter\source-code-visitor.js:76:46
at Array.forEach (<anonymous>)
at SourceCodeVisitor.callSync (D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\linter\source-code-visitor.js:76:30)
at D:\SashaDebugging\KiraESLintHTML\node_modules\eslint\lib\linter\source-code-traverser.js:291:18
at Array.forEach (<anonymous>)4.3.3. Behavior
Error. It seems like ESLint applied JavaScript rules for HTML file. When I fixed the error capitalized-comments, ESLint returns another JavaScript errors for HTML files.
Thanks.