docs: improve flat config examples (#190)

Author: gian1200

docs/getting-started.md

@@ -25,24 +25,91 @@ yarn add -D eslint @html-eslint/parser @html-eslint/eslint-plugin
 
 If you are using the ESLint [Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new), see examples below.
 
+#### Minimal configuration
+
+```js,eslint.config.js
+import html from "@html-eslint/eslint-plugin";
+
+export default [
+  // your own configurations.
+  {
+    // recommended configuration included in the plugin
+    ...html.configs["flat/recommended"],
+    files: ["**/*.html"],
+  },
+];
+```
+
+or if using `require(..);`
+
+```js,eslint.config.js
+const html = require("@html-eslint/eslint-plugin");
+
+module.exports = [
+  // your own configurations.
+  {
+    // recommended configuration included in the plugin
+    ... html.configs["flat/recommended"],
+    files: ["**/*.html"],
+  },
+];
+```
+
+#### Recommended rules with some customization
+
 ```js,eslint.config.js
 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.
   {
+    // recommended configuration included in the plugin
+    ...html.configs["flat/recommended"],
+    files: ["**/*.html"],
+    rules: {
+      ...html.configs["flat/recommended"].rules, // Must be defined. If not, all recommended rules will be lost
+      "@html-eslint/indent": "error",
+    },
+  },
+];
+```
+
+or if using `require(..);`
+
+```js,eslint.config.js
+const html = require("@html-eslint/eslint-plugin");
+
+module.exports = [
+  // your own configurations.
+  {
+    // recommended configuration included in the plugin
+    ...html.configs["flat/recommended"],
+    files: ["**/*.html"],
+    rules: {
+      ...html.configs["flat/recommended"].rules, // Must be defined. If not, all recommended rules will be lost
+      "@html-eslint/indent": "error",
+    },
+  },
+];
+```
+
+#### Explicit plugin and parser configuration
+
+```js,eslint.config.js
+import html from "@html-eslint/eslint-plugin";
+import htmlParser from "@html-eslint/parser";
+
+export default [
+  // your own configurations.
+  {
+    // recommended configuration included in the plugin
+    ...html.configs["flat/recommended"],
     files: ["**/*.html"],
     plugins: {
       "@html-eslint": html,
     },
     languageOptions: {
-      parser,
-    },
-    rules: {
-      "@html-eslint/indent": "error",
+      parser: htmlParser,
     },
   },
 ];
@@ -52,22 +119,19 @@ or if using `require(..);`
 
 ```js,eslint.config.js
 const html = require("@html-eslint/eslint-plugin");
-const parser = require("@html-eslint/parser");
+const htmlParser = require("@html-eslint/parser");
 
 module.exports = [
-  // recommended configuration included in the plugin
-  html.configs["flat/recommended"],
   // your own configurations.
   {
+    // recommended configuration included in the plugin
+    ...html.configs["flat/recommended"],
     files: ["**/*.html"],
     plugins: {
       "@html-eslint": html,
     },
     languageOptions: {
-      parser,
-    },
-    rules: {
-      "@html-eslint/indent": "error",
+      parser: htmlParser,
     },
   },
 ];

integration-test-projects/v8/eslint.config.js

@@ -1,15 +1,8 @@
 import html from "@html-eslint/eslint-plugin";
-import parser from "@html-eslint/parser";
 
 export default [
-  html.configs["flat/recommended"],
   {
+    ...html.configs["flat/recommended"],
     files: ["**/*.html"],
-    plugins: {
-      "@html-eslint": html,
-    },
-    languageOptions: {
-      parser,
-    },
   },
 ];