メインコンテンツまでスキップ

一貫した画像ファイル名

img要素とsource要素のファイル名を一致させたい場合。

ルール

次のようなルールを定義したとする。

  • img要素のファイル名をベースとする
  • ベースとなるファイル名に@で解像度を付加したファイル名をsource要素のファイル名に設定する
  • ファイル名がlogo.pngの場合、@2xのプレフィックスを付加してlogo@2x.pngとしてsource要素に設定する
  • logo-2x.pngなどの形式は認めない
<picture>
<!-- ✅ 正しいファイル名 -->
<source srcset="logo@3x.png 3x" />
<source srcset="logo@2x.png 2x" />

<!-- ❌ 間違ったファイル名: 型式違い -->
<source srcset="logo-3x.png 3x" />

<!-- ❌ 間違ったファイル名: 異なる名前 -->
<source srcset="symbol@2x.png 2x" />

<!-- ベースとなるファイル名 -->
<img src="logo.png" alt="logo" />
</picture>

設定

invalid-attrルールとregexSelectorを使います。

{
"rules": {
"invalid-attr": true
},
"nodeRules": [
{
"regexSelector": {
"nodeName": "img",
"attrName": "src",
"attrValue":
// img要素からファイル名と拡張子をキャプチャつつ
"/^(?<FileName>.+)\\.(?<Exp>png|jpg|webp|gif)$/",
// コンビネータと併用して、前方の兄弟のsource要素を選択します
"combination": {
"combinator": ":has(~)",
"nodeName": "source"
}
},
"rules": {
"invalid-attr": {
"options": {
"allowAttrs": [
{
"name": "srcset",
"value": {
// ファイル名と拡張子をMustache形式で展開します
"enum": ["{{FileName}}@2x.{{Exp}} 2x", "{{FileName}}@3x.{{Exp}} 3x"]
}
}
]
}
}
}
}
]
}