【Shopify.dev和訳】Themes/Developer tools/Theme Check/Overview
この記事について
この記事は、Themes/Developer tools/Theme Check/Overviewの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
テーマチェック
Theme Check は、テーマやテーマアプリの拡張機能に含まれる Liquid や JSON のリンターです。エラーを検出し、Shopify のテーマと Liquid のベストプラクティスを実施します。
テーマチェックは、テーマコード内のいくつかの問題を特定することができます。例えば、以下のようなことが確認できます。
- Liquid の構文エラー
- テンプレートの欠落
- 使用されていない変数やスニペット
- 不明なタグや非推奨のタグ
- 過剰なスニペットの入れ子
- パフォーマンスの問題
プログラミングエラーやスタイルエラーは、コンソールやコードエディタに直接表示されます。それぞれのエラーには、失敗したチェックのドキュメントへのリンクが含まれており、問題を素早くデバッグすることができます。
テーマチェックは、以下の方法で使用できます。
- Through Shopify CLI - 必要に応じてテーマに対するチェックを実行します。
- As a Visual Studio Code plugin - Visual Studio Code に Theme Check を追加して、エラーや自動補完を含むテーマコードのリアルタイムな検証を行います。
- As a plugin for another editor - LSP クライアントを実装しているエディタに Theme Check を統合します。
インストール方法
設定方法
チェックオプションを設定して、デフォルトを上書きしたり、特定のチェックを有効または無効にしたり、独自のカスタムチェックを指定したりすることができます。詳しくは、Theme Check configurationを参照してください。
独自のチェックの作成
独自のチェックを Ruby で作成し、configurationで参照することができます。既存のチェックがどのように書かれているかについては、theme-check repoを参照してください。
他のエディタでのテーマチェックの使用
テーマチェックは Language Server Protocol (LSP) を使って実装されています。つまり、LSP クライアントを実装しているエディタであれば、テーマチェックを言語サーバーとして実装することができます。実装例は Theme Check repo にあります。
コマンドリファレンス
テーマチェックへの貢献
テーマチェックと Shopify Liquid Visual Studio Code extension はオープンソースです。
- theme-check repositoryへの貢献方法を見る
- theme-check-vscode repositoryへの貢献方法を見る
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion