`no-unknown-attr`

属性がその要素の仕様(あるいはカスタムルール)で定義されていない場合に警告します。

このルールはHTML Living Standardに基づいています。設定は@markuplint/html-specにあります。

存在しない属性名がその要素の有効な属性に類似している場合、エラーメッセージにタイプミスの修正を助ける「もしかして...?」という提案が含まれます。

このルールは名前が既知かどうかだけを検査します。定義済みの属性がこの文脈で許可されていない場合(noUse、条件不成立、autonomous custom element 上の is)はno-disallowed-attrの担当、既知の属性の値が不正な場合はno-invalid-attr-valueの担当です。

❌ 間違ったコード例

<div unexist-attr></div>

✅ 正しいコード例

<div></div>

Interface

{
  "no-unknown-attr": boolean
}

Options

{
  "no-unknown-attr": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record&lt;string, AttributeType | Pattern&gt;
      "ignoreAttrNamePrefix"?: string | string[]
      "allowToAddPropertiesForPretender"?: boolean
    }
  }
}

type Attr = {
  name: string;
  value: AttributeType | Pattern;
}

type Pattern = { pattern: string; };

AttributeTypeはタイプAPIを参照してください。PatternもタイプAPIの一部です。

Property	Type	Default Value	Description
`allowAttrs`	`(string \| Attr)[] \| Record<string, AttributeType \| Pattern>`	`undefined`	仕様に定義されていない属性名を、既知の属性として扱うために指定します。これは、HTML標準に存在しない属性をあえて指定したい場合や、フレームワークなどで必要な属性を警告されないようにするものです。指定した値の型は、`no-invalid-attr-value`ルールが属性値の検証に使用します。
`ignoreAttrNamePrefix`	`string \| string[]`	`undefined`	HTMLの仕様には存在しない、Viewライブラリやテンプレートエンジン固有の属性およびディレクティブを除外するために、プレフィックスを設定します。
`allowToAddPropertiesForPretender`	`boolean`	`"true"`	HTML要素に偽装しているコンポーネントのプロパティを追加できるようにします。デフォルトは`true`です。`pretenders`オプションを使用している場合に`false`に設定されていると、存在しない属性が見つかると警告します。

Default Severity

error

詳細

`allowAttrs`オプションの設定

配列には文字列とオブジェクトの両方の要素を含めることができます。

文字列の場合は許可する属性名を指定でき、属性値は制限されません。オブジェクトの場合はnameとvalueの両方のプロパティを持つ必要があり、より精密な属性値の制約を指定できます。値の型はno-invalid-attr-valueが属性値の検証に使用するため、両方のルールに同じallowAttrsを設定してください。

{
  "no-unknown-attr": {
    "options": {
      "allowAttrs": [
        "x-attr",
        {
          "name": "x-attr2",
          "value": "Int"
        },
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

valueプロパティにはタイプAPIで定義されている型を使用できます。また、enumプロパティで許可する値を制限したり、patternプロパティで正規表現によるパターンを定義したりすることもできます。

注意

配列内で属性名が重複する場合、後に指定したものが優先されます。

`ignoreAttrNamePrefix`オプションの設定

{
  "no-unknown-attr": {
    "options": {
      "ignoreAttrNamePrefix": [
        // Angularの場合
        "app",
        "*ng"
      ]
    }
  }
}

パーサーによっては、属性をディレクティブとして検出し除外します。(例: vue-parserでv-から始まる文字列のディレクティブを除外)。no-disallowed-attrにも同じignoreAttrNamePrefixを設定してください。

設定例

The Open Graph protocol と*RDFa* はHTML Standard とは異なる仕様です。そのため、必要であれば以下のように手動で指定する必要があります:

The Open Graph protocol

{
  "nodeRules": [
    {
      "selector": "meta[property]",
      "rules": {
        "no-unknown-attr": {
          "options": {
            "allowAttrs": ["property", "content"]
          }
        }
      }
    }
  ]
}

RDFa (RDFa lite)

{
  "rules": {
    "no-unknown-attr": {
      "options": {
        "allowAttrs": [
          {
            "name": "vocab",
            "value": "URL"
          },
          "typeof",
          "property",
          "resource",
          "prefix"
        ]
      }
    }
  }
}

構造化データが必要な場合は、RDFa の代わりに*Microdata* を使用することを推奨します。

Interface​

Options​

Default Severity​

詳細​

allowAttrsオプションの設定​

ignoreAttrNamePrefixオプションの設定​

設定例​

The Open Graph protocol​

RDFa (RDFa lite)​