Shopify Theme Check 特定ファイルとセクションを CLI でチェックする

Shopify Theme Check を特定ファイルやセクションで実行するには、3 つの方法があります。CLI にパス引数を直接渡す、Liquid コメントを使用してコードブロックの検査を無効化する、または .theme-check.yml ファイルで ignore パターンを設定する方法です。1 つのファイルのみに出力を限定する --only フラグは存在しませんが、これら 3 つの方法を組み合わせることで、検査対象と除外対象を細かく制御できます。

重要なポイント

• shopify theme check ./sections/hero.liquid で特定ファイルに検査範囲を限定できます。
• インラインの {% # theme-check-disable %} コメントで、Liquid コードの特定ブロックの検査を抑制します。
• .theme-check.yml では ignore で glob パターン全体を除外できます (例: snippets/icon-*)。
• --config フラグで設定ファイルを一時的にオーバーライドでき、CI パイプラインで便利です。
• レガシー Shopify/theme-check Ruby gem は 2024 年 7 月にアーカイブされました。現在のリンターは Shopify CLI 内に @shopify/cli と @shopify/theme パッケージとして存在します。

対象範囲を限定したリント検査が重要な理由 (混乱の原因)

数百個の Liquid ファイルを含む大規模テーマに対して shopify theme check を実行すると、警告の大量出力が発生します。ほとんどの開発者は、編集中のファイルだけをリントしたい、または 1 つのセクションだけでうるさい検査を抑制して、他の場所では有効にしておきたいと考えています。CLI ドキュメントにはこの答えがありますが、3 つのページに散在しているため、この質問は何度も繰り返されます。

良いニュースは、ツールは本当に柔軟だということです。どのユースケースでどのレバーを引くかを知れば、ワークフローは高速になります。

方法 1: ファイルパスをポジショナル引数として渡す

最も直接的なアプローチです。テーマ全体に対して Theme Check を実行する代わりに、チェックしたいファイルまたはディレクトリの相対パスを追加します。

shopify theme check sections/custom-hero.liquid
shopify theme check snippets/product-card.liquid
shopify theme check sections/

これにより、リンターはそのファイルまたはフォルダのみを分析します。1 つ重要な注意点があります。単一ファイルに範囲を限定すると、テーマ全体の検査は一部無効になります。UnusedSnippet や TranslationKeyExists など、複数ファイルの認識が必要な検査は、意味のある結果を得るためにテーマ全体を読む必要があるため、単一ファイルモードでは無効になります。

Liquid 構文、非推奨フィルター、未定義オブジェクト、欠落している {% endschema %} タグなど、ファイルレベルの厳密なエラーについては、単一ファイルスコープが完璧に機能します。

方法 2: Liquid コメントでインラインの検査を抑制する

広範な shopify theme check 実行を保持しながら、コードの特定セクションに対して特定の検査をサイレント実行したい場合は、Theme Check の組み込みコメントディレクティブを使用します。

{% # theme-check-disable UnusedAssign %}
{% assign debug_mode = true %}
{% # theme-check-enable UnusedAssign %}

すべての検査をブロックに対して無効化するには:

{% # theme-check-disable %}
  {# ...まだ移行していないレガシーコード... #}
{% # theme-check-enable %}

このアプローチは、複雑なカスタムセクションを繰り返し作業している場合、厄介なテーマコードベースを継承している場合、または大量の既存の問題を 1 度に修正する準備ができていないプロジェクトに Theme Check を追加する場合に適しています。コメントは厳密にスコープされています。これらの区切り文字の外側のものは影響を受けません。

方法 3: .theme-check.yml で ignore パターンを設定する

永続的に除外したいパスについては、.theme-check.yml 設定ファイルが適切なツールです。以下でスターターファイルを生成できます。

shopify theme check --init

ファイルを編集して、特定の検査またはグローバルレベルで ignore glob を追加します。

TemplateLength:
  enabled: true
  max_length: 400
  ignore:
    - sections/legacy-homepage.liquid
    - snippets/icon-*

検査ごとに重大度レベル (error、warning、info) を設定して、特定の問題が CI 実行を失敗させ、他の問題は情報のみとして報告されるようにすることもできます。デフォルトでは、Theme Check は重大度 error の問題が少なくとも 1 つ検出された場合、終了コード 1 を返します。パイプラインのこのしきい値を調整するには --fail-level を使用します。

shopify theme check --fail-level suggestion

方法 4: --config で設定をその場でオーバーライドする

複数の検査プロファイルを保持している場合 (1 つは厳密、1 つは寛容)、--config フラグでファイルを編集することなくそれらを切り替えることができます。

shopify theme check --config theme-check:recommended
shopify theme check --config theme-check:all

これらの組み込みプリセットは、最も一般的なシナリオをカバーしています。theme-check:recommended はほとんどのテーマ送信のデフォルトです。theme-check:all はすべての利用可能な検査を有効にし、Shopify Theme Store に公開する前の徹底的な監査に役立ちます。

2024 年の変更点: theme-check リポジトリがアーカイブされた

スタンドアロン Shopify/theme-check Ruby gem を参照する古いブックマークまたはチュートリアルがある場合は、このリポジトリが 2024 年 7 月に読み取り専用としてアーカイブされたことに注意してください。すべてのアクティブな開発は Shopify/theme-tools モノレポに移動し、リンターは @shopify/cli と @shopify/theme npm パッケージを通じて配布されるようになりました。

インストールまたはアップデートするには:

# macOS
brew upgrade shopify-cli

# npm (global)
npm install -g @shopify/cli @shopify/theme

Shopify CLI 4.0 以降、CLI はそれをインストールしたパッケージマネージャーを使用して自動的にアップグレードされるため、ほとんどの場合、既に最新バージョンを使用しています。

VS Code 拡張機能 (Shopify Liquid) も Theme Check をバンドルし、themeCheck.onlySingleFileChecks 設定を公開しています。true に設定すると、拡張機能は現在開いているファイルのみをチェックし、パフォーマンスのためにテーマ全体の検査を無効にします。これは CLI の単一ファイルパス動作を反映していており、すべての保存でテーマ全体のリント検査がエディターを遅くする大規模テーマで有効にする価値があります。

実践的なセクション開発ワークフロー

カスタム Liquid セクションを構築またはデバッグするときに効果的なパターンは次の通りです。

1. 開発サーバーを開始: shopify theme dev --store your-store.myshopify.com
2. セクションを編集: sections/your-section.liquid に変更を加える
3. そのファイルのみをリント: shopify theme check sections/your-section.liquid
4. インラインで騒々しい検査を抑制して、本日修正していない既存の問題に対応します。
5. 完全な検査を実行 (shopify theme check) してからプルリクエストを開くか、本番環境にプッシュします。
6. CI を error のみでゲートして --fail-level error を使用すると、警告がデプロイをブロックしません。

このアプローチにより、内側のフィードバックループが高速に保たれ、実際のエラーが顧客に到達する前に検出されます。

ストアフロントコードをクリーンに保つことはオペレーションスタックの 1 つのレイヤーです。もう 1 つのレイヤーは、毎日、どの製品が在庫不足になり、実際の売上を失うかを知ることです。数十または数百の SKU 全体でインベントリを管理している場合、Stockcast: Inventory Forecast は、緊急度でランク付けされた在庫不足予測を透過的で説明可能な数式で表示し、再注文決定は決して直感的な推測ではなくなります。

Shopify App Store で Stockcast: Inventory Forecast を試してみる

FAQ

単一の Liquid セクションファイルで shopify theme check を実行できますか? はい。ファイルパスをポジショナル引数として渡します。shopify theme check sections/your-section.liquid。テーマ全体の検査 (未使用スニペット検出など) は単一ファイルにスコープすると無効になることに注意してください。正確な結果を得るには、テーマ全体を読む必要があるためです。

コード全体で特定の Theme Check ルールをオフにせずに、1 つのコードブロックについてのみ無効化するにはどうすればよいですか? インライン Liquid コメントディレクティブを使用します。{% # theme-check-disable CheckName %} をブロックの前に、{% # theme-check-enable CheckName %} を後に配置します。これにより、区切り文字内の名前付き検査のみが抑制され、ファイルとテーマの残りの部分は完全にリントされたままになります。

2024 年にスタンドアロン theme-check gem や CLI はどうなりましたか? Shopify は 2024 年 7 月に Shopify/theme-check Ruby gem リポジトリをアーカイブし、すべてのアクティブな開発を Shopify/theme-tools モノレポに移動しました。Theme Check は @shopify/cli の一部として配布され、shopify theme check で実行されます。古いセットアップを使用している場合は、brew upgrade shopify-cli または npm install -g @shopify/cli @shopify/theme でアップグレードしてください。