6. diel - Rozšírené nastavenia vo vývojovom prostredí webstore
V minulej lekcii, Debugging vo vývojovom prostredí webstore , sme si povedali niečo o Debugging priamo vo vývojovom prostredí webstore.
Správne nastavenie IDE môže veľa pomôcť, môže ušetriť až desiatky
hodín času. Väčšina nastavení je snáď individuálne, takže spomeniem
len to najdôležitejšie. Oficiálne pomocníka k pokročilejšiemu
používaniu WebStormu nájdeme cez Help > Learn IDE Features. K
nastaveniu WebStormu verzie 2021.1.1 sa dostaneme cez
File > Settings alebo stlačením klávesov Ctrl +
Alt + S `. Táto skratka by sa však nemala ani v iných
verziách zmeniť.
Dizajn
Grafická stránka IDE síce nie je tým najdôležitejším nastavením, ale keď IDE lepšie vyzerá, tak sa v ňom predsa len lepšie pracuje. Toto nastavenie obsahuje hneď niekoľko voliteľných prvkov.
Theme
Nastavenie štýlu IDE nájdeme v nastavení pod zložkou
Appearance & Behavior > Appearance, tu úplne hore vidíme
možnosť výberu štýlu aplikácie. Na výber je tu z piatich:
IntelliJ Light,Windows 10 Light,DarculaaHigh Contrast.
Máme len týchto pár oficiálnych tém, našťastie pre gurmánov existujú stovky ďalších na internete. Na stránke s oficiálnymi témami si vyberieme nejaký, ktorý sa nám páči a vyskúšame si ho nainštalovať.
Pre ukážku budem inštalovať tému Gradianto.
Po kliknutí na Install to IDE > <Vaše Verze WebStormu>
zobrazí vo WebStormu oznámenia o inštalácii tému, tu klikneme na
OK a potom už by sa nám malo téma automaticky zmeniť. Ak chceme
štýl zmeniť späť na nejaký iný, môžeme to opäť urobiť v nastavení,
ako sme si hovorili pred chvíľu. Vyberte si theme, ktorý sa vám bude najviac
páčiť a hlavne dobre pracovať, pre mňa to môže byť napríklad jeden z
týchto:
Text
Možno už ste niekedy videli kód v písacom písme či inom štýle. Dnes
sa naučíme, ako sa štýlom textu pracovať. Na rovnakom mieste, kde sme
nastavovali theme budeme nastavovať aj väčšinu textu. Ak zaškrtneme
Use custom font, získame možnosť nastavenia fontu a veľkosti
textu. Treba povedať, že týmto nástrojom upravujeme len popisky v IDE, teda
nie samotný kód, ak chceme upraviť font kódu použijete zložku
Editor > Font. Vo výsledku môže nastavení texte IDE vyzerať
napríklad nejako takto:
Farby kódu
Farby kódu, respektíve farby jednotlivých slov sa nastavujú v nastavení
Editor > Color Scheme, keď rozkliknite niektorý z jazykov,
objaví sa nám všetky typy textu. Po kliknutí na niektorý typ a odkliknutí
Inherit values from sa nám zobrazí možnosť zvoliť si farbu
pozadia daného typu, textu, chybného kódu a jeho efektov napr. Rám alebo
podčiarknutie.
Ostatné
Verzia Jazykov
Nastavenie verzie jazykov môže byť niekedy veľmi podstatné a zlým
nastavením vznikajú zbytočné chyby. Asi viete, že medzi JavaScriptom
(ECMAScript) 6 a 5 je veľký rozdiel. Boli pridané tzv. Arrow funkcie,
let či ===. Ak by ste teda mali nastavenú verzii
ECMAScript 5 a napísali arrow funkciu, webstore by to bral ako chybu.
Zmenu tohto nastavenia vykonáme v menu hlavného nastavenia
Languages & Frameworks > <Jazyk>. Skúste si
napríklad zmeniť verziu JavaScriptu na ECMAScript 5.1 a napísať arrow
funkciu:
Nástroje
Vo WebStormu máme k dispozícii niekoľko nástrojov, ktoré napríklad uľahčujú prácu pri vývoji alebo automatizujú rôzne, často dlhé a otravné úkony.
Prehliadača
Webstore disponuje možnosťou automatického lokálneho spustenia webu, ten
sa logicky spustí v prehliadači a práve k tomu sa hodí tento nástroj. V
hlavnom menu v záložke Tools > Web Browsers máte možnosť
vybrať:
- povolenej prehliadača
- predvolený prehliadač
- v akom type súborov sa bude ikonka pre prehliadače zobrazovať (pre otvorenie súboru v prehliadači)
Snáď jediné, čo je potrebné prebrať, je úprava nastavenia
prehliadača. Upravovať už prednastavené prehliadača úplne nejde, môžeme
pre nich však niekedy vybrať zložku k profilom ai. Aby sme úpravu
prehliadača teda vykonali, musíme si sprístupniť "ceruzku". To vykonáme
tak, že si pridáme nový prehliadač pomocou znamienka +. Pridá
sa nám do zoznamu nový riadok, kde môžeme rovno špecifikovať, o aký
prehliadač ide (Firefox, Chrome ...). Špecifickejšie úpravu vykonáme
kliknutím na prehliadač a potom na ikonu ceruzky. Tu máme možnosť vybrať
nastavenia prehliadača (Use custom user data directory,
respektíve zložku pre užívateľské dáta) a argumenty pre spustenie
prehliadača (Command line options). My si nejaký argument zadať
skúsime, sám poznám asi tri argumenty, takže radšej použijem "ich zoznam":
https://peter.sh/experiments/chromium-command-line-switches/.
Poprípade môžete vyhľadať iný zdroj switchov pomocou výrazu
Chromium Command Line Switches.
Skúsime si pridať argument --incognito, ten otvorí okno
inkognito. Vytvorte si nejaký HTML súbor, treba test.html, tu už
stačí len stlačiť klávesy Alt + F2 a vybrať
prehliadač, otvorí sa vám okno inkognito s adresou podobnou tomuto:
http://localhost:63342/test/test.html?_ijt=suud9pka173koha2jq3kk6s1c4
a stránku s prázdnym obsahom (ak ste do súboru HTML niečo teda nenapísali). Tu som vybral niektoré najdôležitejšie argumenty:
--disable-plugins- vypne všetky rozšírenia--disable-translate- vypne prekladanie stránok--multi-profiles- povolí viac profilov--window-position=<šířka, výška>- nastaví, kde sa otvorí okno, formát je "x, y"--window-size=<šířka,výška>- nastaví rozmery okna, napr. "800,600"--incognito- nastaví anonymný režim--disable-plugins-discovery- zakáže kontrolu rozšírenie--dns-prefetch-disable- zakáže predbežné načítanie rozšírenia--no-referrers- zakáže chrómu odosielanie dát
Terminál
Určite ste už niekedy využili zabudovaný terminál vo WebStormu, či už
na git alebo nahrávanie na server. Tento nástroj je veľmi užitočný a aj
preto je dobré si ho dobre nastaviť. Ako už vás asi napadne nastavenie
terminálu vo WebStormu nájdeme vo ponuke Tools > Terminal. Tu
môžeme určiť niekoľko vecí:
- predvolený priečinok pre projekt
- špeciálny systémové premenné
- cestu k systémového terminálu (aký terminál sa má spustiť)
Asi ste si všimli, že nastaviteľných vecou je tu oveľa viac, ale napr. Zvýrazňovanie odkazov v termináli mi nepríde úplne najdôležitejšie.
Klávesové skratky
Ďalšou veľmi užitočnou funkciou je nastavenie klávesových skratiek.
Nájdeme ho v nastavení v menu Keymap. Zmenu tohto nastavenia
vykonáme rozkliknutím zložky, výberom funkcie a kliknutím na ikonu ceruzky.
Potom už stačí vybrať, či chceme akciu vymazať alebo pridať, prípadne
špecifikovať klávesy pre skratku.
