required-attr

設定された属性もしくは仕様上必須となっている属性が要素上に存在しない場合、警告をします。

HTML Living Standardを基準としてMDN Web docsから最新情報を確認しています。 @markuplint/html-specに設定値を持っています。

<img> 要素の src 属性はHTML Living Standardでは必須となります。

❌ 間違ったコード例

<img />

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

✅ 正しいコード例

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

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

注記

このルールはスプレッド属性をもつ要素は評価しません。次のコードはimg要素がsrcを持つか評価しません。スプレッド属性にsrcが含まれているかMarkuplintは知ることができないからです。

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

Interface

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

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

Default Severity

error

設定例

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

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

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

通常は要素の種類ごとに必須属性を設定することになるので、required-attr ルールは nodeRules オプション内に設定すると良いでしょう。

以下は <img> 要素上で alt 属性を必須とする設定例です。

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