Add element-newline:inline to recommended so website passes linting

yeonjuan · Sep 5, 2024 · 977cdbe · 977cdbe
1 parent cf2463b
commit 977cdbe
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 21 deletions.
diff --git a/packages/eslint-plugin/lib/configs/recommended.js b/packages/eslint-plugin/lib/configs/recommended.js
@@ -7,7 +7,12 @@ module.exports = {
     "@html-eslint/no-multiple-h1": "error",
     "@html-eslint/no-extra-spacing-attrs": "error",
     "@html-eslint/attrs-newline": "error",
-    "@html-eslint/element-newline": "error",
+    "@html-eslint/element-newline": [
+      "error",
+      {
+        inline: [`$inline`],
+      },
+    ],
     "@html-eslint/no-duplicate-id": "error",
     "@html-eslint/indent": "error",
     "@html-eslint/require-li-container": "error",

diff --git a/packages/eslint-plugin/lib/rules/element-newline.js b/packages/eslint-plugin/lib/rules/element-newline.js
@@ -176,8 +176,7 @@ module.exports = {
             if (
               node.openEnd.loc.end.line === nodeMeta.childFirst.loc.start.line
             ) {
-              const child = nodeMeta.childFirst;
-              if (child.type !== `Text` || /^\n/.test(child.value) === false) {
+              if (isNotNewlineStart(nodeMeta.childFirst)) {
                 context.report({
                   node: node,
                   messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER_OPEN,
@@ -190,30 +189,34 @@ module.exports = {
             }
 
             if (nodeMeta.childLast.loc.end.line === node.close.loc.start.line) {
-              context.report({
-                node: node,
-                messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE_CLOSE,
-                data: { tag: label(node, { isClose: true }) },
-                fix(fixer) {
-                  return fixer.insertTextBefore(node.close, `\n`);
-                },
-              });
+              if (isNotNewlineEnd(nodeMeta.childLast)) {
+                context.report({
+                  node: node,
+                  messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE_CLOSE,
+                  data: { tag: label(node, { isClose: true }) },
+                  fix(fixer) {
+                    return fixer.insertTextBefore(node.close, `\n`);
+                  },
+                });
+              }
             }
           }
         }
 
         if (nodeNext && node.loc.end.line === nodeNext.loc.start.line) {
           if (nodeShouldBeNewline) {
-            context.report({
-              node: nodeNext,
-              messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER,
-              data: { tag: label(node) },
-              fix(fixer) {
-                return fixer.insertTextAfter(node, `\n`);
-              },
-            });
+            if (isNotNewlineStart(nodeNext)) {
+              context.report({
+                node: nodeNext,
+                messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER,
+                data: { tag: label(node) },
+                fix(fixer) {
+                  return fixer.insertTextAfter(node, `\n`);
+                },
+              });
+            }
           } else if (shouldBeNewline(nodeNext)) {
-            if (node.type !== `Text` || /\n\s*$/.test(node.value) === false) {
+            if (isNotNewlineEnd(node)) {
               context.report({
                 node: nodeNext,
                 messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE,
@@ -237,6 +240,20 @@ module.exports = {
       return node.type === `Text` && node.value.trim().length === 0;
     }
 
+    /**
+     * @param {NewlineNode} node
+     */
+    function isNotNewlineEnd(node) {
+      return node.type !== `Text` || /\n\s*$/.test(node.value) === false;
+    }
+
+    /**
+     * @param {NewlineNode} node
+     */
+    function isNotNewlineStart(node) {
+      return node.type !== `Text` || /^\n/.test(node.value) === false;
+    }
+
     /**
      * @param {NewlineNode} node
      * @param {{ isClose?: boolean }} options

diff --git a/packages/eslint-plugin/tests/rules/element-newline.test.js b/packages/eslint-plugin/tests/rules/element-newline.test.js
@@ -141,6 +141,36 @@ ruleTester.run("element-newline", rule, {
         },
       ],
     },
+    {
+      code: `
+        <h1 class="display1 md:text-[60px] md:leading-[68px] md:font-bold">
+            An <span class="text-accent">ESLint</span>
+            <br class="md:hidden">
+            plugin<br>
+            to lint and fix <span class="text-accent">HTML code</span>.
+        </h1>
+`,
+      options: [
+        {
+          inline: [`$inline`],
+        },
+      ],
+    },
+    {
+      code: `
+      <header>
+        <img
+            foo="bar"
+        >
+        html-eslint
+      </header>
+      `,
+      options: [
+        {
+          inline: [`$inline`],
+        },
+      ],
+    },
   ],
   invalid: [
     {

diff --git a/packages/website/src/components/header/header.html b/packages/website/src/components/header/header.html
@@ -29,7 +29,8 @@
             class="inline w-[21px] mr-[11px]"
             width="21"
             height="24"
-        >html-eslint
+        >
+        html-eslint
     </a>
     <span class="body8 inline-block bg-gray-200 text-black-500 rounded-[12px] px-[8px] py-[5px] mx-[8px]">
         v{{ version }}