Design Token Lint
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

無視構文

無視コメントで特定の行の 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">  {/* suppressed */}
<div className="p-4">  {/* NOT suppressed */}

同一行の末尾無視

無視コメントは、自身の行に単独で置く必要はありません。実際のコードの後に 末尾 コメントとして置いた場合、その同じ行の違反も抑制します — 加えて、後続の行も引き続き抑制します:

<div className="p-4"> {/* design-token-lint-ignore */}
<div className="m-8">
<div className="gap-6">

ここでは、無視コメントが自身の行の末尾にあるため p-4 が抑制され、コメントはいつもどおり次の行もカバーするため m-8 が抑制されます。報告されるのは gap-6 だけです。

Note

末尾の同一行無視は、常に自身の行 と 次の行の 両方 をカバーします — 現在の行だけを抑制する方法はありません。それが意外なら、代わりに単独の行に置いたプレーンな次行無視を選び、抑制範囲がレビュアーにとって明白なままになるようにしてください。

3 つのコメント形式(JSX、ブロック、行)はすべて末尾位置をサポートします:

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

使うべきとき

良い理由

  • サードパーティライブラリの統合 — コンポーネントが 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 — third-party Calendar widget requires raw p-4 */}
<CalendarWidget className="p-4" />

これは以前とまったく同じように p-4 を抑制します — 理由テキストはオプションで、デフォルトでは純粋にレビュアーへの配慮です。

文書化された理由の強制

2 つのオプトイン設定フラグが、上記の「理由を追加する」という慣習を、レビュアーの規律に頼る代わりに、リンターが実際にチェックするものに変えます:

  • requireIgnoreReason — 実際の違反を隠す素の無視(理由テキストなし)は、黙って抑制する代わりに報告されます。

  • reportUnusedIgnores — 何も抑制しなかった無視コメント自体が報告されます(ESLint の reportUnusedDisableDirectives に相当)。

{
  "requireIgnoreReason": true,
  "reportUnusedIgnores": true
}

どちらのフラグも、このページのすべての無視コメント形式に適用されます — 次行、同一行、そして(requireIgnoreReason については)design-token-lint-ignore-file を除くすべて — さらに css 宣言スキャンのパスにも適用されます。完全な挙動と出力例については、設定ガイドの requireIgnoreReason / reportUnusedIgnores を参照してください。

Revision History

作成更新