Shopify 公式の Theme linter 「Theme Check」を使用してテーマの構文エラーをチェックする
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は、Shopify が公式でリリースしている Theme linter である「Theme Check」を使用して、Shopify テーマのエラーをチェックする方法についてまとめたいと思います。
Shopify テーマをローカルで編集しているのが前提となりますので、以前書いたこちらの記事も併せてお読みいただけるとありがたいです。
導入
公式の GitHub ページに沿って、Homebrew で導入します。
$ brew tap shopify/shopify
$ brew install theme-check使い方
導入後、作業ディレクトリに移動し、以下のコマンドを実行して使用します。
$ theme-checkオプション指定なしの theme-check では、カレントディレクトリでのチェックを実行します。
実行すると以下のように結果が出力されます。
チェックの内容について
チェック項目は大きく分けて3種に分けられます。
style: コードの記述方法を統一する lint チェックsuggesstion: deprecated な記述の置換などの提案error: syntax error のようなテーマのアップロードに影響するエラー
チェッカーの設定について
ルートディレクトリに.theme-check.yml を置くことでチェックディレクトリの指定とチェック項目の有効/無効の設定が行えます。
設定内容の例は公式の GitHub にあるサンプルを御覧ください。
検出するエラーの設定内容は theme-check -l で確認することができます。
注意点
2021年1月現在、特定ファイルや特定ディレクトリだけのチェックには対応していないようです。
.theme-check.yml でディレクトリを指定したり、 theme-check assets/ でディレクトリを渡して実行することはできますが、その場合は通常のチェック結果に加えて
search.liquid:98: suggestion: MissingTemplate: 'snippets/pagination.liquid' is not found.
error: MissingRequiredTemplateFiles: 'layout/theme.liquid' is missing.
error: RequiredDirectories: Theme is missing 'assets' directory.といった、テーマに必要なファイルが欠落しているというエラーが多く出力されます。
RequiredDirectories, MissingRequiredTemplateFiles, MissingTemplate といったエラーを無効化して、指定ディレクトリ以下に関するエラーに絞って出力させるということは可能です。
まとめ
Shopify のテーマに対応した linter は今までに存在していなかったため、テーマ開発を行う上でかなり有用なものとなるのは間違いないと感じました。
Shopify 公式からのリリースのため、メンテナンスやアップデートにおいても信頼がおけるのが嬉しい点です。
更なるアップデートに期待しつつ、こういったツールでテーマ開発をより効率化していければと思っています。
Shopify テーマ開発を行っている方々の参考にしていただけるとありがたいです。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
