ローカルでの編集 VSCode themeKIT

解決済

コード編集について以前こちらで相談させて頂いた際、管理画面で直接いじるのではなく、theme kitを使用した方が良いとアドバイスを受けました。

Visual Studio Codeも教えて下さったのでhttps://qiita.com/not_over_9/items/29cf3938cabf81badfa5

こちらのサイトを参考にhomebrewとtheme kitを導入しました。

 

しかしここで分からなくなってしまったのですが、theme getコマンドまでの導入はmac PCにあるターミナルで行いました。

ですがこれから編集等の作業はVSCodeから行って良いものなのか・・・?VSCodeからShopifyのliquid code等ファイルは開けるようですが、これはターミナルでの作業によりセットアップ完了ということなのでしょうか・・・

そうなるとターミナルは今後使う事はなく、VSCodeで完結するのでしょうか?

 

既に編集中のテーマをダウンロードしたのでテーマIDを記入しtheme getしました。(恐らく私が色々変更したテーマ内容になってます)

元々はsimpleでしたが、間違えてまっさらのsimpleに戻してしまうような行為はありますでしょうか?

それが怖くて結局VSCodeに触れてません・・・

theme open→ローカルで編集したものが仮反映、プレビューのみ?

theme watch→ローカルで編集したものがそのまま反映される(これはShopify管理画面で編集するのと何が違うのでしょう・・・)

↑このコマンドに関しては、ターミナルで打ち込んで、変更するまで適用されるということなんでしょうか?それともVSCodeのどこかに打ち込むものでしょうか?

 

また、間違えてしまった時戻れるようにと、homebrewからGitを導入しVSCodeの拡張機能でも似たような物を入れてみましたが、それ以外にも初心者におすすめの機能はありますか?(一人で行うのでGit Hubはいらない?と思いまだ入れてませんが解釈ミスでしょうか・・・)

 

管理画面での直接のコード編集で大失敗しないように導入するつもりが、そこへすらも辿り着けず・・・

初歩的な質問が盛りだくさんで申し訳ありませんが、分かる部分だけでも教えて頂ければ幸いです。

よろしくお願いいたします。

0 件の「いいね!」
Yuya_M
遊覧客
9 4 3

成功

こんにちは。

自分が使用していて分かる範囲での解答です。参考になればと思います。

VSCodeでShopifyのテーマのファイルが入っているフォルダを開いているのであれば、

わざわざディレクトリ(フォルダ)を指定しなくても、VSCodeのターミナルそのままTheme kit のコマンドを入力すれば良いので便利です。

またVSCodeを使うひとつの理由としてタグなどの入力の補助が便利・またコードも見やすいのでShopify管理画面のコード編集上で直接いじるより効率が良いためです。

もし稼働中のShopifyストアであれば、管理画面から今のテーマを複製できるのでバックアップをとり複製したファイルを編集していくほうが安心かと思われます。 

theme watch のコマンドだけだと現在公開中のストアはアップデートできません。

theme watch —allow-live と入力すると現在公開中のストアをアップデートすることができます。

ただ稼働中のストアの場合、公開中のものを直接いじるのはおすすめではない方法だと思います。

(参考:https://shopify.dev/themes/tools/theme-kit/command-reference)

一度watch コマンドを入力すれば、ファイルを保存するたびに自動的に変更がShopifyストア上にアップデートされ反映されます。

お役に立てれば幸いです。

product-template_liquid_—_Green_Dolphin_St_Debut.jpg