feat: support skip frontmatter (#301)

* feat: support frontmatter

* add tests

* add integration-tests

* add docs

* add tests

* Update .cspell.json

Author: yeonjuan

.cspell.json

@@ -13,6 +13,7 @@
     "packages/eslint-plugin/types/**"
   ],
   "words": [
+    "frontmatter",
     "rehype",
     "tailwindcss",
     "codemirror",

docs/integrating-template-engine.md

@@ -72,3 +72,13 @@ parserOptions: {
   templateEngineSyntax: TEMPLATE_ENGINE_SYNTAX.ERB;
 }
 ```
+
+## Skip frontmatter
+
+If you are using frontmatter in html, set the parser options to `"frontmatter": true`, which tells the plugin to ignore the frontmatter part. (default: `false`)
+
+```js
+parserOptions: {
+  frontmatter: true,
+}
+```

packages/eslint-plugin/tests/rules/element-newline.test.js

@@ -225,6 +225,17 @@ Bar
         },
       },
     },
+    {
+      code: `---
+  tag: <div></div><div></div>
+---
+      `,
+      languageOptions: {
+        parserOptions: {
+          frontmatter: true,
+        },
+      },
+    },
   ],
   invalid: [
     {
@@ -685,6 +696,31 @@ aaa<strong>bbb</strong><a>ccc</a>
         },
       ],
     },
+    {
+      code: `---
+  tag: <div></div><div></div>
+---
+<div></div><div></div>
+      `,
+      errors: [
+        {
+          message: "There should be a linebreak after </div>.",
+          line: 4,
+          column: 1,
+        },
+      ],
+      output: `---
+  tag: <div></div><div></div>
+---
+<div></div>
+<div></div>
+      `,
+      languageOptions: {
+        parserOptions: {
+          frontmatter: true,
+        },
+      },
+    },
   ],
 });
 

packages/eslint-plugin/tests/rules/indent.test.js

@@ -413,6 +413,19 @@ function createTests() {
 </html>
         `,
       },
+      {
+        code: `---
+  name: value
+---
+<div>
+</div>
+        `,
+        languageOptions: {
+          parserOptions: {
+            frontmatter: true,
+          },
+        },
+      },
     ],
     invalid: [
       {
@@ -1244,6 +1257,44 @@ id="bar"
           },
         },
       },
+      {
+        code: `<div>
+<div></div>
+</div>
+        `,
+        languageOptions: {
+          parserOptions: {
+            frontmatter: true,
+          },
+        },
+        errors: wrongIndentErrors(1),
+        output: `<div>
+    <div></div>
+</div>
+        `,
+      },
+      {
+        code: `---
+  name: value
+---
+<div>
+<div></div>
+</div>
+        `,
+        languageOptions: {
+          parserOptions: {
+            frontmatter: true,
+          },
+        },
+        errors: wrongIndentErrors(1),
+        output: `---
+  name: value
+---
+<div>
+    <div></div>
+</div>
+        `,
+      },
     ],
   };
 }

packages/integration-test/fixtures/eslint-v8-legacy-config/.eslintrc.js

@@ -23,6 +23,17 @@ module.exports = {
                 "@html-eslint/sort-attrs": ["error"],
                 "@html-eslint/quotes": ["error"]
             }
+        },
+        {
+            files: ["**/*.html"],
+            parser: "@html-eslint/parser",
+            parserOptions: {
+                frontmatter: true,
+            },
+            plugins: ["@html-eslint"],
+            rules: {
+                "@html-eslint/indent": ["error", 2],
+            }
         }
     ]
 }

packages/integration-test/fixtures/eslint-v8-legacy-config/frontmatter/invalid.html

@@ -0,0 +1,6 @@
+---
+  name: foo
+---
+<div>
+<div></div>
+</div>

packages/integration-test/fixtures/eslint-v8-legacy-config/frontmatter/valid.html

@@ -0,0 +1,6 @@
+---
+  name: foo
+---
+<div>
+    <div></div>
+</div>