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<string, ValueRule>
      "disallowAttrs"?: (string | Attr)[] | Record<string, ValueRule>
      "ignoreAttrNamePrefix"?: string | string[]
      "allowToAddPropertiesForPretender"?: boolean
      "attrs"?: Object
    }
  }
}

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

type ValueRule =
  | { enum: [string, ...string[]]; }
  | { pattern: string; }
  | { type: AttributeType; };

AttributeTypeはタイプAPIを参照してください。

Property	Type	Default Value	Description
allowAttrs	(string | Attr)[] | Record<string, ValueRule>	undefined	許可する属性を指定します。これは、HTML標準に存在しない属性をあえて指定したい場合や、フレームワークなどで必要な属性を警告されないようにするものです。属性名だけの指定もできますし、属性値に対してのパターンやデータ型の指定が可能です。
disallowAttrs	(string | Attr)[] | Record<string, ValueRule>	undefined	許可しない属性を指定します。HTML標準で許可されていたとしても、あえてプロジェクトのルールで禁止するような場合に利用します。指定内容はallowAttrsと同じ形式を受け取りますが、その意味はすべて逆になります。
ignoreAttrNamePrefix	string | string[]	undefined	HTMLの仕様には存在しない、Viewライブラリやテンプレートエンジン固有の属性およびディレクティブを除外するために、プレフィックスを設定します。
allowToAddPropertiesForPretender	boolean	"true"	HTML要素に偽装しているコンポーネントのプロパティを追加できるようにします。デフォルトはtrueです。pretendersオプションを使用している場合にfalseに設定されていると、存在しない属性が見つかると警告します。
attrs	Object	undefined	[非推奨(v3.7.0より): allowAttrsかdisallowAttrsを利用してください] enum pattern type disallowed のいずれかで設定します。

Default Severity

error

詳細

allowAttrsオプションの設定

配列もしくはオブジェクトを受け取ります。

配列形式

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

文字列の場合、許可される属性名を指定でき、属性値は制限がありません。オブジェクトの場合、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プロパティを指定して正規表現で値のパターンを定義することもできます。

タイプAPIの指定は、typeプロパティを持つオブジェクトでも指定できます。これは同じ意味を伝えるための代替構文です。

[
  {
    "name": "x-attr",
    "value": "<'color-profile'>"
  },
  // 上記と下記は同じ意味です
  {
    "name": "x-attr",
    "value": {
      "type": "<'color-profile'>"
    }
  }
]

注意

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

オブジェクト形式

オブジェクト形式は、非推奨となった旧attrsプロパティと同じ構造を持ちます。属性名に対応するプロパティ名を持つオブジェクトを受け取り、type、enum、patternプロパティを持つオブジェクトを受け付けます。これらのプロパティは前述の配列形式で説明したものと同じ意味を持ちます。

注記

disallowプロパティを持つオブジェクトは受け取りません。代わりに、後述する新しく導入されたdisallowAttrsオプションを使用してください。

{
  "invalid-attr": {
    "options": {
      "allowAttrs": {
        "x-attr": {
          "type": "Any"
        },
        "x-attr2": {
          "type": "Int"
        },
        "x-attr3": {
          "enum": ["apple", "orange"]
        },
        "x-attr4": {
          "pattern": "/^[a-z]+$/"
        }
      }
    }
  }
}

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]+$/"
          }
        }
      ]
    }
  }
}

attrsオプションの設定

このオプションはv3.7.0から非推奨になりました。

オプションの詳細

enum

列挙した文字列にマッチする値のみ許可します。

型: string[]

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "enum": ["value1", "value2", "value3"]
        }
      }
    }
  }
}

pattern

パターンにマッチする値のみ許可します。 / で囲むことで 正規表現 として機能します。

型: string

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "pattern": "/[a-z]+/"
        }
      }
    }
  }
}

type

指定した型にマッチする値のみ許可します。

型: string

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "type": "Boolean"
        }
      }
    }
  }
}

disallowed

指定した属性を禁止します。

型: boolean

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "disallowed": true
        }
      }
    }
  }
}

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*を利用することを進めます。