required-attr

Warns if specified attributes or required attribute on specs are not appeared on an element.

This rule refer HTML Living Standard based MDN Web docs. It has settings in @markuplint/html-spec.

👎 Example of incorrect code for this rule

<img />

<!-- "required-attr": "alt" -->
<img src="/path/to/image.png" />

👍 Example of correct code for this rule

<img src="/path/to/image.png" />

<!-- "required-attr": "alt" -->
<img src="/path/to/image.png" alt="alternative text" />

note

This rule doesn't evaluate the element that has the spread attribute. In the below code, it doesn't evaluate whether the img element includes the src attribute. Because markuplint can't know whether the spread attribute includes the src property.

const Component = (props) => {
	return <img {...props}>;
}

Interface

{
  "required-attr": string | (string | Attr)[]
}

type Attr = {
  name: string;
  value?: string | string[];
};

Default Severity

error

Configuration Example

{
  "rules": {
    "required-attr": "alt"
  }
}

{
  "rules": {
    "required-attr": ["alt", "src"]
  }
}

{
  "rules": {
    "required-attr": [
      "alt",
      {
        "name": "src",
        "value": "/^\\/|^https:\\/\\//i"
      }
    ]
  }
}

Since we ordinary want to configure required attributes for each element type, required-attr rule should be configured in the nodeRules option.

Example configuration that alt attribute must be required on <img> element:

{
  "rules": {
    "required-attr": true
  },
  "nodeRules": [
    {
      "selector": "img",
      "rules": {
        "required-attr": "alt"
      }
    }
  ]
}