Lekce 5 - Úvod do vývojového prostředí WebStorm
V minulé lekci, Debugging ve vývojovém prostředí Visual Studio Code, jsme si řekli něco o debuggingu přímo ve vývojovém prostředí Visual Studio Code.
Správné používání IDE je pro produktivitu velmi důležité. Ať už pracujeme v jakémkoli IDE nebo na jakémkoli typu projektu, může nám ušetřit hodně času. My se v této lekci seznámíme s jedním z nejpoužívanějších IDE na JavaScript, kterým je WebStorm:
Něco málo o WebStormu
WebStorm je IDE používané především pro vývoj v JavaScriptu. Jak si později ukážeme, WebStorm si poradí i s jinými jazyky. Stejně jako například další IDE PhpStorm, GoLand nebo Rider ho vyvinula česká společnost JetBrains s.r.o.
Licence
Jak asi víte, WebStorm, ani jiné produkty od Jetbrains, není zdarma. My si teď ukážeme několik možností koupě a použití tohoto IDE.
Zkušební verze
První možností je používat IDE jen 30 dní, tedy ve zkušební verzi. Její využití je jednoduché - stačí WebStorm stáhnout (jak, uvidíte později) a on už vám za 30 dní řekne, že potřebujete licenci.
Placená licence
Nyní pojďme k placené licenci. Tu najdeme na oficiálním webu, zde
překlikneme na For Individual Use a vidíme už můžeme vybírat.
Možnosti zde máme dvě, první je koupení pouze WebStormu na jeden rok za 1
399 Kč nebo měsíčně na 139,90 Kč. Druhou možností je koupit si všechny
produkty od Jetbrains za 15 990 kč ročně, nebo 1 599 Kč měsíčně. Po
koupi už stačí jen vyplnit ve WebStormu data z licence, nebo se přihlásit
na účet.
Studentská licence
Jetbrains jsou součástí GitHub Student Developer Packu, pokud
jste student, můžete ho dostat na webu GitHubu a to po kliknutí na
Sign Up for Student Developer Pack, zde budete muset vyplnit
některé údaje a vyfotit potvrzení o studiu, tedy jakýkoli školní dokument
s vaším jménem. Po schválení už se stačí ve WebStormu opět jen
přihlásit, nebo zadat údaje.
Stažení a Instalace
Nyní už přejdeme ke stažení WebStormu, stahovat ho budeme z oficiálních stránek
jetbrains.com kliknutím na tlačítko Download v pravém
horním rohu. Další kroky se budou lišit podle OS.
Windows
Ze všech tří podporovaných platforem je na Windows instalace nejjednodušší, prostě stáhneme soubor a spustíme ho. Průvodce instalací je jednoduchý a intuitivní.
MacOS
Stáhneme soubor .dmg, rozklikneme a spustíme.
Linux
Na Linuxu už to bude mírně složitější, stáhneme archiv
.tar.gz, extrahujeme ho a ve složce
/WebStorm-212.4746.80/bin/ (čísla můžete mít samozřejmě
odlišná) najdeme soubor webstorm.sh. Tento soubor spustíme
příkazem sudo ./webstorm.sh.
Druhý, pravděpodobně jednodušší způsob je stažení přes Ubuntu
Software nebo přes příkaz sudo snap install webstorm. Jako
linuxáci si s tím určitě poradíte.
Základní ovládání
Po spuštění by měl váš WebStorm vypadat asi takto:
K přístupu do jednotlivých projektů jsou zde tři tlačítka:
New Project- vytvoří nový projekt.Open- otevře složku jako projekt.- Get from VCS - otevře projekt z GITu, nebo jiného verzovacího nástroje. O kooperaci GITu a WebStormu se budeme bavit ještě později.
My použijeme to první, tedy New Project. V dalším okně
uvidíme toto okno (frameworky nalevo může mít každý jiné):
Vidíme, že WebStorm nám umí pomoct s vytvářením projektu v
jednotlivých frameworcích, nám pro teď bude stačit
Empty Project. Můžeme si samozřejmě změnit umístění nebo
název projektu. Projekt si vytvoříme. Pravým tlačítkem klikneme na složku
projektu a zvolíme New > JavaScript File, pojmenujeme ho
index.js. Úplně stejně vytvoříme ještě jeden, tentokrát
HTML soubor. Místo New > JavaSript File zvolíme
New > HTML file s názvem index.html, zatím by
vše mělo vypadat takto:
Vidíme, že nám WebStorm sám vygeneroval základní HTML strukturu, my si ji trochu upravíme:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello world!</title> <script type="text/javascript" src="index.js"></script> </head> <body> <button type="button" onclick="clickMe()">Click me!</button> </body> </html>
Přidali jsme import souboru index.js a tlačítko
Click Me!, které po kliknutí spustí funkci
clickMe(), kterou si zanedlouho nadefinujeme.
Možná jste si již všimli, že když začneme psát nový element, např.
<button> , WebStorm nám napovídá. Zobrazí nám všechny
potenciální proměnné, funkce atd. JS soubor upravíme takto:
const clickMe = () => { console.log("Hello world"); };
Pro zobrazení stránky máme dvě možnosti:
- jednoduše otevřeme index.html, třeba v Google Chrome.
- druhá možnost je nechat si opět pomoct WebStormem pomocí kláves
Alt + F2, WebStorm poté spustí na localhostu server, na
kterém spustí naší aplikaci (web).
Oprava
Další užitečná věc, kterou WebStorm disponuje je oprava překlepů
například v HTML tagech. Zkusme si například místo
<button> napsat <buton> a přejděme do
záložky Problems (nebo pomocí kláves Alt +
6):
Ještě lepší je ale oprava podobných chyb, zkusíme např. změnit hodnotu konstanty:
const clickMe = () => { const hello = "Hi world!"; hello = "hello"; console.log(hello); };
Nejen že nás WebStorm na tuto chybu upozorní, ale dokonce nám nabídne
řešení. Při najetí na slovo s chybou a stisknutí kláves Alt +
Enter nám WebStorm nabídne možnost Replace with let,
tu jen odenterujeme a kód je v pořádku:
WebStorm umí upravit i HTML kód, to
můžeme vyzkoušet např. duplikací tagu </head>:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello world!</title> <script type="text/javascript" src="index.js"></script> </head> </head> <body> <button type="button" onclick="clickMe()">Click me!</button> </body> </html>
WebStorm nám odstranění přebytečného tagu po kontrole sám navrhne.
Terminál
Poslední věcí, se kterou se dnes seznámíme, je terminál ve WebStormu.
Dostaneme se do něj přes klávesy Alt + F12, nebo
překliknutím do záložky Terminal vlevo dole. V terminálu je otevřená
složka projektu a my máme možnost spouštět příkazy rovnou z WebStormu ve
složce projektu. Když klikneme na šipečku vedle
Terminal: Local, máme možnost vytvořit SSH session. Ta se dá
použit pro plno věcí od komunikace se serverem, až po připojení
například k Raspberry Pi. Stačí pouze zadat IP adresu cíle, port přes
který chceme komunikovat, naší "přezdívku" pro komunikaci se serverem a
heslo/klíč.
To je pro dnešek vše.
V další lekci, Debugging ve vývojovém prostředí WebStorm, si ukážeme konkrétní vývojové prostředí WebStorm a jak ho lze využít při debuggingu.
