Nový VS Code editor v Shopify: rychlejší práce, méně klikání
Kdo někdy ladil Liquid přímo v Shopify, ví, že vestavěný editor nebyl žádné terno. Shopify ale vyrukovalo s verzí, která běží na jádře Visual Studio Code přímo v prohlížeči. Bez stahování souborů, bez přepínání do lokálního IDE. Z pohledu vývojáře velká úleva, z pohledu manažera menší riziko chyb. Pojďme se podívat, co všechno editor umí a proč ho vyzkoušet.
Jak se tam dostat? Otevřete náhled jakéhokoli tématu a za URL dopište ?vs=1. Pokud vám Shopify už nový editor zapnulo, načte se hned – v rohu se objeví odznáček Powered by VS Code.
Proč VS Code právě teď
- Jedno prostředí pro všechny – drtivá většina theme developerů píše lokálně ve VS Code. Díky integrované verzi v adminu odpadá otravné „stáhni, uprav, pushni“. Prostě kliknete, upravíte, uložíte.
- Rychlost – Shopify slibuje, že velké Liquid soubory se nyní otevřou až dvakrát rychleji. A skutečnost? Otestovali jsme to na šabloně s více než 120 KB Liquid kódu a rozdíl je opravdu znát – spinner se točí sotva pár vteřin.
- Plnotučný tooling – klávesové zkratky, příkazová paleta, tmavý režim… zkrátka to, na co jste z desktopu zvyklí. A ano, funguje i rozdělené zobrazení a drag-and-drop mezi panely.
Co nový editor zvládne
| Funkce | K čemu to je | Proč vás to bude bavit |
| Globální hledání (Ctrl/⌘ + Shift + F) | Projede celý projekt během vteřiny. | Zapomenutý CSS class? Najdete raz dva. |
| IntelliSense pro Liquid | Napovídá filtry, proměnné i JSON schémata. | Méně překlepů, čistší kód. |
| Theme Check linter | Hlásí chyby v reálném čase. | Ušetří ladění na produkci. |
| Dark mode a vlastní font | Přepnete si motiv, jak jste zvyklí. | Oči vám poděkují. |
| Multi-tab & split view | Dva soubory vedle sebe, klidně víc. | Snadnější refaktoring větších změn. |
| Command Palette (Ctrl/⌘ + Shift + P) | Stejná jako v desktop VS Code. | Rychle vyhledáte příkaz, aniž byste lovili v menu. |
Co zůstává při starém
Nebojte, API, Theme App Extensions ani Shopify CLI se nemění. Nový editor je „jen“ jiné okno do stejného repozitáře. Deployment, verzování přes GitHub i vaše stávající workflow jedou dál beze změn. Staré motivy – Dawn, Horizon a spol. – otevřete a upravíte stejně jako dřív, jen v pohodlnějším prostředí.
Jak si editor osahat hned teď
- Přihlaste se do Shopify Admin → Online Store → Themes.
- U nepublikovaného (unpublished) tématu klikněte na Customize.
- Do URL v prohlížeči přidejte ?vs=1 a stránku načtěte znovu.
- Pokud jste ve rollout vlně, objeví se nový editor. (Na sandboxu “magexo-superstore” to už jede.)
Kde se editor v praxi hodí
- Rychlé hotfixy. Chybný filtr v Liquid? Upravíte přímo v adminu, lint vám hned ukáže, jestli jste to nepokazili ještě víc.
- Code review bez instalace IDE. Manažer nebo designér se do kódu podívá přes web, aniž by musel cokoliv instalovat. Shopify plánuje i inline komentáře – zatím v beta verzi.
- Onboarding juniora. Nováček zná VS Code z kurzů, nepotřebuje řešit lokální CLI. Prostě dostane přístup do adminu a může psát.
A co bude dál?
Podle changelogu přibude Git panel, možnost zapnout oblíbená rozšíření (Prettier, ESLint) a hlubší integrace se Shopify GitHub App. Těšíme se hlavně na to, až půjde dělat pull-requesty bez přepínání do GitHubu.
Jak to mění náš denní chléb v Magexo
Většinu práce stejně děláme lokálně přes Shopify CLI a GitHub Actions, takže nový editor je spíš příjemný bonus. U drobných úprav ale oceňujeme, že:
- nemusíme klonovat repozitář kvůli jedné ikonce,
- kolegové z marketingu zvládnou změnit text v bannerech bez strachu z „černé obrazovky“,
- klient si drobnosti opraví sám, aniž by čekal na deploy.
Shrnutí
Shopify nám konečně naservírovalo editor, za který se nemusí stydět. Pokud se živíte Liquid šablonami, dejte mu šanci: přidejte ?vs=1 k URL a zkuste si upravit layout.liquid. Možná už nebudete chtít zpátky. A kdyby se přece jen něco chovalo divně, klidně nám napište – rádi probereme, jak nový editor zapojit do vašeho workflow.
Držíme vám palce a těšíme se na první dojmy – třeba u dalšího releasu!