Add rule for enumerated boolean attribute

README.md

@@ -170,6 +170,7 @@ Flat configs are also available as `plugin.configs['flat/recommended']` and `plu
 <!-- AUTO-GENERATED-CONTENT:START (RULES) -->
 | ✔ | 🔧 | Rule | Description |
 | :---: | :---: | :--- | :--- |
+| ✔ | 🔧 | [solid/boolean-attr](docs/boolean-attr.md) | Enforce explicit boolean attribute evaluation when the attribute is enumerated |
 | ✔ | 🔧 | [solid/components-return-once](docs/components-return-once.md) | Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX. |
 | ✔ | 🔧 | [solid/event-handlers](docs/event-handlers.md) | Enforce naming DOM element event handlers consistently and prevent Solid's analysis from misunderstanding whether a prop should be an event handler. |
 | ✔ | 🔧 | [solid/imports](docs/imports.md) | Enforce consistent imports from "solid-js", "solid-js/web", and "solid-js/store". |

docs/boolean-attr.md

@@ -0,0 +1,14 @@
+<!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
+# solid/boolean-attr
+Enforce explicit boolean attribute evaluation when the attribute is enumerated
+This rule is **an error** by default.
+
+[View source](../src/rules/boolean-attr.ts) · [View tests](../test/rules/boolean-attr.test.ts)
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (CASES) -->

src/configs/recommended.ts

@@ -27,6 +27,7 @@ const recommended = {
     "solid/components-return-once": 1,
     "solid/no-destructure": 2,
     "solid/prefer-for": 2,
+    "solid/boolean-attr": 2,
     "solid/reactivity": 1,
     "solid/event-handlers": 1,
     // these rules are mostly style suggestions

src/plugin.ts

@@ -6,6 +6,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { TSESLint } from "@typescript-eslint/utils";
 
+import booleanAttr from "./rules/boolean-attr";
 import componentsReturnOnce from "./rules/components-return-once";
 import eventHandlers from "./rules/event-handlers";
 import imports from "./rules/imports";
@@ -34,6 +35,7 @@ const { name, version } = require("../package.json");
 const meta = { name, version };
 
 const allRules = {
+  "boolean-attr": booleanAttr,
   "components-return-once": componentsReturnOnce,
   "event-handlers": eventHandlers,
   imports,

src/rules/boolean-attr.ts

@@ -0,0 +1,48 @@
+/**
+ * FIXME: remove this comments and import when below issue is fixed.
+ * This import is necessary for type generation due to a bug in the TypeScript compiler.
+ * See: https://github.com/microsoft/TypeScript/issues/42873
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { TSESLint } from "@typescript-eslint/utils";
+
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+type MessageIds = "explicitEnumeratedAttribute";
+type Options = [];
+
+export default createRule<Options, MessageIds>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Enforce explicit boolean attribute evaluation when the attribute is enumerated",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/boolean-attr.md",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      explicitEnumeratedAttribute:
+        "This attribute is enumerated and not Boolean. A value of true or false is mandatory," +
+        'and shorthand like `<img draggable>` is forbidden. The correct usage is `<img draggable="true">`.',
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name != "draggable" || node.value) return;
+
+        context.report({
+          node,
+          messageId: "explicitEnumeratedAttribute",
+
+          fix: (fixer) => {
+            return [fixer.insertTextAfter(node, '="true"')];
+          },
+        });
+      },
+    };
+  },
+});

test/rules/boolean-attr.test.ts

@@ -0,0 +1,19 @@
+import { run } from "../ruleTester";
+import rule from "../../src/rules/boolean-attr";
+
+export const cases = run("boolean-attr", rule, {
+  valid: [
+    `let el = <div draggable="true">Hello, world!</div>`,
+    `let el = <div draggable="false">Hello, world!</div>`,
+    `let el = <div draggable={true}>Hello, world!</div>`,
+    `let el = <div draggable={false}>Hello, world!</div>`,
+    `let el = <div draggable={condition()}>Hello, world!</div>`,
+  ],
+  invalid: [
+    {
+      code: `let el = <div draggable>Hello, world!</div>`,
+      errors: [{ messageId: "explicitEnumeratedAttribute" }],
+      output: `let el = <div draggable="true">Hello, world!</div>`,
+    },
+  ],
+});