プリセットをつかう
いくつかのプリセットがあります。ルールはそれぞれを有効にする必要があるため、これらを指定することをオススメします。
プリセットの適用
設定のextendsプロパティを以下のように指定します。
{
"extends": ["markuplint:recommended"]
}
好みに合わせて、いくつかの基本プリセットを選択できます。
{
"extends": ["markuplint:html-standard", "markuplint:a11y"]
}
基本プリセット
markuplint:a11ymarkuplint:html-standardmarkuplint:performancemarkuplint:rdfamarkuplint:security
各プリセットに含まれるルールセットを参照してください。
推奨プリセット
markuplint:recommendedmarkuplint:recommended-static-htmlmarkuplint:recommended-reactmarkuplint:recommended-vuemarkuplint:recommended-svelte
これらの推奨プリセットには、**すべての基本プリセット**が含まれています。また、markuplint:recommended以外はそれぞれ固有のルールセット（例: markuplint:recommended-static-html、markuplint:recommended-react）を持っています。
プリセット内の名前付きルール
プリセットのチェックの一部は名前付きルールとして定義されています。名前付きルールは namespace/rule-name 形式の名前を持ち、違反レポートに表示されます（例: a11y/html-lang）。
rules プロパティを使って、名前付きルールの無効化、深刻度の変更、名前空間ワイルドカードによる一括無効化が可能です。
{
"extends": ["markuplint:recommended"],
"rules": {
// 特定の名前付きルールを無効化
"a11y/html-lang": false,
// 名前付きルールの深刻度を変更
"a11y/no-autofocus-outside-dialog": { "severity": "warning" },
// 名前空間内のすべての名前付きルールを無効化
"a11y/*": false
}
}
複数のプリセットが同じベースルールをラップしている場合（例: a11y/id-duplication と html-standard/id-duplication）、それぞれ独立して実行され、個別の違反を報告します。各ルールを個別に制御できます。
名前付きルールの一覧は、以下のルールセットのテーブルを参照してください。
プリセットのルールセット
markuplint:a11y
| 名前付きルール | 解説 |
|---|---|
a11y/id-duplication | id属性値がドキュメント内で重複している場合に警告します。機械可読性の観点から、支援技術における問題を回避できます。 |
a11y/no-refer-to-non-existent-id | for、form、aria-*、フラグメントリンクに指定されたIDが同じドキュメント内に存在することを確認します。 |
a11y/wai-aria | role属性とaria-*属性がWAI-ARIA、DPub-ARIA、およびARIA in HTML仕様に準拠していない場合に警告します。 |
a11y/require-accessible-name | ARIAロールに従ってアクセシブル名がない場合に警告します。 |
a11y/redundant-accessible-name | 複数のアクセシブル名ソースが存在し、高優先度のソースが低優先度のソースを上書きする要素を検出します。 |
a11y/label-has-control | <label>要素が関連するコントロール要素を持たない、もしくは複数持つ場合に警告します。 |
a11y/landmark-roles | banner、main、complementary、contentinfoがトップレベルのランドマークであること、複数のランドマークが一意のラベルを持つことを確認します。 |
a11y/required-h1 | ドキュメント内に<h1>要素がない場合に警告します。 |
a11y/html-lang | 支援技術がドキュメントの言語を識別できるよう、<html>要素にlang属性を必須とします。 |
a11y/abbr-title | 略語の完全な展開を提供するため、<abbr>要素にtitle属性を必須とします。 |
a11y/media-track | キャプションと説明のため、<audio>や<video>に<track>要素を必須とします。 |
a11y/video-autoplay-muted | 予期しない音声を防ぐため、autoplay属性を持つ<video>要素にmuted属性を必須とします。 |
a11y/no-accesskey | 支援技術のショートカットと競合する可能性があるため、accesskey属性を禁止します。 |
a11y/tabindex-restrict | 自然なタブ順序を壊さないよう、tabindex属性を-1または0のみに制限します。 |
a11y/no-autofocus-outside-dialog | フォーカスを強制的に奪うべきではありません。ただしdialog要素とその子孫では許可されます。 |
a11y/viewport-no-user-scalable | 低視力ユーザーのズーム操作を妨げるため、viewportメタタグのuser-scalable=noを禁止します。 |
a11y/no-consecutive-br | 連続した<br>タグの使用に対して警告します。代わりにCSSマージンや適切なブロック要素を使用してください。 |
a11y/no-ambiguous-navigable-target-names | _blankなどの特殊なナビゲーションキーワードを無効なターゲット名に置き換える可能性のあるタイポを防ぎます。 |
a11y/use-list | テキストノードの先頭に箇条書き文字がある場合、リスト要素の使用を促します。 |
a11y/table-row-column-alignment | colspanとrowspanを考慮して、テーブルの行と列の数の一貫性を確認します。 |
a11y/no-merge-cells | 支援技術にとって困難なセル結合を防ぐため、テーブルセルのcolspanとrowspan属性を禁止します。 |
a11y/neighbor-popovers | ポップオーバートリガーと対応するターゲットがDOM上で隣接していない場合に警告します。 |
a11y/summary-no-interactive | 支援技術がコンテンツにアクセスできない場合や、コンテンツが<summary>にマウスイベントを伝播しない場合があります。 |
a11y/require-dialog-autofocus | showModal()メソッドで表示されるダイアログにautofocus属性を持つ要素が必要です。 |
markuplint:html-standard
| 名前付きルール | 解説 |
|---|---|
html-standard/id-duplication | id属性値がドキュメント内で重複している場合に警告します。 |
html-standard/no-refer-to-non-existent-id | for、form、aria-*、フラグメントリンクに指定されたIDが同じドキュメント内に存在することを確認します。 |
html-standard/attr-duplication | パーサーは重複した属性をすべて無視します。 |
html-standard/deprecated-attr | 互換性の観点から、非推奨属性を使用してはなりません。 |
html-standard/deprecated-element | 互換性の観点から、非推奨要素を使用してはなりません。 |
html-standard/doctype | 後方互換モードを回避する効果があります。 |
html-standard/permitted-contents | HTML仕様で親要素に許可されていない子要素がある場合に警告します。 |
html-standard/required-attr | HTML仕様で定義された必須属性が要素に存在しない場合に警告します。 |
html-standard/ineffective-attr | 要素に対して効果のない属性が指定されている場合に警告します（例: <div>にdisabled）。 |
html-standard/no-orphaned-end-tag | 対応する開始タグのない終了タグが現れた場合に警告します。内部解析エラーに該当します。 |
html-standard/heading-levels | 各見出しは前の見出しと同じか1レベル大きい必要があります。 |
html-standard/no-duplicate-dt | ひとつの<dl>要素内に、同じ名前の<dt>要素が複数あるべきではありません。 |
html-standard/placeholder-label-option | <select>要素がプレースホルダーラベルオプション（空の値を持つ最初の<option>）を必要とするかどうかを確認します。 |
html-standard/require-datetime | <time>要素の内容が有効な日時文字列でない場合、datetime属性が必要です。 |
html-standard/srcset-sizes-constraint | <img>および<source>要素のsrcset、sizes、loading属性間のWHATWG制約を検証します。 |
html-standard/head-charset-utf8 | ドキュメントheadに<meta charset="UTF-8">要素を必須とします。 |
html-standard/no-small-in-heading | <h1>〜<h6>内で<small>を使用すべきではありません。 |
html-standard/figure-no-caption | <figure>内で<table>が<figcaption>以外の唯一のコンテンツである場合、<caption>を省略して<figcaption>を使用すべきです。 |
html-standard/input-pattern-title | <input>要素にpattern属性が指定されている場合、パターンの説明としてtitle属性を含めるべきです。 |
html-standard/no-nested-details-name | 同じ名前グループ内の別の<details>要素の子孫である<details>要素をドキュメント内に含めることはできません。 |
html-standard/no-shortcut-icon | <link rel>のshortcutキーワードは不要です。代わりにrel="icon"を使用してください。 |
markuplint:performance
| 名前付きルール | 解説 |
|---|---|
performance/head-charset-utf8 | ドキュメントheadに<meta charset="UTF-8">要素を必須とします。 |
performance/script-defer | レンダリングブロッキングを避けるため、スクリプトを遅延読み込み・解析すべきです。 |
performance/img-aspect-ratio | Cumulative Layout Shiftを避けるため、<img>にwidthとheight属性を必須とします。 |
performance/iframe-lazy-loading | ビューポート外の要素によるレンダリングブロッキングを避けるため、<iframe>にloading=lazyを必須とします。 |
markuplint:rdfa
| 名前付きルール | 解説 |
|---|---|
rdfa/meta-property | Open Graph等のRDFaベースのメタデータのため、<meta>のproperty属性を許容します。 |
markuplint:recommended-static-html
すべての基本プリセットに加えて、以下のルールが含まれます:
| 名前付きルール | 解説 |
|---|---|
static-html/character-reference | テキストノードまたは属性値で、不正な文字が文字参照でエスケープされていない場合に警告します。 |
static-html/end-tag | 要素の終了タグが省略可能かどうかを人間が判断するのは非常に困難なため、常に終了タグを記述することを推奨します。 |
markuplint:recommended-react
すべての基本プリセットに加えて、以下のルールが含まれます:
| 名前付きルール | 解説 |
|---|---|
react/no-hard-code-id | IDをハードコーディングしたコンポーネントは、ドキュメント内でIDが一意でなければならないため、重複してマウントできません。動的なIDを使用してください。 |
markuplint:recommended-vue
すべての基本プリセットに加えて、以下のルールが含まれます:
| 名前付きルール | 解説 |
|---|---|
vue/no-hard-code-id | IDをハードコーディングしたコンポーネントは、ドキュメント内でIDが一意でなければならないため、重複してマウントできません。動的なIDを使用してください。 |
markuplint:recommended-svelte
すべての基本プリセットに加えて、以下のルールが含まれます:
| 名前付きルール | 解説 |
|---|---|
svelte/no-hard-code-id | IDをハードコーディングしたコンポーネントは、ドキュメント内でIDが一意でなければならないため、重複してマウントできません。動的なIDを使用してください。 |