`invalid-attr`

属性が仕様上（あるいは独自に指定したルール上）、存在しない属性であったり、無効な型の値だった場合に警告をします。

HTML Living Standardに準拠します。@markuplint/html-specに設定値を持っています。

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

❌ 間違ったコード例

<div unexist-attr>
  <button tabindex="non-integer">The Button</button>
  <a href="/" referrerpolicy="invalid-value">The Anchor</a>
</div>

✅ 正しいコード例

<div>
  <button tabindex="0">The Button</button>
  <a href="/" referrerpolicy="no-referrer">The Anchor</a>
</div>

注記

このルールは条件によってはスプレッド属性をもつ要素は評価しません。例えば、href属性を持たないa要素はtarget属性が許可されていませんが、スプレッド属性にhrefが含まれているかMarkuplintは知ることができないため評価できません。

const Component = (props) => {
	return <a target="_blank" {...props}>;
}

Interface

{
  "invalid-attr": boolean
}

Options

{
  "invalid-attr": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record&lt;string, AttributeType | Pattern&gt;
      "disallowAttrs"?: (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標準に存在しない属性をあえて指定したい場合や、フレームワークなどで必要な属性を警告されないようにするものです。属性名だけの指定もできますし、属性値に対してのパターンやデータ型の指定が可能です。
`disallowAttrs`	`(string \| Attr)[] \| Record<string, AttributeType \| Pattern>`	`undefined`	許可しない属性を指定します。HTML標準で許可されていたとしても、あえてプロジェクトのルールで禁止するような場合に利用します。指定内容は`allowAttrs`と同じ形式を受け取りますが、その意味はすべて逆になります。
`ignoreAttrNamePrefix`	`string \| string[]`	`undefined`	HTMLの仕様には存在しない、Viewライブラリやテンプレートエンジン固有の属性およびディレクティブを除外するために、プレフィックスを設定します。
`allowToAddPropertiesForPretender`	`boolean`	`"true"`	HTML要素に偽装しているコンポーネントのプロパティを追加できるようにします。デフォルトは`true`です。`pretenders`オプションを使用している場合に`false`に設定されていると、存在しない属性が見つかると警告します。

Default Severity

error

詳細

`allowAttrs`オプションの設定

注意

allowAttrsは仕様レベルの制約（noUseなど）を上書きできます。プリセットや共有設定を作成する際は、nodeRulesでスコープを絞り、 HTML仕様が特定の要素で禁止している属性を意図せず許可しないよう注意してください。

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

文字列の場合、許可される属性名を指定でき、属性値は制限がありません。オブジェクトの場合、nameとvalueの両方のプロパティを持つ必要があり、属性値に対してより詳細な制約を指定することができます。

{
  "invalid-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プロパティを指定して正規表現で値のパターンを定義することもできます。

注意

配列内で同じ属性名がある場合は後から指定されたものが優先されます。

`disallowAttrs`オプションの設定

許可しない属性を指定します。指定内容はallowAttrsと同じ形式を受け取りますが、その意味はすべて逆になります。

{
  "invalid-attr": {
    "options": {
      "disallowAttrs": [
        // `x-attr`属性を許可しません。
        "x-attr",

        // 値が整数の場合に`x-attr`属性を許可しません。
        // 値が整数でない場合は、`x-attr`属性は許可されます。
        {
          "name": "x-attr2",
          "value": "Int"
        },

        // 値が"apple"もしくは"orange"の場合に`x-attr`属性を許可しません。
        // 値が"apple"でも"orange"でもない場合は、`x-attr`属性は許可されます。
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },

        // 値がパターンにマッチする場合に`x-attr`属性を許可しません。
        // 値がパターンにマッチしない場合は、`x-attr`属性は許可されます。
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

`ignoreAttrNamePrefix`オプションの設定

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

パーサーによってはディレクティブを判定して除外します。（例えば vue-parser ではv-の文字列で始まるディレクティブは除外します）

設定例

Open Graph プロトコルおよびRDFaはHTML 標準とは異なる仕様です。そのため、必要な場合は次のように手動で指定する必要があります。

Open Graphプロトコル

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

RDFa (RDFa lite)

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

構造化データを利用する場合RDFaではなく*Microdata*を利用することを進めます。

Interface​

Options​

Default Severity​

詳細​

allowAttrsオプションの設定​

disallowAttrsオプションの設定​

ignoreAttrNamePrefixオプションの設定​

設定例​

Open Graphプロトコル​

RDFa (RDFa lite)​