Jak spouštět JavaScript v kódu Visual Studio a programovat jako profesionál

JavaScript se dlouhodobě těší statusu nejoblíbenějšího programovacího jazyka mezi vývojáři.

Více než 63 % respondentů v průzkumu Stack Overflow z roku 2023 uvedlo, že aktivně používá JavaScript. Na straně vývojových nástrojů, Visual Studio Code (VS Code) dominuje jako preferované integrované vývojové prostředí (IDE). Tentýž průzkum odhalil, že VS Code je volbou pro více než 73 % programátorů.

Visual Studio Code nabízí nativní podporu pro JavaScript a mnoho dalších programovacích jazyků. V tomto článku si podrobně rozebereme, proč je výhodné spouštět JavaScript právě v prostředí VS Code, jak založit projekt, jak psát samotný kód a jak ho v editoru spustit. Dále si představíme osvědčené postupy pro efektivní vývoj s JavaScriptem v VS Code.

Proč spouštět JavaScript v VS Code?

JavaScript je jedním z mála jazyků, které VS Code podporuje ihned po instalaci. Zde je několik důvodů, proč je práce s JavaScriptem ve VS Code tak výhodná:

• Testování a spouštění kódu: Můžete přímo v editoru psát a okamžitě spouštět svůj JavaScript kód. VS Code automaticky rozpozná jakýkoliv soubor s příponou .js jako JavaScript a zvýrazní případné syntaktické chyby během psaní, což značně usnadňuje ladění.
• Integrovaný terminál: Pro práci s projektem není nutné opouštět editor. Terminál umožňuje vytvářet nové složky, soubory, spravovat verze kódu nebo sledovat chybové hlášky.
• Rozsáhlý ekosystém rozšíření: Pokud potřebujete funkcionalitu, kterou VS Code standardně nepodporuje, můžete snadno doinstalovat vhodné rozšíření. Tím získáte podporu pro různé knihovny, frameworky a další nástroje.
• Automatické ukládání a živý server: V VS Code si můžete nastavit automatické ukládání, což vám ušetří práci. Funkce živého serveru umožňuje spouštět kód v prohlížeči a automaticky aktualizovat stránku při každé změně v kódu.
• IntelliSense a dokončování kódu: Editor nabízí návrhy pro váš kód, automatické dokončování příkazů a inteligentní nápovědu, což vám šetří čas a pomáhá se soustředit na samotnou logiku programu.
• Multiplatformní kompatibilita: VS Code je dostupný pro macOS, Linux i Windows. Navíc podporuje TypeScript, nadstavbu JavaScriptu, která přináší typovou kontrolu.

Spuštění JavaScriptu v VS Code

Konfigurace prostředí pro spouštění JavaScriptu je velice jednoduchá, a to bez ohledu na váš operační systém. Pro hladký chod by měl váš počítač splňovat minimální požadavek 4 GB RAM. Následující kroky vás provedou celým procesem.

Instalace Node.js

Node.js je jedním z nejpopulárnějších běhových prostředí pro JavaScript. S Node.js můžete spouštět JavaScript mimo prohlížeč. To umožňuje například vývoj backend aplikací za pomocí frameworků jako Express.js.

Pokud ještě nemáte Node.js nainstalovaný, můžete si jej zdarma stáhnout. Instalaci si můžete ověřit v příkazovém řádku pomocí:

node -v

Po spuštění by se měla zobrazit verze nainstalovaného Node.js:

Konfigurace VS Code pro vývoj v JavaScriptu

Visual Studio Code je univerzální nástroj, který lze použít jako editor kódu i jako plnohodnotné IDE. VS Code má nativní podporu pro JavaScript, ale pro některé funkce je potřeba nainstalovat doplňková rozšíření.

VS Code si můžete zdarma stáhnout pro váš operační systém.

Založení JavaScript projektu

Nyní máte základní stavební kameny (běhové prostředí a editor kódu) pro vývoj v JavaScriptu. JavaScript se běžně používá pro přidání interaktivity do webových stránek, často v kombinaci s HTML a CSS, ale lze jej využít i pro skriptování a zpracování dat.

Vytvořme si jednoduchou aplikaci, kterou nazveme JavaScript-VsCode-app.

V příkazovém řádku zadejte následující příkazy:

mkdir JavaScript-VSCode-app

cd JavaScript-VSCode-app

touch app.js

code .

Psaní JavaScript kódu v VS Code

Pro jednoduchost budeme pracovat pouze s JavaScriptem. Náš projekt v editoru kódu vypadá takto:

Vidíme jeden soubor (app.js). Napíšeme jednoduchý program, který testuje, zda je zadané číslo sudé. Vložte tento kód do souboru app.js:

function isEven(number) {
    return number % 2 === 0;
}
// Example usage:
let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Spuštění JavaScript kódu v VS Code

Nyní jsme připraveni spustit náš JavaScript kód v VS Code. Funkce isEven přijímá číslo a vrací true, pokud je číslo dělitelné dvěma beze zbytku. V opačném případě vrací false.

Pro spuštění kódu použijte tento příkaz:

node app.js

Tento příkaz můžete spustit přímo v kořenovém adresáři projektu, nebo v terminálu VS Code.

Výstup z našeho kódu by měl vypadat takto: „8 is even.“

A co když otestujeme číslo 9? Upravíme kód na:

function isEven(number) {
    return number % 2 === 0;
}

// Example usage:
let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Výstup po spuštění kódu je:

Náš výstup je správně „9 is odd.“

Přidání rozšíření

Program, který jsme vytvořili je velmi jednoduchý. Pokud chcete pracovat na komplexnějších aplikacích, budete muset kód lintovat nebo ladit. Klikněte na předposlední ikonu na levé straně VS Code (nebo použijte zkratku CTRL+Shift+X).

Zde můžete vyhledávat a instalovat různá rozšíření. Zkusme například ESLint.

Vidíme, že ESLint je již aktivní. Vždy si přečtěte popis rozšíření, abyste ho správně nakonfigurovali.

Použití rozšíření Code Runner

Visual Studio Code podporuje stovky programovacích jazyků. Pomocí rozšíření Code Runner můžete spouštět kód napsaný ve většině běžných programovacích jazyků. Vyhledejte Code Runner v panelu rozšíření na levé straně VS Code.

Po instalaci a aktivaci rozšíření jste připraveni spouštět kód. Vložte do souboru app.js následující řádek: console.log(„Hello, World!“); a spusťte ho přes Code Runner. Použijte klávesovou zkratku F1 a zadejte „RUN CODE“.

V terminálu se zobrazí:

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
Hello, World!
[Done] exited with code=0 in 2.106 seconds

Osvědčené postupy pro efektivní psaní kódu v JavaScriptu

Pro jednoduché programy je naše nastavení dostačující. Pokud ale chcete vyvíjet komplexnější aplikace, je dobré mít na paměti tyto osvědčené postupy:

• Používejte linter kódu: Pokud se váš soubor s JavaScriptem zvětší, může být obtížné udržovat kód přehledný. Používejte rozšíření jako Prettier ESLint pro automatické formátování kódu a včasné odhalení chyb.
• Ukládejte různé jazyky do samostatných souborů: Typický front-end projekt obsahuje HTML, CSS a JavaScript kód. Nikdy nepíšete celý kód do jednoho dokumentu, ale rozdělte kód do jednotlivých souborů podle jazyků.
• Využívejte rozšíření: VS Code Marketplace nabízí tisíce rozšíření pro usnadnění práce s různými knihovnami a frameworky. Prozkoumejte marketplace a vybírejte rozšíření s dobrým hodnocením a dokumentací.

Nastavení Gitu pro správu verzí v VS Code

Dosud jsme si ukázali, jak nastavit VS Code a spouštět v něm JavaScript. Pokud chcete sledovat změny v kódu nebo je sdílet se vzdáleným repozitářem, jako je GitHub, budete potřebovat systém pro správu verzí. Postupujte následovně:

• Instalace Gitu: Git je nejpoužívanější systém pro správu verzí. Stáhněte si Git pro váš operační systém. Po instalaci si ověřte verzi Gitu v terminálu:

git -v

Pokud je Git nainstalován, terminál zobrazí verzi Gitu:

• Inicializace Git repozitáře: Pro sledování změn vytvořte Git repozitář. Přejděte do kořenového adresáře projektu a zadejte:

git init

• Nastavení Git identity: Nastavte své uživatelské jméno a email pro Git pomocí těchto příkazů:

git config –global user.name „Vaše Jméno“

git config –global user.email „[email protected]„

Nahraďte „Vaše Jméno“ a „[email protected]“ vašimi skutečnými údaji.

• Připravení a uložení změn: Zkontrolujte stav vašich souborů pomocí příkazu:

git status

Zobrazí se seznam všech nesledovaných souborů.

Změny připravte pomocí příkazu:

git add .

Po opětovném spuštění příkazu `git status` se objeví změny v souborech.

Uložte vaše změny pomocí příkazu:

git commit -m "Váš commit message"

Nahraďte „Váš commit message“ výstižným popisem provedených změn.

Nyní můžete propojit správu verzí se vzdálenými platformami jako GitHub.

Závěr

Doufáme, že nyní rozumíte tomu, jak si nastavit prostředí pro spouštění JavaScriptu v VS Code. Pro práci s knihovnami a frameworky budete pravděpodobně potřebovat další rozšíření. Pro využívání všech nejnovějších funkcí VS Code, nezapomeňte editor pravidelně aktualizovat.

Prohlédněte si náš článek o nejlepších zdrojích, jak se učit JavaScript a zlepšete své dovednosti.