@html-eslint/eslint-plugin/lib/rules/require-li-container.js

ESLint plugin for HTML

/** @import {RuleModule} from "../types" */

const { NODE_TYPES } = require("@html-eslint/parser");
const { RULE_CATEGORY } = require("../constants");
const { getRuleUrl } = require("./utils/rule");

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

const VALID_CONTAINERS = ["ul", "ol", "menu"];

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

    docs: {
      description: "Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`.",
      category: RULE_CATEGORY.BEST_PRACTICE,
      recommended: true,
      url: getRuleUrl("require-li-container"),
    },

    fixable: null,
    schema: [],
    messages: {
      [MESSAGE_IDS.INVALID]:
        "Invalid container of `<li>`. <li>` should be in `<ul>`, `<ol>` or `<menu>`.",
    },
  },

  create(context) {
    return {
      Tag(node) {
        if (node.name !== "li") {
          return;
        }
        if (!node.parent || node.parent.type === NODE_TYPES.Document) {
          context.report({
            node,
            messageId: MESSAGE_IDS.INVALID,
          });
        } else if (
          node.parent.type === NODE_TYPES.Tag &&
          !VALID_CONTAINERS.includes(node.parent.name || "")
        ) {
          context.report({
            node,
            messageId: MESSAGE_IDS.INVALID,
          });
        }
      },
    };
  },
};