無視構文

無視コメントで特定の行の design-token-lint 違反を抑制。

正当な理由で禁止されたクラスを使う必要がある場合があります — サードパーティ統合、一度限りの実験、または意図的なエスケープハッチなど。無視コメントを使って次の行の違反を抑制します。

構文

違反を含む行の直前の行に design-token-lint-ignore コメントを配置します。3 つのコメント形式が認識されます:

JSX/TSX

{/* design-token-lint-ignore */}
<div className="p-4 bg-gray-500">

CSS-in-JS / ブロックコメント

/* design-token-lint-ignore */
<div className="p-4 bg-gray-500">

行コメント

// design-token-lint-ignore
<div className="p-4 bg-gray-500">

動作の仕組み

リンターがファイルをスキャンするとき、無視マーカーを記憶します。各違反について、前の行がマークされているかをチェックします。マークされていれば違反は抑制されます。

無視コメントは次の行のみに影響します。それ以降の違反は抑制されません。

{/* design-token-lint-ignore */}
<div className="p-4">  {/* 抑制される */}
<div className="p-4">  {/* 抑制されない */}

使うべきとき

良い理由

• サードパーティライブラリの統合 — コンポーネントが props として生の Tailwind クラスを要求する場合
• 生成されたコード — 修正できない、または修正すべきでない自動生成ファイル
• 一時的な回避策 — 理由を説明するコメント付きで

悪い理由

• 「セマンティックトークンを追加するのが面倒」 — トークンを追加してください
• 広範な使用 — 多数の場所で同じクラスを無視している場合は、設定の allowed リストに追加してください
• リンターを完全にサイレンスする — それは目的に反します

ファイルレベルの無視

ファイル全体をスキップするには、ファイルのどこかに design-token-lint-ignore-file コメントを追加します。リンターはそのファイルの内容に関わらず違反をゼロとして扱います。

JSX/TSX

{/* design-token-lint-ignore-file */}

CSS-in-JS / ブロックコメント

/* design-token-lint-ignore-file */

行コメント

// design-token-lint-ignore-file

コメントはファイルの先頭でもファイル内のどこでも配置できます — どちらの場合もファイル全体がスキップされます。

ファイルレベルの無視を使うべきとき

• 生成されたファイル — 修正できない、または修正すべきでない自動生成出力（例: アイコンスプライト、Storybook ストーリーファイル、自動生成ラッパー）
• 移行中のレガシーファイル — 大規模なコードベース移行を進める間、一時的にファイルを抑制し、完了したらコメントを削除する
• テストフィクスチャ — 意図的に生のユーティリティクラスを含むスナップショットやフィクスチャファイル

ファイルレベルの無視を、アクティブなソースファイルに対する包括的な抑制として使用することは避けてください。特定の例外には行レベルの無視または allowed 設定リストを優先してください。

代替手段

無視コメントに手を伸ばす前に、次を検討してください:

1. 任意値構文: p-[14px] は明示的で無視を必要としません
2. セマンティックトークン: 適切なスケールがあれば p-hgap-md
3. 設定の許可リスト: 繰り返される正当な例外であれば .design-token-lint.json の allowed にクラスを追加

無視の文書化

無視コメントは、レビュアーが注意を払っていないと diff 上で見えなくなります。将来のメンテナーが理解できるよう why コメントを追加してください:

{/* design-token-lint-ignore — サードパーティの Calendar ウィジェットが生の p-4 を要求 */}
<CalendarWidget className="p-4" />