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

よくある質問

はじめたい​

初心者ですが使っても大丈夫ですか？​

大丈夫です。VS Codeであれば拡張機能をインストールするだけですぐに利用できます。Node.jsやコマンドラインの知識は不要です。また、プレイグラウンドサイトでインストールなしに試すこともできます。

Reactで使えますか？​

もちろん使えます。React（JSX）の他に、Vue、Svelte、Astro、Alpine.js、HTMX、Pug、PHPなどに対応しています。詳しくはHTML以外で使う、またはそのまま使える設定例としてReactプロジェクトのユースケースをご覧ください。

Angularに対応していないようですが？​

公式には用意できておりませんが、有志の方がmarkuplint-angular-parserを作ってくださっています。こちらをご利用ください。

対応しているエディタはVS Codeだけですか？​

公式に対応しているのはVS Codeですが、Cursor、Windsurf、VSCodiumなどVS Codeベースのエディタであれば、VS Code拡張機能がそのまま利用できるため動作が期待できます。VS Code拡張のソースコードは公開しているので、その他のエディタについても有志による開発がなされることに期待しています。

警告を解決したい​

OGPで怒られます​

Open GraphプロトコルはHTMLとは異なる仕様のため、標準で対応していません。対応できる設定例がありますので参考にしてください。

invalid-attrルールで怒られます​

invalid-attrはHTMLの仕様に存在しない属性が要素に指定されていると警告します。フレームワークを利用していると頻繁に遭遇するかもしれません。allowAttrsオプションで許可したい属性を追加できます。

ReactとVueに関してはスペックプラグインにより、各構文固有の属性には警告がでないように定義されています。（参考: なぜスペックプラグインが必要なのですか）

character-referenceルールで怒られます​

character-referenceは文字を厳密に評価しません。エスケープ不要な場所でも変更を促されることがあります。テンプレートエンジンで不都合が起きる場合は、ルールを無効化するか、Issueで報告してください。

require-accessible-nameルールで怒られます​

アクセシブルな名前はaria-labelで解決できますが、最初の解決手段としてそれを使用するのは避けましょう。アクセシブルな名前の計算は複雑で、要素によって得られる場所が異なります:

要素主な名前が得られる場所aria-labelの使用
aコンテンツ可能（推奨しない）
imgalt属性可能（推奨しない）
h1〜h6コンテンツ可能（推奨しない）
buttonコンテンツ可能（推奨しない）
inputlabel要素可能（推奨しない）
selectlabel要素可能（推奨しない）
textarealabel要素可能（推奨しない）

警告が出たコードをどうやって修正したらいいのかわかりません​

基本的には必要と言われた要素や属性は追加し、不要と言われた要素や属性は削除します。スタイルの修正が必要なら、スタイルを修正してください。HTMLの要素や属性にはルールがありますが、スタイルをどの要素に施すかにはルールはありません。準拠することで得られるメリットはアクセシビリティや互換性など多くあります。

修正案を考えるにあたってHTMLの知識は必須です。Markuplintから警告を受けた要素や属性から少しずつ調べていくと良いでしょう。HTML Standardの仕様を調べることが一番ですが、MDNの「HTML の学習: ガイドとチュートリアル」から始めてもよいかもしれません。

どう考えてもおかしくないのに警告がでます​

バグの可能性が高いですが、まず確認してください:

未対応構文の問題であれば、部分的にルールを無効化してください。それ以外であればご報告ください。

もっと知りたい​

Markuplintはアクセシビリティチェッカーとして機能しますか？​

Markuplintはコード上で静的に発見しうるアクセシビリティの問題をチェックします:

  • HTMLやSVG、WAI-ARIAが仕様に準拠しているか
  • アクセシブルな名前の欠落、不正なARIAロール、不適切なランドマーク構造
  • 設定したプロジェクト固有のルール

アクセシビリティは情報設計やビジュアルデザイン、コンテンツ戦略にも関わります。Markuplintがコードに関わる部分を担うことで、その他の問題解決に取り組む余裕を生み出すことを期待しています。

HTMLHintやeslint-plugin-jsx-a11yと何が違うの？​

主な違い:

  • 構造の検証 — 要素の親子関係（コンテンツモデル）をチェックできる
  • 強力なセレクタ — CSSセレクタ、拡張擬似クラス、正規表現できめ細かくルールを制御
  • 幅広い構文サポート — HTML、JSX以外に17以上の構文に対応

HTMLHint、eslint-plugin-jsx-a11yにもそれぞれ固有の機能があり、すべて併用できます。

JSONの出力に対応していますか？​

CLIで--formatオプションを使うことでJSONの出力ができます。

markuplint "**/*.html" --format JSON

E2Eテストに利用できますか？​

もちろん利用できます。Markuplintはコンポーネント単位のチェック向けに設計されていますが、レンダリングされたHTMLのチェックも可能です。Markuplintはブラウザとは異なるHTMLパーサを利用するので、HTMLを文字列で渡す必要があります。サーバが返却したHTML文字列か、ブラウザのDOMツリーを文字列に変換し、MarkuplintのAPIに渡すことでチェックできます。

CLIでglob形式が期待通りに動きません​

シェルの種類によってはglob形式の挙動が異なります。クォーテーションで囲うのが確実です。

# ❌ シェルによってはMarkuplint CLIに渡される前にフルパスに展開される
markuplint **/*.html

# ✅ 文字列として渡され、内部でglob形式として処理される
markuplint "**/*.html"

バグを発見しました​

ご利用ありがとうございます。まず、問題のある**ルールを無効化**することですぐに対処できます。部分的な問題であれば、セレクタを使って部分的に無効化し、他の箇所は保護されたまま利用を継続できます。

その後、Issueを作成してお知らせください（日本語で構いません）。X (Twitter)へのDMや「Markuplint」を含むツイートも拾いに行きます。