Add support for eslint flat config

[TheElegantCoding]

• https://eslint.org/docs/latest/use/configure/configuration-files-new
• https://eslint.org/docs/latest/use/configure/migration-guide#start-using-flat-config-files

[yeonjuan]

Hi @TheElegantCoding, Thanks for the report!. Is there anything else we need to do to support flat config?

I've tested the config below and it seems to be working fine, did you run into any issues?

const Plugin = require("@html-eslint/eslint-plugin");
const Parser = require("@html-eslint/parser");

module.exports = [
  {
    plugins: { "@html-eslint": Plugin },
    languageOptions: {
      parser: Parser,
    },
    files: ["*.html"],
    rules: {
      //...
    },
  },
];

[TheElegantCoding]

thanks that work and also i find an error in my config, in order to work inside all the repo i have to put files: [ '**/*.html' ]

Other problem i have with eslint flat config is the type in typescript my config is in typescript

import { htmlDisabledRule } from '@module/html/rule/html_disabled_rule';
import { htmlGeneralRule } from '@module/html/rule/html_general_rule';
import pluginHtml from "@html-eslint/eslint-plugin";
import parserHtml from "@html-eslint/parser";

const html =
{
  files: [ '**/*.html' ],
  languageOptions:
  {
    parser: parserHtml
  },
  plugins:
  {
    html: pluginHtml
  },
  rules: {
    ...htmlGeneralRule,
    ...htmlDisabledRule
  }
};
export { html };

in the pluginHtml import i get this error Could not find a declaration file for module '@html-eslint/eslint-plugin'.

[yeonjuan]

in the pluginHtml import i get this error Could not find a declaration file for module '@html-eslint/eslint-plugin'.

@TheElegantCoding Thank you. I think this should be fixed..!

[LatenPath]

@yeonjuan Dear sir, I got this warning when import recommended setting.

Hi @TheElegantCoding, Thanks for the report!. Is there anything else we need to do to support flat config?

I've tested the config below and it seems to be working fine, did you run into any issues?

const Plugin = require("@html-eslint/eslint-plugin");
const Parser = require("@html-eslint/parser");

module.exports = [
  {
    plugins: { "@html-eslint": Plugin },
    languageOptions: {
      parser: Parser,
    },
    files: ["*.html"],
    rules: {
      //...
    },
  },
];

Please help me 😢

[yeonjuan]

Hi @LatenPath , Could you try pluginHtml.configs.recommended.rules instead of pluginHtml.configs.recommended?

const pluginHtml = require("@html-eslint/eslint-plugin");
const parserHtml = require("@html-eslint/parser");

module.exports = [
  {
    files: ["**/*.html"],
    languageOptions: {
      parser: parserHtml,
    },
    plugins: {
      "@html-eslint": pluginHtml,
    },
    rules: pluginHtml.configs.recommended.rules,
  },
];

[LatenPath]

@yeonjuan It's work, sir!

Disable rule/ Auto-fix,... also work fine!

Thank you so much!

But I have a small question, as you can see, other plugin which support Flat config have parser/env built-in so it simpler when setup:

So I hope we will have one in future too ❤️

[yeonjuan]

@LatenPath

But I have a small question, as you can see, other plugin which support Flat config have parser/env built-in so it simpler

HTML-ESLint does not yet support flat config, we will update it to support flat config :)

[yeonjuan]

Hi @TheElegantCoding @LatenPath The new version is released (v0.23.0). html-eslint supports flat config now! Thanks for the reporting issue!

• https://html-eslint.org/docs/getting-started#flat-config