@html-eslint/eslint-plugin 0.14.1 → 0.16.0-alpha.0

package/README.md

@@ -2,9 +2,17 @@
 
 An ESLint plugin which provides lint rules for HTML.
 
-- [Getting Started](https://github.com/yeonjuan/html-eslint#Getting-Started)
-  - [Installation](https://github.com/yeonjuan/html-eslint#Installation)
-  - [Configuration](https://github.com/yeonjuan/html-eslint#Configuration)
-- [Recommended Configs](https://github.com/yeonjuan/html-eslint#Recommended-Configs)
-- [Rules](https://github.com/yeonjuan/html-eslint#Rules)
-- [License](https://github.com/yeonjuan/html-eslint#License)
+1. [Getting Started](https://yeonjuan.github.io/html-eslint/docs/getting-started)
+   - [Installation](https://yeonjuan.github.io/html-eslint/docs/getting-started#installation)
+   - [Configuration](https://yeonjuan.github.io/html-eslint/docs/getting-started#configuration)
+   - [Editor Configuration](https://yeonjuan.github.io/html-eslint/docs/getting-started#editor-configuration)
+     - [VSCode](https://yeonjuan.github.io/html-eslint/docs/getting-started#vscode)
+1. [Recommended Configs](https://yeonjuan.github.io/html-eslint/docs/getting-started#recommended-configs)
+1. [Rules](https://yeonjuan.github.io/html-eslint/docs/rules)
+1. [CLI](https://yeonjuan.github.io/html-eslint/docs/cli)
+1. [Playground](https://yeonjuan.github.io/html-eslint/playground)
+1. [License](#License)
+
+## License
+
+Distributed under the MIT License.

package/lib/rules/index.js

@@ -28,6 +28,7 @@ const noAriaHiddenBody = require("./no-aria-hidden-body");
 const noMultipleEmptyLines = require("./no-multiple-empty-lines");
 const noAccesskeyAttrs = require("./no-accesskey-attrs");
 const noRestrictedAttrs = require("./no-restricted-attrs");
+const noTrailingSpaces = require("./no-trailing-spaces");
 
 module.exports = {
   "require-lang": requireLang,
@@ -60,4 +61,5 @@ module.exports = {
   "no-multiple-empty-lines": noMultipleEmptyLines,
   "no-accesskey-attrs": noAccesskeyAttrs,
   "no-restricted-attrs": noRestrictedAttrs,
+  "no-trailing-spaces": noTrailingSpaces,
 };

package/lib/rules/no-extra-spacing-attrs.js

@@ -1,11 +1,21 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
 const { RULE_CATEGORY } = require("../constants");
+const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
   EXTRA_BETWEEN: "unexpectedBetween",
   EXTRA_AFTER: "unexpectedAfter",
   EXTRA_BEFORE: "unexpectedBefore",
+  MISSING_BEFORE: "missingBefore",
+  MISSING_BEFORE_SELF_CLOSE: "missingBeforeSelfClose",
+  EXTRA_BEFORE_SELF_CLOSE: "unexpectedBeforeSelfClose",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -17,14 +27,35 @@ module.exports = {
     },
 
     fixable: true,
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          disallowMissing: {
+            type: "boolean",
+          },
+          enforceBeforeSelfClose: {
+            type: "boolean",
+          },
+        },
+      },
+    ],
     messages: {
       [MESSAGE_IDS.EXTRA_BETWEEN]: "Unexpected space between attributes",
       [MESSAGE_IDS.EXTRA_AFTER]: "Unexpected space after attribute",
       [MESSAGE_IDS.EXTRA_BEFORE]: "Unexpected space before attribute",
+      [MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE]:
+        "Missing space before self closing",
+      [MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE]:
+        "Unexpected extra spaces before self closing",
+      [MESSAGE_IDS.MISSING_BEFORE]: "Missing space before attribute",
     },
   },
   create(context) {
+    const enforceBeforeSelfClose = !!(context.options[0] || {})
+      .enforceBeforeSelfClose;
+    const disallowMissing = !!(context.options[0] || {}).disallowMissing;
+
     function checkExtraSpacesBetweenAttrs(attrs) {
       attrs.forEach((current, index, attrs) => {
         if (index >= attrs.length - 1) {
@@ -38,15 +69,20 @@ module.exports = {
         const spacesBetween = after.loc.start.column - current.loc.end.column;
         if (spacesBetween > 1) {
           context.report({
-            loc: {
-              start: current.loc.end,
-              end: after.loc.start,
-            },
+            loc: NodeUtils.getLocBetween(current, after),
             messageId: MESSAGE_IDS.EXTRA_BETWEEN,
             fix(fixer) {
               return fixer.removeRange([current.range[1] + 1, after.range[0]]);
             },
           });
+        } else if (disallowMissing && spacesBetween < 1) {
+          context.report({
+            loc: after.loc,
+            messageId: MESSAGE_IDS.MISSING_BEFORE,
+            fix(fixer) {
+              return fixer.insertTextAfter(current, " ");
+            },
+          });
         }
       });
     }
@@ -56,26 +92,31 @@ module.exports = {
         // skip the attribute on the different line with the start tag
         return;
       }
-      let spacesBetween = openEnd.loc.end.column - lastAttr.loc.end.column;
-      if (isSelfClosed) {
-        spacesBetween--;
-      }
+      const limit = isSelfClosed && enforceBeforeSelfClose ? 1 : 0;
+      const spacesBetween = openEnd.loc.start.column - lastAttr.loc.end.column;
 
-      if (spacesBetween > 1) {
+      if (spacesBetween > limit) {
         context.report({
-          loc: {
-            start: lastAttr.loc.end,
-            end: openEnd.loc.end,
-          },
+          loc: NodeUtils.getLocBetween(lastAttr, openEnd),
           messageId: MESSAGE_IDS.EXTRA_AFTER,
           fix(fixer) {
             return fixer.removeRange([
               lastAttr.range[1],
-              lastAttr.range[1] + spacesBetween - 1,
+              lastAttr.range[1] + spacesBetween - limit,
             ]);
           },
         });
       }
+
+      if (isSelfClosed && enforceBeforeSelfClose && spacesBetween < 1) {
+        context.report({
+          loc: NodeUtils.getLocBetween(lastAttr, openEnd),
+          messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.insertTextAfter(lastAttr, " ");
+          },
+        });
+      }
     }
 
     function checkExtraSpaceBefore(node, firstAttr) {
@@ -87,10 +128,8 @@ module.exports = {
       const spacesBetween = firstAttr.loc.start.column - node.loc.end.column;
       if (spacesBetween >= 2) {
         context.report({
-          loc: {
-            start: node.loc.start,
-            end: firstAttr.loc.start,
-          },
+          loc: NodeUtils.getLocBetween(node, firstAttr),
+
           messageId: MESSAGE_IDS.EXTRA_BEFORE,
           fix(fixer) {
             return fixer.removeRange([
@@ -102,23 +141,66 @@ module.exports = {
       }
     }
 
+    function checkSpaceBeforeSelfClosing(beforeSelfClosing, openEnd) {
+      if (beforeSelfClosing.loc.start.line !== openEnd.loc.start.line) {
+        // skip the attribute on the different line with the start tag
+        return;
+      }
+      const spacesBetween =
+        openEnd.loc.start.column - beforeSelfClosing.loc.end.column;
+      const locBetween = NodeUtils.getLocBetween(beforeSelfClosing, openEnd);
+
+      if (spacesBetween > 1) {
+        context.report({
+          loc: locBetween,
+          messageId: MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.removeRange([
+              beforeSelfClosing.range[1] + 1,
+              openEnd.range[0],
+            ]);
+          },
+        });
+      } else if (spacesBetween < 1) {
+        context.report({
+          loc: locBetween,
+          messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
+          fix(fixer) {
+            return fixer.insertTextAfter(beforeSelfClosing, " ");
+          },
+        });
+      }
+    }
+
     return {
       [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        if (!node.attributes || node.attributes.length <= 0) {
+        if (!node.attributes) {
           return;
         }
 
-        checkExtraSpaceBefore(node.openStart, node.attributes[0]);
+        if (node.attributes.length) {
+          checkExtraSpaceBefore(node.openStart, node.attributes[0]);
+        }
+        if (node.openEnd) {
+          const isSelfClosing = node.openEnd.value === "/>";
+
+          if (node.attributes && node.attributes.length > 0) {
+            checkExtraSpaceAfter(
+              node.openEnd,
+              node.attributes[node.attributes.length - 1],
+              isSelfClosing
+            );
+          }
 
-        if (node.openEnd && node.attributes && node.attributes.length > 0) {
-          const selfClosing = node.openEnd.value === "/>";
-          checkExtraSpaceAfter(
-            node.openEnd,
-            node.attributes[node.attributes.length - 1],
-            selfClosing
-          );
+          checkExtraSpacesBetweenAttrs(node.attributes);
+          if (
+            node.attributes.length === 0 &&
+            isSelfClosing &&
+            enforceBeforeSelfClose
+          ) {
+            checkSpaceBeforeSelfClosing(node.openStart, node.openEnd);
+          }
         }
-        checkExtraSpacesBetweenAttrs(node.attributes);
       },
     };
   },

package/lib/rules/no-trailing-spaces.js

@@ -0,0 +1,75 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  TRAILING_SPACE: "trailingSpace",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "layout",
+    docs: {
+      description: "Disallow trailing whitespace at the end of lines",
+      recommended: false,
+      category: RULE_CATEGORY.STYLE,
+    },
+    fixable: true,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.TRAILING_SPACE]: "Trailing spaces not allowed",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const lineBreaks = sourceCode.getText().match(/\r\n|[\r\n\u2028\u2029]/gu);
+
+    return {
+      Program() {
+        const lines = sourceCode.lines;
+        let rangeIndex = 0;
+
+        lines.forEach((line, index) => {
+          const lineNumber = index + 1;
+          const match = line.match(/[ \t\u00a0\u2000-\u200b\u3000]+$/);
+          const lineBreakLength =
+            lineBreaks && lineBreaks[index] ? lineBreaks[index].length : 1;
+          const lineLength = line.length + lineBreakLength;
+
+          if (match) {
+            if (typeof match.index === "number" && match.index > 0) {
+              const loc = {
+                start: {
+                  line: lineNumber,
+                  column: match.index,
+                },
+                end: {
+                  line: lineNumber,
+                  column: lineLength - lineBreakLength,
+                },
+              };
+
+              context.report({
+                messageId: MESSAGE_IDS.TRAILING_SPACE,
+                loc,
+                fix(fixer) {
+                  return fixer.removeRange([
+                    rangeIndex + loc.start.column,
+                    rangeIndex + loc.end.column,
+                  ]);
+                },
+              });
+            }
+          }
+          rangeIndex += lineLength;
+        });
+      },
+    };
+  },
+};

package/lib/rules/require-closing-tags.js

@@ -33,6 +33,9 @@ module.exports = {
           selfClosing: {
             enum: ["always", "never"],
           },
+          allowSelfClosingCustom: {
+            type: "boolean",
+          },
         },
         additionalProperties: false,
       },
@@ -46,12 +49,14 @@ module.exports = {
   },
 
   create(context) {
-    let svgStacks = [];
-
     const shouldSelfClose =
       context.options && context.options.length
         ? context.options[0].selfClosing === "always"
         : false;
+    const allowSelfClosingCustom =
+      context.options && context.options.length
+        ? context.options[0].allowSelfClosingCustom === true
+        : false;
 
     function checkClosingTag(node) {
       if (!node.close) {
@@ -65,7 +70,7 @@ module.exports = {
       }
     }
 
-    function checkVoidElement(node) {
+    function checkVoidElement(node, shouldSelfClose, fixable) {
       const hasSelfClose = node.openEnd.value === "/>";
       if (shouldSelfClose && !hasSelfClose) {
         context.report({
@@ -75,6 +80,9 @@ module.exports = {
           },
           messageId: MESSAGE_IDS.MISSING_SELF,
           fix(fixer) {
+            if (!fixable) {
+              return null;
+            }
             return fixer.replaceText(node.openEnd, " />");
           },
         });
@@ -87,6 +95,9 @@ module.exports = {
           },
           messageId: MESSAGE_IDS.UNEXPECTED,
           fix(fixer) {
+            if (!fixable) {
+              return null;
+            }
             return fixer.replaceText(node.openEnd, ">");
           },
         });
@@ -95,20 +106,19 @@ module.exports = {
 
     return {
       Tag(node) {
-        if (node.name === "svg") {
-          svgStacks.push(node);
-        }
-        if (node.selfClosing || VOID_ELEMENTS_SET.has(node.name)) {
-          checkVoidElement(node);
+        const isVoidElement = VOID_ELEMENTS_SET.has(node.name);
+        if (
+          node.selfClosing &&
+          allowSelfClosingCustom &&
+          node.name.indexOf("-") !== -1
+        ) {
+          checkVoidElement(node, true, false);
+        } else if (node.selfClosing || isVoidElement) {
+          checkVoidElement(node, shouldSelfClose, isVoidElement);
         } else if (node.openEnd.value !== "/>") {
           checkClosingTag(node);
         }
       },
-      "Tag:exit"(node) {
-        if (node.name === "svg") {
-          svgStacks.push(node);
-        }
-      },
     };
   },
 };

package/lib/rules/utils/node-utils.js

@@ -5,6 +5,8 @@
  * @typedef {import("es-html-parser").AttributeNode} AttributeNode
  * @typedef {import("../../types").LineNode} LineNode
  * @typedef {import("../../types").CommentContentNode} CommentContentNode
+ * @typedef {import("../../types").BaseNode} BaseNode
+ * @typedef {import("../../types").Location} Location
  */
 
 module.exports = {
@@ -95,4 +97,16 @@ module.exports = {
       return lineNode;
     });
   },
+  /**
+   * Get location between two nodes.
+   * @param {BaseNode} before A node placed in before
+   * @param {BaseNode} after A node placed in after
+   * @returns {Location} location between two nodes.
+   */
+  getLocBetween(before, after) {
+    return {
+      start: before.loc.end,
+      end: after.loc.start,
+    };
+  },
 };

package/lib/types.d.ts

@@ -9,6 +9,8 @@ export type AnyNode = ESHtml.AnyNode | LineNode;
 
 export type Range = ESLint.AST.Range;
 
+export type Location = ESLint.AST.SourceLocation;
+
 export interface BaseNode {
   range: [number, number];
   loc: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-eslint/eslint-plugin",
-  "version": "0.14.1",
+  "version": "0.16.0-alpha.0",
   "description": "ESLint plugin for html",
   "author": "yeonjuan",
   "homepage": "https://github.com/yeonjuan/html-eslint#readme",
@@ -40,11 +40,11 @@
     "accessibility"
   ],
   "devDependencies": {
-    "@html-eslint/parser": "^0.14.0",
+    "@html-eslint/parser": "^0.16.0-alpha.0",
     "@types/eslint": "^7.2.10",
     "@types/estree": "^0.0.47",
-    "es-html-parser": "^0.0.7",
+    "es-html-parser": "^0.0.8",
     "typescript": "^4.4.4"
   },
-  "gitHead": "0fd16ae07553f8d73840ba2e2c07cc488233da05"
+  "gitHead": "499a9a47682743426515af6ac26b8f4bab50e052"
 }