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/3] 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/3] 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/3] 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", }, }, ];