@html-eslint/eslint-plugin/lib/rules/require-button-type.js

ESLint plugin for html

/**
 * @typedef { import("../types").RuleModule<[]> } RuleModule
 */

const { RULE_CATEGORY } = require("../constants");
const { findAttr } = require("./utils/node");
const { createVisitors } = require("./utils/visitors");

const MESSAGE_IDS = {
  MISSING: "missing",
  INVALID: "invalid",
};

const VALID_BUTTON_TYPES_SET = new Set(["submit", "button", "reset"]);

/**
 * @type {RuleModule}
 */
module.exports = {
  meta: {
    type: "code",

    docs: {
      description: "Require use of button element with a valid type attribute.",
      category: RULE_CATEGORY.BEST_PRACTICE,
      recommended: false,
    },

    fixable: null,
    schema: [],
    messages: {
      [MESSAGE_IDS.MISSING]: "Missing a type attribute for button",
      [MESSAGE_IDS.INVALID]:
        '"{{type}}" is an invalid value for button type attribute.',
    },
  },

  create(context) {
    return createVisitors(context, {
      Tag(node) {
        if (node.name !== "button") {
          return;
        }
        const typeAttr = findAttr(node, "type");
        if (!typeAttr || !typeAttr.value) {
          context.report({
            node: node.openStart,
            messageId: MESSAGE_IDS.MISSING,
          });
        } else if (
          !VALID_BUTTON_TYPES_SET.has(typeAttr.value.value) &&
          !typeAttr.value.parts.length
        ) {
          context.report({
            node: typeAttr,
            messageId: MESSAGE_IDS.INVALID,
            data: {
              type: typeAttr.value.value,
            },
          });
        }
      },
    });
  },
};