From 3134c0d9b5ac7b2346477a3a3c3fa7778acaff37 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 16:45:00 +0000 Subject: [PATCH 1/5] Initial plan From 1f0ca9ca640a4a9886f7cb86374ffe69a55b273f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 17:01:32 +0000 Subject: [PATCH 2/5] Add documentation for using HTML ESLint with other plugins Co-authored-by: yeonjuan <41323220+yeonjuan@users.noreply.github.com> --- .cspell.json | 4 +- README.md | 3 + docs/faq.md | 6 + docs/using-with-other-plugins.md | 236 +++++++++++++++++++++++ packages/website/src/components/nav.html | 20 ++ 5 files changed, 268 insertions(+), 1 deletion(-) create mode 100644 docs/using-with-other-plugins.md diff --git a/.cspell.json b/.cspell.json index 692148eb..ea336eed 100644 --- a/.cspell.json +++ b/.cspell.json @@ -63,6 +63,8 @@ "nodownload", "nofullscreen", "controlslist", - "describedby" + "describedby", + "eslinthtml", + "eslintjs" ] } diff --git a/README.md b/README.md index cfe2572f..ab4046c8 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ If you’d like to support html-eslint, please consider starring it on GitHub or - [Configuration](https://html-eslint.org/docs/getting-started#configuration) - [Editor Configuration](https://html-eslint.org/docs/getting-started#editor-configuration) - [Integrating Template Engine](https://html-eslint.org/docs/integrating-template-engine) + - [Using with Other Plugins](https://html-eslint.org/docs/using-with-other-plugins) 1. [Rules](https://html-eslint.org/docs/rules) 1. [Playground](https://html-eslint.org/playground) 1. [Developer Guide](https://html-eslint.org/developer-guide.md) @@ -48,6 +49,8 @@ If you’d like to support html-eslint, please consider starring it on GitHub or This ESLint plugin supports linting HTML syntax and does not provide JavaScript syntax linting. To lint JavaScript in HTML, such as inline scripts, you can use [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html). +For detailed instructions on how to configure HTML ESLint alongside eslint-plugin-html, see the [Using with Other Plugins](https://html-eslint.org/docs/using-with-other-plugins) guide. + ## License Distributed under the MIT License. See [LICENSE](./LICENSE) for more information. diff --git a/docs/faq.md b/docs/faq.md index 5ec91028..d68fd663 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,5 +1,11 @@ # FAQs +## How to use HTML ESLint with other plugins like eslint-plugin-html? + +When using HTML ESLint alongside other plugins that process HTML files (such as `eslint-plugin-html` for linting JavaScript inside HTML), you need to use separate configuration files. This is because different parsers and processing approaches conflict when applied to the same files. + +See the [Using HTML ESLint with Other Plugins](./using-with-other-plugins.md) guide for detailed instructions and examples. + ## Problem when using typescript-eslint typed linting. ``` diff --git a/docs/using-with-other-plugins.md b/docs/using-with-other-plugins.md new file mode 100644 index 00000000..794c4712 --- /dev/null +++ b/docs/using-with-other-plugins.md @@ -0,0 +1,236 @@ +# Using HTML ESLint with Other Plugins + +## Overview + +HTML ESLint focuses on linting HTML syntax and structure. However, you may also want to lint JavaScript code within HTML files (such as inline ` + + +

Welcome!

+ + +``` + +### HTML ESLint Configuration (`eslinthtml.config.mjs`) + +```js +import html from "@html-eslint/eslint-plugin"; + +export default [ + { + files: ["**/*.html"], + plugins: { + "@html-eslint": html, + }, + extends: ["html/recommended"], + language: "html/html", + rules: { + "@html-eslint/require-doctype": "error", + "@html-eslint/no-duplicate-id": "error", + }, + }, +]; +``` + +### JavaScript in HTML Configuration (`eslintjs.config.mjs`) + +```js +import js from "@eslint/js"; +import htmlPlugin from "eslint-plugin-html"; + +export default [ + { + files: ["**/*.html"], + plugins: { + html: htmlPlugin, + }, + rules: { + ...js.configs.recommended.rules, + "no-unused-vars": "error", + "prefer-const": "error", + }, + }, +]; +``` + +### Package.json Scripts + +```json +{ + "scripts": { + "lint:html": "eslint --config eslinthtml.config.mjs \"**/*.html\"", + "lint:js": "eslint --config eslintjs.config.mjs \"**/*.html\"", + "lint": "npm run lint:html && npm run lint:js" + } +} +``` + +## Alternative Approaches + +### Separate HTML and JS Files + +If possible, consider separating your JavaScript into `.js` files and referencing them in HTML: + +```html + +``` + +This allows you to: + +- Use a single ESLint configuration +- Lint `.html` files with HTML ESLint +- Lint `.js` files with standard JavaScript rules + +### CI/CD Integration + +When integrating with CI/CD, run both linting commands: + +```yaml +# Example GitHub Actions workflow +- name: Lint HTML syntax + run: npx eslint --config eslinthtml.config.mjs "**/*.html" + +- name: Lint JavaScript in HTML + run: npx eslint --config eslintjs.config.mjs "**/*.html" +``` + +## Troubleshooting + +### Error: "Cannot read properties of undefined" + +If you see errors like `Cannot read properties of undefined (reading 'ignorePatternRegExp')` when trying to use both plugins in one config, this confirms you need separate configuration files. + +### JavaScript Rules Applied to HTML + +If you see JavaScript linting errors on HTML tags, ensure: + +1. You're using the correct config file for each purpose +2. The `files` pattern matches appropriately +3. You haven't mixed both parsers in the same configuration object + +## Related Documentation + +- [Getting Started](./getting-started.md) +- [FAQ](./faq.md) +- [Integrating Template Engines](./integrating-template-engine.md) diff --git a/packages/website/src/components/nav.html b/packages/website/src/components/nav.html index 1a654013..e75604ea 100644 --- a/packages/website/src/components/nav.html +++ b/packages/website/src/components/nav.html @@ -71,6 +71,26 @@ > +
  • + +
    + +
    + Using with Other Plugins + +     +
  • From ea5c0d6d4899d39b7dd74f41e88443daa866ff51 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 17:05:20 +0000 Subject: [PATCH 3/5] Fix plugin naming to match official documentation format Co-authored-by: yeonjuan <41323220+yeonjuan@users.noreply.github.com> --- docs/using-with-other-plugins.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/using-with-other-plugins.md b/docs/using-with-other-plugins.md index 794c4712..b6ad7874 100644 --- a/docs/using-with-other-plugins.md +++ b/docs/using-with-other-plugins.md @@ -35,13 +35,13 @@ export default [ { files: ["**/*.html"], plugins: { - "@html-eslint": html, + html, }, extends: ["html/recommended"], language: "html/html", rules: { // Customize HTML linting rules - "@html-eslint/indent": ["error", 2], + "html/indent": ["error", 2], }, }, ]; @@ -141,13 +141,13 @@ export default [ { files: ["**/*.html"], plugins: { - "@html-eslint": html, + html, }, extends: ["html/recommended"], language: "html/html", rules: { - "@html-eslint/require-doctype": "error", - "@html-eslint/no-duplicate-id": "error", + "html/require-doctype": "error", + "html/no-duplicate-id": "error", }, }, ]; From 3eb59ba54186eea55e1770f902b3e2c25e0ce37c Mon Sep 17 00:00:00 2001 From: YeonJuan Date: Sat, 13 Dec 2025 17:29:42 +0900 Subject: [PATCH 4/5] apply review --- .cspell.json | 2 +- docs/using-with-other-plugins.md | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/.cspell.json b/.cspell.json index ea336eed..73362e75 100644 --- a/.cspell.json +++ b/.cspell.json @@ -64,7 +64,7 @@ "nofullscreen", "controlslist", "describedby", - "eslinthtml", + "eslint-html", "eslintjs" ] } diff --git a/docs/using-with-other-plugins.md b/docs/using-with-other-plugins.md index b6ad7874..1aa94268 100644 --- a/docs/using-with-other-plugins.md +++ b/docs/using-with-other-plugins.md @@ -26,7 +26,7 @@ This limitation is due to how ESLint's parser system works and is not specific t #### Step 1: Create a Configuration for HTML ESLint -Create `eslinthtml.config.mjs` for HTML syntax linting: +Create `eslint-html.config.mjs` for HTML syntax linting: ```js import html from "@html-eslint/eslint-plugin"; @@ -49,7 +49,7 @@ export default [ #### Step 2: Create a Configuration for JavaScript in HTML -Create `eslintjs.config.mjs` for JavaScript linting within HTML: +Create `eslint.config.mjs` for JavaScript linting within HTML: ```js import js from "@eslint/js"; @@ -77,10 +77,10 @@ Run ESLint separately with each configuration file: ```bash # Lint HTML syntax -npx eslint --config eslinthtml.config.mjs "**/*.html" +npx eslint --config eslint-html.config.mjs "**/*.html" # Lint JavaScript in HTML -npx eslint --config eslintjs.config.mjs "**/*.html" +npx eslint --config eslint.config.mjs "**/*.html" ``` ### Using npm Scripts @@ -90,8 +90,8 @@ You can simplify this workflow by adding scripts to your `package.json`: ```json { "scripts": { - "lint:html": "eslint --config eslinthtml.config.mjs \"**/*.html\"", - "lint:js-in-html": "eslint --config eslintjs.config.mjs \"**/*.html\"", + "lint:html": "eslint --config eslint-html.config.mjs \"**/*.html\"", + "lint:js-in-html": "eslint --config eslint.config.mjs \"**/*.html\"", "lint": "npm run lint:html && npm run lint:js-in-html" } } @@ -132,7 +132,7 @@ npm install --save-dev eslint @html-eslint/eslint-plugin @html-eslint/parser esl ``` -### HTML ESLint Configuration (`eslinthtml.config.mjs`) +### HTML ESLint Configuration (`eslint-html.config.mjs`) ```js import html from "@html-eslint/eslint-plugin"; @@ -153,7 +153,7 @@ export default [ ]; ``` -### JavaScript in HTML Configuration (`eslintjs.config.mjs`) +### JavaScript in HTML Configuration (`eslint.config.mjs`) ```js import js from "@eslint/js"; @@ -179,8 +179,8 @@ export default [ ```json { "scripts": { - "lint:html": "eslint --config eslinthtml.config.mjs \"**/*.html\"", - "lint:js": "eslint --config eslintjs.config.mjs \"**/*.html\"", + "lint:html": "eslint --config eslint-html.config.mjs \"**/*.html\"", + "lint:js": "eslint --config eslint.config.mjs \"**/*.html\"", "lint": "npm run lint:html && npm run lint:js" } } @@ -209,10 +209,10 @@ When integrating with CI/CD, run both linting commands: ```yaml # Example GitHub Actions workflow - name: Lint HTML syntax - run: npx eslint --config eslinthtml.config.mjs "**/*.html" + run: npx eslint --config eslint-html.config.mjs "**/*.html" - name: Lint JavaScript in HTML - run: npx eslint --config eslintjs.config.mjs "**/*.html" + run: npx eslint --config eslint.config.mjs "**/*.html" ``` ## Troubleshooting From cb2c1f30297470f6a0b588f57748bead9a25bc56 Mon Sep 17 00:00:00 2001 From: YeonJuan Date: Sat, 13 Dec 2025 17:34:13 +0900 Subject: [PATCH 5/5] Update using-with-other-plugins.md --- docs/using-with-other-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/using-with-other-plugins.md b/docs/using-with-other-plugins.md index 1aa94268..99f6e214 100644 --- a/docs/using-with-other-plugins.md +++ b/docs/using-with-other-plugins.md @@ -1,4 +1,4 @@ -# Using HTML ESLint with Other Plugins +# Using HTML ESLint with Other HTML-processing Plugins ## Overview