dodání ihned! nové
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF

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,
  • Darcula a
  • High 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:

Theme 2 Theme 3

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:

Font 1
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Version 1

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.


 

Předchozí článek
Debugging ve vývojovém prostředí WebStorm
Všechny články v sekci
Visual Studio Code, WebStorm a debuggování JS
Článek pro vás napsal 2tix
Avatar
Uživatelské hodnocení:
Ještě nikdo nehodnotil, buď první!
jako Autor se věnuje C#, tvorbě her v C++ a JavaScriptu
Aktivity

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!