Minor adjustment to Flat config example in docs

[gian1200]

In https://html-eslint.org/docs/getting-started, I think the example for flat config should be adjusted.

• Original:

import html from "@html-eslint/eslint-plugin";
import parser from "@html-eslint/parser";

export default [
  // recommended configuration included in the plugin
  html.configs["flat/recommended"],
  // your own configurations.
  {
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser,
    },
    rules: {
      "@html-eslint/indent": "error",
    },
  },
];

• Updated:

import html from "@html-eslint/eslint-plugin";
import htmlParser from "@html-eslint/parser"; // <-- renamed to avoid confusion with other parsers

export default [
  // your own configurations.
  {
    // recommended configuration included in the plugin
    ...html.configs["flat/recommended"], // <-- to limit scope of recommendations
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser: htmlParser, // <-- make explicit assignment
    },
    rules: {
      "@html-eslint/indent": "error"
    }
  }
];

Reasoning:

• When migrating a project to flat config, html rules started being applied even to non html files. This change solved the issue. More info: https://eslint.org/docs/latest/use/configure/combine-configs
• Also, I'm suggesting to rename the parser name to make it explicit that is for html (useful when there is more than one parser used in the file).

Update:

• If rules is defined, html.configs["flat/recommended"].rules must be spread inside it to avoid overriding recommended rules.
• If rules is not defined, html.configs["flat/recommended"] can be spread directly at object level
  • Given that html.configs["flat/recommended"] also have plugins and languageOptions.parser, both are optional when html.configs["flat/recommended"] is spread inside the object wherefilesis defined.

In summary:

This works:

import html from "@html-eslint/eslint-plugin";

export default [
  // your own configurations.
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"]
  }
];

This, too:

import html from "@html-eslint/eslint-plugin";

export default [
  // your own configurations.
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      ...html.configs["flat/recommended"].rules, // <-- Mandatory. If not, rules are lost
      "@html-eslint/indent": "error"
    }
  }
];

Or:

import html from "@html-eslint/eslint-plugin";
import htmlParser from "@html-eslint/parser"; // <-- renamed to avoid confusion with other parsers

export default [
  // your own configurations.
  {
    files: ["**/*.html"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser: htmlParser, // <-- make explicit assignment
    },
    rules: {
      ...html.configs["flat/recommended"].rules, // <-- Mandatory. If not, rules are lost
      "@html-eslint/indent": "error"
    }
  }
];

[yeonjuan]

@gian1200 agree 👍 Thanks for the report, let me know if you plan to create a PR