ESLint v9.28, extends, defineConfig - Is this plugin compatible or have I made a mistake in my config

[shoulders]

the background

I have tried to get eslint-plugin-html working, but I just keep getting errors.

As you can see I am using the latest version of ESLint which uses the la Config with extends.

I used htmlscripts instead of html when defining this plugin because I already have added eslint-html as html. perhaps the demo code should use a different keyword if what I have done is correct.

the question

Please can someone tell me what mistakes I have made or if the current version is not compatible with my setup.

The error shown in VSCode

Could not find a declaration file for module 'eslint-plugin-html'. 'c:/Users/shoulders/Desktop/thetemp/node_modules/eslint-plugin-html/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/eslint-plugin-html if it exists or add a new declaration (.d.ts) file containing declare module 'eslint-plugin-html';ts(7016)

the terminal error - when i load a .html file

[Error - 3:21:48 PM] An unexpected error occurred:
[Error - 3:21:48 PM] TypeError: context.getScope is not a function
Occurred while linting C:\Users\shoulders\Desktop\thetemp\index.html:1
Rule: "__eslint-plugin-html-prepare/__eslint-plugin-html-prepare"
    at getGlobalScope (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint-plugin-html\src\verifyWithSharedScopes.js:80:18)
    at prepare (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint-plugin-html\src\verifyWithSharedScopes.js:12:29)
    at Program (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint-plugin-html\src\verifyWithFlatConfigPatch.js:70:21)
    at ruleErrorHandler (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\linter.js:1307:33)
    at C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\safe-emitter.js:45:46
    at Array.forEach (<anonymous>)
    at Object.emit (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\safe-emitter.js:45:26)
    at #applySelector (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\source-code-traverser.js:148:17)
    at ESQueryHelper.applySelectors (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\source-code-traverser.js:206:24)
    at SourceCodeTraverser.traverseSync (C:\Users\shoulders\Desktop\thetemp\node_modules\eslint\lib\linter\source-code-traverser.js:277:16)

My Environment

VSCode: v 1.101.0
ESLint: v9.28.0
node: v22.16.0
npm ls
├── @eslint/css@0.8.1
├── @eslint/js@9.28.0
├── @eslint/json@0.12.0
├── @eslint/markdown@6.5.0
├── @html-eslint/eslint-plugin@0.41.0
├── @html-eslint/parser@0.41.0
├── eslint-plugin-html@8.1.3
├── eslint@9.28.0
├── globals@16.2.0
└── help@3.0.2

My eslint.config.mjs

import js from "@eslint/js";
import globals from "globals";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import html from "@html-eslint/eslint-plugin";
import htmlscripts from "eslint-plugin-html";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } },
  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
  { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: [html.configs["flat/recommended"]] },
  { files: ["**/*.html"], plugins: { htmlscripts } },
]);

[davidenke]

I'm struggling myself to get both plugins working and I think this is related to #293.
The first issue is missing typings, you can declare them locally:

declare module 'eslint-plugin-html' {
  import type { ESLint } from 'eslint';

  const plugin: ESLint.Plugin;

  export default plugin;
}

The second issue is a b it more complex. There's an internal patch which tries to use a newer api if a specific property is present. Unfortunately this check fails on latest Eslint, so the old api is used resulting in this context.getScope is not a function error.

I try to dig deeper into this, maybe I'll find something for a PR.

The most problematic issue for me right now is configuring two plugins on the same scope, and as you did, I used htmlScripts instead of html. Maybe this plugin should pick a more specific name to prevent conflicts.
And it is a bit unintuitive as well, that settings is used for everything instead of rules. I guess this is due to using other rules to adhere to the script contents and the settings for specific plugin behavior?

---

Edit: Referring to #293 (comment), setting the parserOptions to sourceType: 'module' solves this for me. It looks like the non-esm resolution provokes this error.
So for me, this is working now as expected:

import { defineConfig } from 'eslint/config';
import eslintParserHtml from '@html-eslint/parser';
import eslintPluginHtml from '@html-eslint/eslint-plugin';
import eslintPluginHtmlScripts from 'eslint-plugin-html';

export default defineConfig([
	{
	  files: ['**/*.html'],
	  plugins: {
	    '@html-eslint': eslintPluginHtml,
	    htmlScripts: eslintPluginHtmlScripts,
	  },
	  extends: ['@html-eslint/recommended'],
	  language: 'html/html',
	  languageOptions: {
	    parser: eslintParserHtml,
	    parserOptions: {
	      ecmaVersion: 'latest',
	      sourceType: 'module',
	    },
	  },
	}
]);

[shoulders]

i am looking at this post

• Incompatibility issue between eslint-plugin-html and @html-eslint #293

[shoulders]

I can load both plugins, eslint-plugin-html and html-eslint to load at the same time but I can onky get one of them to work at a time. As a non-developer this is very difficult and I understand why other Apps/plugins are taking over.

[gowin20]

@davidenke thank you for providing a code example! I was able to get both plugins working using this method.

Considering how common this use case is, there really should be more examples/resources in this repository on how to get these plugins working together. Even a simple FAQ or any kind of example would help.

[shoulders]

@gowin20 can you share your working configuration?

thanks

[davidenke]

@gowin20 can you share your working configuration?

thanks

Here's mine, if it helps: https://github.com/enke-dev/lint/blob/main/eslint.config.ts

[shoulders]

@davidenke thanks

I had a look at your config and it is very complicated. 😄. I was after a basic one so I could see how it should be written.

[shoulders]

this is what I have so far

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import json from "@eslint/json";
import markdown from "@eslint/markdown";
import css from "@eslint/css";
import html from "@html-eslint/eslint-plugin";
import { defineConfig } from "eslint/config";
 
export default defineConfig([
 
  // ESLint Core
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  tseslint.configs.recommended,
  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
 
  // html-eslint
  { files: ["**/*.html"], plugins: { html }, language: "html/html", extends: ["html/recommended"] },
  { files: ["**/*.js", "**/*.ts"], plugins: { html }, extends: ["html/recommended"] },
 
]);

• Incompatibility issue between eslint-plugin-html and @html-eslint · Issue #293 · BenoitZugmeyer/eslint-plugin-html · GitHub
  • Q: According to the documentation, eslint-plugin-html should be compatible with @html-eslint. However, when I tried using both in my project, I noticed that eslint-plugin-html stops working. It seems like the issue is caused by @html-eslint/parser.
  • A: You need both the @html-eslint/parser and @html-eslint/eslint-plugin to make it work. Eg:

I need to add something like this but I can only ever get one or the other to work html plugins to work.

import html from "eslint-plugin-html";

// This matches the other rule's format for easy of use.
{ files: ["**/*.html"], plugins: { htmlscripts } },
 
or
 
// This version is the same as above with the addtion of an example setting/override.
{
  files: ["**/*.html"],
  plugins: { htmlscripts, },
  settings: {
    "html/report-bad-indent": "error", // warn if encounter a problematic indentation
  }
},

I want a simple solution for my notes which then at a later data I can expand as required.

• https://quantumwarp.com/kb/articles/26-programming/1032-my-visual-studio-code-notes

[gowin20]

@shoulders here's the relevant section of my config:

import { defineConfig } from "eslint/config";
import js from "@eslint/js";
import stylistic from "@stylistic/eslint-plugin";
import htmlEslint from "@html-eslint/eslint-plugin";
import PARSER_HTML from "@html-eslint/parser";
import htmlScripts from "eslint-plugin-html";
import globals from "globals";

export default defineConfig([
  {
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": htmlEslint,
      htmlScripts,
      js,
      "@stylistic": stylistic
    },
    languageOptions: {
      parser: PARSER_HTML,
      globals: {
        ...globals.browser
      }
    },
    extends: ["js/recommended", stylistic.configs.recommended],
    rules: {
      ...jsRules,
      ...htmlRules
    }
  },
  // other rules
]);

[shoulders]

@gowin20 thanks for your config.

I am going to give ESLint a miss for a while, it seems not all plugins have been updated to the latest version of flat config and their setup instructions are vague if they exist.