Je úžasné, kolik je v kyberprostoru zdarma dostupných editorů kódu. Paleta je tak pestrá, že je čím dál těžší si z ní vybrat. Zdá se, že časy zapřísáhlých notepadistů jsou ty tam. Ti se často v internetových diskusích chvástali, že nic jiného k tvorbě webu nepotřebují a kdo říká, že ano, tak je debil a lama.
Prase aby se v těch všech editorech vyznalo. Ale nedá se nic dělat a je třeba jít s dobou. Od stařičkého Poznámkového bloku bychom se měli posounout dál. Nabízí se logický nástupce: Notepad2 nebo Notepad++.
Malé historické okénko
Nebudem se pouštět do větších akcí, takže všelijaké Frontpejdže a Drímvívry necháme raději stranou. Některé z nich po zásluze zmizely v propadlišti dějin, jiné (na okraji zájmu) přežívají dodnes.
Zatímco původní windowsácký Notepad zvládá pouze elementární úlohy zpracování textu, jeho mladší bratr Notepad2 je o něco málo zručnější. Zlepšení je to mírné, žádná revoluce se nekoná. Dalo by se říct, že Notepad2 jen doplňuje funkce, které měl Notepad dávno umět. Namátkou třeba automatické odsazování, zvýraznění syntaxe, podpora velkých souborů či konverze znakových sad.
Lepší než drátem do oka, ale žádné kódérské orgie to teda nejsou.
Chceme víc
Takhle to samozřejmě nemohlo a nemůže zůstat. Frustrování vývojáři prahli po mnoha funkcích, které by jim zefektivnily práci. Chtěli mít možnost upravit si GUI editoru, pracovat s více dokumenty najednou, nechat editor našeptávat nebo automaticky dopňovat texty, nahrávat si makra nebo dělat něco úplně jiného, co je ještě ani nenapadlo, ale určitě brzy napadne.
To vše jim umožňuje třeba Notepad++. Kromě toho nabízí nepřeberné možnosti formátování textů, úklid HTML kódu, práci s FTP, možnost vlastních úprav definic pro zvýrazňování syntaxe, kontrolu pravopisu a spoustu dalších užitečných funkcí. Co tam není, na to existuje plug-in.
Na podobné úrovni jako Notepad++ bych viděl i legendární PSPad, svého času taky velice oblíbený a poměrně slušně vybavený editor.
Jak vybírat?
Samozřejmě editorů kódu je celá řada a není cílem tohoto článku je všechny probírat. K dispozici dnes máme od jednoduchých a nenáročných texťáků, až po rozsálhá a složitě propletená IDE. Jak se mění doba a s ní i požadavky webařsko-kódérského řemesla, mění se taky nároky vývojářů na editory kódů.
Nerad bych se tady příliš rozdováděl, ale dovednosti nejmodernějších editorů jsou podle mého naprosto úžasné, až téměř dechberoucí. Vzájemně se předhánějí v perfekcionismu a přicházejí stále s novými a čím dál dokonalejšími funkcemi. Posuď sám, co všechno nabízejí:
- Náhledy obrázků - po najetí myší nad URL se v bublině ukáže náhled obrázku
- Náhledy barev - po najetí myší nad kód barvy v CSS se v bublině zobrazí náhled barvy
- Simultánní editace - možnost přepisovat všechny texty stejného znění/typu najednou, např. všechny h2 v celém dokumentu bleskurychle změnit na h3. (Nezaměňovat s Find/Replace.)
- Režim nerušené práce - odstranění všech rozptylujících elementů (např. skrýt IDE, změnit barvu pozadí/textu, schovat editační nástoje), když se potřebuješ soustředit.
- Live reload - automatické obnovení HTML stránky v prohlížeči při jakékoliv změně zdrojových souborů.
- Extrakce stylů z PSD - možnost pracovat přímo v editoru s PSD předlohou a snadno tak generovat CSS kód rovnou z grafického návrhu.
- Inline editace - editace více dokumentů bez nutnosti přepínání mezi nimi.
- Podpora preprocesorů CSS - název mluví za vše, takže hurá do tvorby moudrých stylopisů v SCSS, LESS nebo Stylus.
- Emmet - podpora super rychlého psaní HTML a CSS kódu pomocí geniálních textových zkratek
- Podpora verzování - přímé napojení na GitHub a vše, co k tomu patří
- Podpora automatizace - stahování a instalace balíčků pro Gulp, Grunt, Bower
- a kvanta dalších laskomin, které teprve čekají na to, až je objevím.
Zkušenější z vás už možná vypozorovali, že mluvím z valné části o editoru Brackets, který vyvíjí komunita nadšenců nastartovaná iniciativou společnosti Adobe. Rozhodoval jsem se, který editor vyzkoušet a z finalistů Sublime text, Brackets, CoffeeCup, Atom.io či Netbeans jsem se nakonec rozhodl vybrat vítěze jménem Závorky. Ani přesně nevím proč, ale to není podstatné. Samozřejmě i ostatní stojí za prozkoumání, ale prozatím zůstaňme u Brackets.
Co všechno má v arzenálu Brackets
Nebudu se tady rozepisovat o funkcích, které jsou (nebo by alespoň měly být) dneska pro moderní editory kódu běžné. Přirozeně i Brackets zvládá code folding, syntax highlighting, split view či themes. Pojďme ale mrknout na několik mnohem zajímavějších možností.
Quick Edit
Toto je bombastická věc. Bez toho, abys v editoru musel mít otevřeny desítky tabů, můžeš snadno editovat propojené soubory, aniž bys ztratil původní kontext. V praxi to vypadá tak, že kurzorem najedeš třeba nad název CSS třídy ve svém HTML souboru, zmáčkneš CTRL+E a v malém inline okénku se ti ukážou její deklarace, které snadno upravíš. Přitom jsi stále v okně (tabu) původně editovaného souboru a nikam nemusíš překlikávat.
Podobně to funguje pro CSS kódy barev, kdy opět po stiskutí CTRL+E vyskočí pro změnu dialog s výběrem barvy, který navíc nabízí seznam posledních používaných barevných hodnot.
Totéž pro JavaScript funkce, akorát v bledě modrém. Perličkou navíc je zobrazení grafického editoru přechodové křivky při aktivaci funkce Quick Edit nad CSS vlastností cubic-bezier(), steps() či nad ease funkcemi.
Quick Docs
CTRL+K otevře okno s dokumentací CSS vlastnosti, na které máš kurzor. Užitečný rychlý help.
Live Preview
Živý náhled výborně poslouží, pokud zrovna nemáš projekt pořešený kompletně na nějakém lokálním webovém serveru a chceš se podívat, jak vypadá v prohlížeči (jen Chrome). A to dokonce v reálném čase, tedy veškeré změny v kódu se okamžitě projeví na zobrazované stránce bez nutnosti jejího ručního obnovování. K tomu má Brackets zabudovaný svůj vlastní mini server.
V rámci režimu Live Preview prohlížeč navíc zvýrazňuje právě editovaný element, který máš pod kurzorem. To platí nejen pro HTML elementy, ale i pro CSS pravidla. V případě CSS se pak zvýrazní všechny elementy, na které se dané pravidlo aplikovalo.
Quick Find Definition
Pro rychlé vyhledávání v rámci editovaného dokumentu zmáčkni CTRL+T a zobrazí se seznam použitých funkcí (JS) nebo vlastností (CSS). Filtrovat se dá intuitivně psaním prvních písmen z názvu hledané funkce/vlastnosti formou on-the-fly fulltext search.
JSLint
Je fajn, když se někdo nebo něco stará o to, že právě vytvářený kód je validní, čistý a dobře napsaný. Brackets to dělá standardně u javascriptu a pokud najde nějaké nesrovnalosti, vyplivne jejich seznam vespod stránky. Vývojáři tvrdí, že jejich linter je velice vybíravý a netoleruje jen tak leccos. Dá se samozřejmě v nastavení úplně vypnout.
Multieditace
Další pecky, které je vhodné se naučit používat. Pro sloupcovou multieditaci zmáčkni ALT a natáhni si kurzor na tolik řádků, kolik potřebuješ. Pak začni psát a ... zázrak! Tímto způsobem si krásně urychlíš třeba tvorbu položek pole nebo zápis seznamu barev, jejichž název začíná stejným stringem.
Když si pomocí CTRL+Select označíš více položek v dohledu, všechny je pak přepíšeš najednou. Je to mnohem rychlejší, než každou přepisovat zvlášť nebo ztrácet čas (v případě méně rozsáhlých změn) s funkcí Replace.
CTRL+B je kouzelná klávesová kombinace, která označí následující instanci objektu/slova, na kterém se zrovna nachází kurzor. Pokud následující slovo není to správné, můžeš jej přeskočit pomocí CTRL+SHIFT+B, čímž se zároveň označí další objekt v pořadí.
K označení všech instancí vybraného objektu se skvěle hodí klávesová zkratka ALT+F3. U ní ale dávej pozor na to, aby opravdu bylo označeno jen to, co je třeba.
Vychytávek je tam ještě více, takže doporučuji zavítat na github stránku Working with Multiple Selections, kde je navíc uvedena hezky přehledná tabulka všech dostupných klávesových zkratek.
Shrnutí
Tolik rychlý a stručný přehled skvělých nových vymožeností, které editor Brackets nabízí. Teď je jen dostat pod kůži a začít používat. Za sebe můžu říct, že se na Brackets zvyká velice snadno a docela rychle. Prozatím jsem spokojen a budu s ním dále pokračovat.
Závěrem se sluší dodat, že Brackets jsou multiplatformní software (JavaScript based) a potěší tak svými schopnostmi vývojáře nejen na PC, ale i na Macu a Linuxu.