Design Token Lint

Type to search...

to open search from anywhere

CLI

作成2026年4月10日更新2026年4月10日Takeshi Takatsudo

design-token-lint のコマンドライン使用方法とオプション。

design-token-lint CLI はファイルをスキャンして禁止された Tailwind クラス名を検出し、違反を報告します。

基本的な使い方

# デフォルトパターンをスキャン(config.patterns または組み込みデフォルト)
design-token-lint

# 特定のファイルまたは glob をスキャン
design-token-lint "src/**/*.tsx" "pages/**/*.tsx"

# 単一ファイルをスキャン
design-token-lint src/App.tsx

終了コード

コード意味
0違反なし(またはマッチしたファイルなし)
1違反あり
2予期しないエラー(ファイルシステム障害など)

CI で違反があった場合にビルドを失敗させるには終了コード 1 を利用します:

# .github/workflows/lint.yml
- run: pnpm design-token-lint

出力フォーマット

違反はファイルごとにグループ化されます。各行は行番号、違反クラス、理由を表示します:

Scanning 1 file(s)...

src/App.tsx
  L12: p-4 — Numeric spacing "p-4" — use semantic token (hgap-*/vgap-*) or arbitrary value
  L12: bg-gray-500 — Default Tailwind color "bg-gray-500" — use design system token (zd-*, p0-p15, semantic)

Found 2 violation(s) in 1 file(s).

すべての出力は stderr に送られるため、stdout をパイプするスクリプトに干渉しません。

ファイルパターン解決

引数なしで呼び出された場合、CLI はこの順序でファイルを解決します:

  1. config.patterns が設定されていればそれを使用
  2. それ以外は組み込みデフォルトを使用: src/**/*.{tsx,jsx,astro}components/**/*.{tsx,jsx,astro}lib/**/*.{tsx,jsx}app/**/*.{tsx,jsx}

引数ありで呼び出された場合、各引数はファイルパスまたは glob として扱われます。ignore の設定は引き続き適用されます。

package.json との統合

便利な呼び出し用にスクリプトを追加:

{
  "scripts": {
    "lint:tokens": "design-token-lint"
  }
}

実行:

pnpm lint:tokens

lefthook との統合

lefthook でプッシュ時に実行:

# lefthook.yml
pre-push:
  commands:
    design-token-lint:
      run: npx design-token-lint

CI との統合

GitHub Actions ステップを追加:

- name: Lint design tokens
  run: pnpm design-token-lint

違反があればコード 1 で終了し、ワークフローが失敗します。

Revision History