feat: add new rule no-ineffective-attrs

.cspell.json

@@ -59,6 +59,9 @@
     "contenteditable",
     "nbsb",
     "endl",
-    "cout"
+    "cout",
+    "nodownload",
+    "nofullscreen",
+    "controlslist"
   ]
 }

docs/rules/no-ineffective-attrs.md

@@ -0,0 +1,78 @@
+# no-ineffective-attrs
+
+## How to use
+
+```js,.eslintrc.js
+module.exports = {
+  rules: {
+    "@html-eslint/no-ineffective-attrs": "error",
+  },
+};
+```
+
+## Rule Details
+
+This rule disallows HTML attributes that have no effect in their context. Such attributes may indicate errors or unnecessary code that should be removed.
+
+Examples of **incorrect** code for this rule:
+
+```html
+<!-- multiple has no effect on text inputs -->
+<input type="text" multiple />
+
+<!-- multiple has no effect on checkbox inputs -->
+<input type="checkbox" multiple />
+
+<!-- accept only works with file inputs -->
+<input type="text" accept=".jpg,.png" />
+
+<!-- readonly has no effect on checkbox inputs -->
+<input type="checkbox" readonly />
+
+<!-- readonly has no effect on file inputs -->
+<input type="file" readonly />
+
+<!-- defer has no effect on inline scripts -->
+<script defer>
+  console.log("hello");
+</script>
+
+<!-- async has no effect on inline scripts -->
+<script async>
+  console.log("hello");
+</script>
+
+<!-- download needs href to work -->
+<a download="file.pdf">Download</a>
+
+<!-- controlslist needs controls to work -->
+<audio controlslist="nodownload"></audio>
+<video controlslist="nofullscreen"></video>
+```
+
+Examples of **correct** code for this rule:
+
+```html
+<!-- multiple works with email and file inputs -->
+<input type="email" multiple />
+<input type="file" multiple />
+<select multiple></select>
+
+<!-- accept works with file inputs -->
+<input type="file" accept=".jpg,.png" />
+
+<!-- readonly works with text and password inputs -->
+<input type="text" readonly />
+<input type="password" readonly />
+
+<!-- defer and async work with external scripts -->
+<script defer src="script.js"></script>
+<script async src="script.js"></script>
+
+<!-- download works when href is present -->
+<a href="file.pdf" download="file.pdf">Download</a>
+
+<!-- controlslist works when controls is present -->
+<audio controls controlslist="nodownload"></audio>
+<video controls controlslist="nofullscreen"></video>
+```

packages/eslint-plugin/lib/rules/index.js

@@ -51,6 +51,7 @@ const noDuplicateClass = require("./no-duplicate-class");
 const noEmptyHeadings = require("./no-empty-headings");
 const noInvalidEntity = require("./no-invalid-entity");
 const noDuplicateInHead = require("./no-duplicate-in-head");
+const noIneffectiveAttrs = require("./no-ineffective-attrs");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -108,6 +109,7 @@ const rules = {
   "no-empty-headings": noEmptyHeadings,
   "no-invalid-entity": noInvalidEntity,
   "no-duplicate-in-head": noDuplicateInHead,
+  "no-ineffective-attrs": noIneffectiveAttrs,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

packages/eslint-plugin/lib/rules/no-ineffective-attrs.js

@@ -0,0 +1,184 @@
+/**
+ * @import {RuleModule} from "../types";
+ * @import {Tag, ScriptTag} from "@html-eslint/types"
+ * @typedef {{ attr: string; when: (node: Tag | ScriptTag) => boolean; message: string; }} AttributeChecker
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { hasAttr, hasTemplate, findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {string | undefined}
+ */
+function getAttrValue(node, attrName) {
+  const attr = node.attributes.find(
+    (a) => a.type === "Attribute" && a.key.value === attrName
+  );
+  if (!attr || !attr.value) return undefined;
+  return attr.value.value;
+}
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {boolean}
+ */
+function isTemplateValueAttr(node, attrName) {
+  const attr = findAttr(node, attrName);
+  if (!attr || !attr.value) return false;
+  return hasTemplate(attr.value);
+}
+
+/**
+ * @type {Record<string, AttributeChecker[]>}
+ */
+const checkersByTag = {
+  input: [
+    {
+      attr: "multiple",
+      when: (node) => {
+        const type = getAttrValue(node, "type") || "text";
+        return [
+          "text",
+          "password",
+          "radio",
+          "checkbox",
+          "image",
+          "hidden",
+          "reset",
+          "button",
+        ].includes(type);
+      },
+      message: 'The "multiple" attribute has no effect on this input type.',
+    },
+    {
+      attr: "accept",
+      when: (node) => {
+        if (isTemplateValueAttr(node, "type")) {
+          return false;
+        }
+        const type = getAttrValue(node, "type") || "text";
+        return type !== "file";
+      },
+      message:
+        'The "accept" attribute has no effect unless input type is "file".',
+    },
+    {
+      attr: "readonly",
+      when: (node) => {
+        const type = getAttrValue(node, "type") || "text";
+        return ["checkbox", "radio", "file", "range", "color"].includes(type);
+      },
+      message: 'The "readonly" attribute has no effect on this input type.',
+    },
+  ],
+  script: [
+    {
+      attr: "defer",
+      when: (node) => !hasAttr(node, "src"),
+      message: 'The "defer" attribute has no effect on inline scripts.',
+    },
+    {
+      attr: "async",
+      when: (node) => !hasAttr(node, "src"),
+      message: 'The "async" attribute has no effect on inline scripts.',
+    },
+  ],
+  a: [
+    {
+      attr: "download",
+      when: (node) => !hasAttr(node, "href"),
+      message: 'The "download" attribute has no effect without an "href".',
+    },
+  ],
+  audio: [
+    {
+      attr: "controlslist",
+      when: (node) => !hasAttr(node, "controls"),
+      message: 'The "controlslist" attribute has no effect without "controls".',
+    },
+  ],
+  video: [
+    {
+      attr: "controlslist",
+      when: (node) => !hasAttr(node, "controls"),
+      message: 'The "controlslist" attribute has no effect without "controls".',
+    },
+  ],
+};
+
+/**
+ * @type {RuleModule<[]>}
+ */
+module.exports = {
+  name: "no-ineffective-attrs",
+  meta: {
+    docs: {
+      description:
+        "Disallow HTML attributes that have no effect in their context",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+    messages: {
+      ineffective: "{{ message }}",
+    },
+    schema: [],
+    type: "problem",
+  },
+  defaultOptions: [],
+  create(context) {
+    return createVisitors(context, {
+      /**
+       * @param {Tag} node
+       */
+      Tag(node) {
+        const tagCheckers = checkersByTag[node.name];
+        if (!tagCheckers) return;
+
+        for (const check of tagCheckers) {
+          for (const attr of node.attributes) {
+            if (attr.type !== "Attribute") continue;
+            if (attr.key.value !== check.attr) continue;
+
+            if (check.when(node)) {
+              context.report({
+                loc: attr.loc,
+                messageId: "ineffective",
+                data: {
+                  message: check.message,
+                },
+              });
+            }
+          }
+        }
+      },
+      /**
+       * @param {ScriptTag} node
+       */
+      ScriptTag(node) {
+        const scriptCheckers = checkersByTag.script;
+        if (!scriptCheckers) return;
+
+        for (const check of scriptCheckers) {
+          for (const attr of node.attributes) {
+            if (attr.type !== "Attribute") continue;
+            if (attr.key.value !== check.attr) continue;
+
+            if (check.when(node)) {
+              context.report({
+                loc: attr.loc,
+                messageId: "ineffective",
+                data: {
+                  message: check.message,
+                },
+              });
+            }
+          }
+        }
+      },
+    });
+  },
+};

packages/eslint-plugin/lib/rules/utils/node.js

@@ -17,6 +17,17 @@ function findAttr(node, key) {
   );
 }
 
+/**
+ * @param {Tag | ScriptTag} node
+ * @param {string} attrName
+ * @returns {boolean}
+ */
+function hasAttr(node, attrName) {
+  return node.attributes.some(
+    (a) => a.type === "Attribute" && a.key.value === attrName
+  );
+}
+
 /**
  * Checks whether a node's attributes is empty or not.
  * @param {Tag | ScriptTag | StyleTag} node
@@ -254,4 +265,5 @@ module.exports = {
   isRangesOverlap,
   getTemplateTokens,
   hasTemplate,
+  hasAttr,
 };