require-attrs

This rule enforces the use of tags with specified attributes.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/require-attrs": [
      "error",
      {
        tag: "svg",
        attr: "viewBox",
      },
    ],
  },
};

Rule Details

Options

This rule takes an array of option objects:

module.exports = {
  rules: {
    "@html-eslint/require-attrs": [
      "error",
      {
        tag: "img",
        attr: "alt",
      },
      {
        tag: "svg",
        attr: "viewBox",
        value: "0 0 100 100",
      },
    ],
  },
};

tag

  1. Type: string
  2. Required

The HTML tag name to check for the specified attribute.

attr

  1. Type: string
  2. Required

The attribute name that must be present on the specified tag.

value

  1. Type: string
  2. Optional

The expected value for the attribute. If specified, the attribute must have this exact value.

message

  1. Type: string
  2. Optional

Custom error message to display when the rule is violated. If not provided, a default message will be used.

module.exports = {
  rules: {
    "@html-eslint/require-attrs": [
      "error",
      {
        tag: "img",
        attr: "alt",
        message: "Images must have alternative text for accessibility",
      },
    ],
  },
};

Examples of incorrect code for this rule:

<!-- Missing alt attribute -->
<img />

<!-- Missing viewBox attribute -->
<svg></svg>

<!-- Wrong viewBox value -->
<svg viewBox="wrong"></svg>

Examples of correct code for this rule:

<!-- Has required alt attribute -->
<img alt="" />

<!-- Has required viewBox attribute -->
<svg viewBox="0 0 100 100"></svg>

<!-- Correct viewBox value -->
<svg viewBox="0 0 100 100"></svg>