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 | | undefined | 許可する属性を指定します。これは、HTML標準に存在しない属性をあえて指定したい場合や、フレームワークなどで必要な属性を警告されないようにするものです。属性名だけの指定もできますし、属性値に対してのパターンやデータ型の指定が可能です。 |
disallowAttrs | (string | | undefined | 許可しない属性を指定します。HTML標準で許可されていたとしても、あえてプロジェクトのルールで禁止するような場合に利用します。指定内容はallowAttrs と同じ形式を受け取りますが、その意味はすべて逆になります。 |
ignoreAttrNamePrefix | 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*を利用することを進めます。