Lekce 7 - Pokročilá nastavení ve vývojovém prostředí WebStorm
V minulé lekci, Debugging ve vývojovém prostředí WebStorm, jsme si řekli něco o debuggingu přímo ve vývojovém prostředí WebStorm.
Správné nastavení IDE může hodně pomoct, může ušetřit až desítky
hodin času. Většina nastavení je snad individuální, takže zmíním jen to
nejdůležitější. Oficiální nápovědu k pokročilejšímu používání
WebStormu najdeme přes Help > Learn IDE Features. K nastavení
WebStormu verze 2021.1.1 se dostaneme přes File > Settings nebo
stisknutím kláves Ctrl + Alt + S`. Tato
zkratka by se však neměla ani v jiných verzích změnit.
Design
Grafická stránka IDE sice není tím nejdůležitějším nastavením, ale když IDE lépe vypadá, tak se v něm přece jen lépe pracuje. Toto nastavení obsahuje hned několik volitelných prvků.
Theme
Nastavení stylu IDE najdeme v nastavení pod složkou
Appearance & Behavior > Appearance, zde úplně nahoře
vidíme možnost výběru stylu aplikace. Na výběr je zde z pěti:
IntelliJ Light,Windows 10 Light,DarculaaHigh Contrast.
Máme pouze těchto pár oficiálních témat, naštěstí pro gurmány existují stovky dalších na internetu. Na stránce s oficiálními tématy si vybereme nějaký, který se nám líbí a vyzkoušíme si ho nainstalovat.
Pro ukázku budu instalovat téma Gradianto.
Po kliknutí na Install to IDE > <Vaše Verze WebStormu>
zobrazí ve WebStormu oznámení o instalaci téma, zde klikneme na
OK a poté už by se nám mělo téma automaticky změnit. Pokud
chceme styl změnit zpět na nějaký jiný, můžeme to opět udělat v
nastavení, jako jsme si říkali před chvíli. Vyberte si theme, který se
vám bude nejvíce líbit a hlavně dobře pracovat, pro mě to může být
například jeden z těchto:
Text
Možná už jste někdy viděli kód v psacím písmu či jiném stylu. Dnes
se naučíme, jak se stylem textu pracovat. Na stejném místě, kde jsme
nastavovali theme budeme nastavovat i většinu textu. Pokud zaškrtneme
Use custom font, získáme možnost nastavení fontu a velikosti
textu. Nutno říci, že tímto nástrojem upravujeme pouze popisky v IDE, tedy
ne samotný kód, pokud chceme upravit font kódu použijete složku
Editor > Font. Ve výsledku může nastavení textu IDE vypadat
třeba nějak takto:
I když to tak nevypadá, tento text je opravdu v češtině, resp. v angličtině, změněn je pouze font. Samozřejmě toto nastavení je takový odstrašující případ, jaký styl písma by jste asi pro efektivní práci používat neměli. Místo psaní kódu bychom spíše luštili jednotlivá písmenka.
Barvy kódu
Barvy kódu, respektive barvy jednotlivých slov se nastavují v nastavení
Editor > Color Scheme, když rozklikneme některý z jazyků,
objeví se nám všechny typy textu. Po kliknutí na některý typ a odkliknutí
Inherit values from se nám zobrazí možnost zvolit si barvu
pozadí daného typu, textu, chybného kódu a jeho efektů např. rám nebo
podtržení.
Ostatní
Verze Jazyků
Nastavení verze jazyků může být někdy velmi podstatné a špatným
nastavením vznikají zbytečné chyby. Asi víte, že mezi JavaScriptem
(ECMAScriptem) 6 a 5 je velký rozdíl. Byly přidány tzv. arrow funkce,
let či ===. Pokud by jste tedy měli nastavenou verzi
ECMAScript 5 a napsali arrow funkci, WebStorm by to bral jako chybu.
Změnu tohoto nastavení provedeme v menu hlavního nastavení
Languages & Frameworks > <Jazyk>. Zkuste si
například změnit verzi JavaScriptu na ECMAScript 5.1 a napsat arrow
funkci:
IDE nám řekne, že nic takového v jazyce není a je to tedy chyba.
Nástroje
Ve WebStormu máme k dispozici několik nástrojů, které například usnadňují práci při vývoji nebo automatizují různé, často dlouhé a otravné úkony.
Prohlížeče
WebStorm disponuje možností automatického lokálního spuštění webu,
ten se logicky spustí v prohlížeči a právě k tomu se hodí tento nástroj.
V hlavním menu v záložce Tools > Web Browsers máte možnost
vybrat:
- povolené prohlížeče
- výchozí prohlížeč
- v jakém typu souborů se bude ikonka pro prohlížeče zobrazovat (pro otevření souboru v prohlížeči)
Snad jediné, co je potřeba probrat, je úprava nastavení prohlížeče.
Upravovat již přednastavené prohlížeče úplně nejde, můžeme pro ně
však někdy vybrat složku k profilům aj. Abychom úpravu prohlížeče teda
provedli, musíme si zpřístupnit "tužku". To provedeme tak, že si přidáme
nový prohlížeč pomocí znaménka +. Přidá se nám do seznamu
nový řádek, kde můžeme rovnou specifikovat, o jaký prohlížeč jde
(Firefox, Chrome...). Specifičtější úpravu provedeme kliknutím na
prohlížeč a poté na ikonu tužky. Zde máme možnost vybrat nastavení
prohlížeče (Use custom user data directory, respektive složku
pro uživatelská data) a argumenty pro spuštění prohlížeče
(Command line options). My si nějaký argument zadat zkusíme,
sám znám asi tři argumenty, takže raději použiji "jejich
seznam":https://peter.sh/experiments/chromium-command-line-switches/.
Popřípadě můžete vyhledat jiný zdroj switchů pomocí výrazu
Chromium Command Line Switches.
Zkusíme si přidat argument --incognito, ten otevře anonymní
okno. Vytvořte si nějaký HTML soubor, třeba test.html, zde už
stačí jen stisknout klávesy Alt + F2 a vybrat
prohlížeč, otevře se vám anonymní okno s adresou podobnou tomuto:
http://localhost:63342/test/test.html?_ijt=suud9pka173koha2jq3kk6s1c4
a stránku s prázdným obsahem (pokud jste do souboru HTML něco teda nenapsali). Zde jsem vybral některé nejdůležitější argumenty:
--disable-plugins- vypne všechna rozšíření--disable-translate- vypne překládání stránek--multi-profiles- povolí více profilů--window-position=<šířka, výška>- nastaví, kde se otevře okno, formát je "x,y"--window-size=<šířka,výška>- nastaví rozměry okna, např. "800,600"--incognito- nastaví anonymní režim--disable-plugins-discovery- zakáže kontrolu rozšíření--dns-prefetch-disable- zakáže předběžné načítání rozšíření--no-referrers- zakáže chromu odesílání dat
Terminál
Určitě jste již někdy využili zabudovaný terminál ve WebStormu, ať
už na git nebo nahrávání na server. Tento nástroj je velmi užitečný a i
proto je dobré si ho dobře nastavit. Jak už vás asi napadne nastavení
terminálu ve WebStormu najdeme ve nabídce Tools > Terminal.
Zde můžeme určit několik věcí:
- výchozí složku pro projekt
- speciální systémové proměnné
- cestu k systémového terminálu (jaký terminál se má spustit)
Asi jste si všimli, že nastavitelných věcí je zde mnohem víc, ale např. zvýrazňování odkazů v terminálu mi nepřijde úplně nejdůležitější.
Klávesové zkratky
Další velmi užitečnou funkcí je nastavení klávesových zkratek.
Najdeme ho v nastavení v menu Keymap. Změnu tohoto nastavení
provedeme rozkliknutím složky, výběrem funkce a kliknutím na ikonu tužky.
Poté už stačí vybrat, jestli chceme akci vymazat nebo přidat, popřípadě
specifikovat klávesy pro zkratku.
