設定

.design-token-lint.json で design-token-lint を設定 — 禁止パターン、許可例外、無視ファイル、スキャンパターン。

プロジェクトルートに .design-token-lint.json または design-token-lint.config.json ファイルを作成します。リンターは最初に見つかったファイルを読み込み、どちらも存在しない場合は組み込みのデフォルトにフォールバックします。

完全な例

{
  "prohibited": [
    "p-{n}",
    "px-{n}",
    "py-{n}",
    "m-{n}",
    "gap-{n}",
    "bg-{color}-{shade}",
    "text-{color}-{shade}",
    "border-{color}-{shade}"
  ],
  "allowed": ["p-0", "m-0", "gap-0", "p-1px"],
  "ignore": ["**/*.test.*", "**/*.stories.*"],
  "patterns": [
    "src/**/*.{tsx,jsx,astro}",
    "components/**/*.{tsx,jsx,astro}"
  ],
  "classAttributes": ["className", "class", "inputClass"],
  "classFunctions": ["cn", "clsx", "myMerge"]
}

フィールド

すべてのフィールドはオプションで、省略時は組み込みのデフォルトにフォールバックします。

prohibited

フラグを立てるクラス名パターンの配列。各パターンはプレースホルダー構文を使います:

• {n} — 4、8、0.5、16 などの数値に一致。間隔(padding、margin、gap、inset、top/left/right/bottom など)に使用
• {color} — 標準的な Tailwind カラー名に一致: slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose
• {shade} — 50、100、500、950 などの 2〜3 桁のシェード値に一致

例:

• p-{n} は p-4、p-8、p-0.5 に一致
• bg-{color}-{shade} は bg-red-500、bg-blue-300 に一致
• gap-x-{n} は gap-x-2、gap-x-6 に一致

allowed

完全一致の許可リスト。この配列にあるクラスは禁止パターンに関係なく常に通ります。p-0、m-0、p-1px のようなエスケープハッチに便利です。

ignore

完全にスキップするファイル glob パターン。よくあるパターン:

{
  "ignore": [
    "**/*.test.*",
    "**/*.stories.*",
    "**/*.spec.*"
  ]
}

patterns

CLI が明示的なファイル引数なしで呼び出されたときにスキャンするファイル glob パターン。省略時はデフォルトセット(src/**、components/**、lib/**、app/**)を使用します。

suggestionSuffix

違反メッセージの — セパレーターの後に付加される文字列で、デフォルトの提案テキストを置き換えます。プロジェクト固有のトークン命名規則を開発者に案内するために使用します。

デフォルトメッセージ(suggestionSuffix なし):

• 間隔: Numeric spacing "p-4" — use a semantic spacing token or arbitrary value
• カラー: Default Tailwind color "bg-gray-500" — use a design system color token

suggestionSuffix を設定した場合:

{
  "suggestionSuffix": "use hgap-*/vgap-* or zd-* tokens"
}

• 間隔: Numeric spacing "p-4" — use hgap-*/vgap-* or zd-* tokens
• カラー: Default Tailwind color "bg-gray-500" — use hgap-*/vgap-* or zd-* tokens

classAttributes

クラス名を抽出する HTML 属性名の配列。デフォルトは className と class です。プロジェクト独自の属性名を追加する場合に指定します。

{
  "classAttributes": ["className", "class", "inputClass", "overlayClass"]
}

省略時はデフォルト(DEFAULT_CLASS_ATTRIBUTES)が使用されます。

注記: Astro の class:list は classAttributes の設定に関わらず常に抽出されます。

classFunctions

クラス名を抽出するユーティリティ関数名の配列。デフォルトは cn、clsx、classNames、twMerge です。プロジェクト独自のクラスマージ関数を追加する場合に指定します。

{
  "classFunctions": ["cn", "clsx", "myMerge", "customTw"]
}

省略時はデフォルト(DEFAULT_CLASS_FUNCTIONS)が使用されます。

組み込みのデフォルト

設定ファイルが存在しない場合、リンターは以下のデフォルトを使用します:

• Prohibited: すべての標準的な間隔ユーティリティ(p-*、m-*、gap-*、inset-*、scroll-*)の数値版、およびすべてのカラーユーティリティ(bg-*、text-*、border-*、ring-* など)のデフォルト Tailwind カラーとシェードの組み合わせ
• Allowed: p-0、m-0、gap-0、p-1px
• Ignore: **/*.test.*、**/*.stories.*

完全なデフォルトリストはパッケージの READMEを参照してください。

自動的に通るクラス

これらのクラスは allowed に含まれていなくても常に通ります:

• セマンティック間隔トークン: p-hgap-sm、gap-vgap-xs、m-hgap-md(hgap-* または vgap-* サフィックスを持つクラス)
• デフォルト以外のカラー: bg-surface、text-fg、bg-zd-black(標準 Tailwind パレット名ではないカラー名)
• 任意値: w-[28px]、bg-[#123]、p-[10px]
• 間隔・色以外のユーティリティ: flex、grid、hidden、w-full、font-bold など