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

autor:
Tweet
Share
Share
Pin

JavaScript byl trvale hodnocen jako nejoblíbenější programovací jazyk většiny vývojářů.

Více než 63 % respondentů dotazovaných v a 2023 průzkum Stackoverflow řekli, že používají JavaScript. Na druhou stranu je kód Visual Studio oblíbeným integrovaným vývojovým prostředím (IDE). Stejný průzkum ukázaly, že VS Code je nejpreferovanějším editorem kódu, pro který hlasovalo více než 73 % respondentů.

Visual Studio Code kromě mnoha dalších jazyků podporuje JavaScript. V tomto článku popíši důležitost spouštění JavaScriptu v kódu Visual Studio, jak vytvořit projekt JavaScript / napsat kód, poskytnu podrobného průvodce spuštěním JavaScriptu ve VS Code a osvědčené postupy pro spouštění kódu JavaScript. v kódu VS.

Význam spouštění JavaScriptu ve VS Code

JavaScript je jedním z mála jazyků, které jsou okamžitě podporovány VS kód. Toto jsou některé z důvodů, proč možná budete chtít spouštět JavaScript na VS Code:

  • Spustit a otestovat kód: Můžete psát a spouštět kód JavaScript, aniž byste opustili editor. Tento editor bude vše, co napíšete do souborů s příponou .js, považovat za kód JavaScript. Tento editor kódu také zvýrazní chyby ve vašem kódu při psaní a usnadní ladění.
  • Má integrovaný terminál: Nemusíte opouštět editor kódu, abyste mohli spouštět příkazy k vytváření nových složek nebo souborů nebo ke kontrole verzí. Tento terminál také umožňuje zobrazit chybová hlášení.
  • Velký ekosystém: Vždy můžete hledat rozšíření, pokud funkce, kterou hledáte, není podporována kódem VS hned po vybalení. Taková rozšíření můžete použít pro další funkce a získat podporu pro různé knihovny a rámce.
  • Hot reloading a live server: Můžete povolit automatické ukládání pro váš JavaScript kód na VS Code. Možnost živého serveru vám také umožňuje spouštět kód JavaScript ve vašem prohlížeči, když kódujete. Funkce horkého opětovného načtení zajišťuje, že editor kódu automaticky vybere všechny změny a vy nemusíte restartovat živý server.
  • IntelliSense a dokončování kódu: Někdy editory kódu potřebují, abyste začali psát kód, a nabídnou návrhy prostřednictvím inteligentního návrhu kódu a automatického dokončování. Tato funkce vám ušetří čas; stačí se zaměřit na logiku.
  • Kompatibilita mezi platformami: VS Code můžete nainstalovat na macOS, Linux a Windows. Tento editor kódu také podporuje TypeScript, horní index JavaScriptu, který zavádí typy.
  Co to je a jaké jsou jeho schopnosti?

Spuštění JavaScriptu v kódu VS

Nastavení prostředí pro spouštění kódu JavaScript je snadné, bez ohledu na váš operační systém. V ideálním případě by váš počítač měl mít pro tyto instalace alespoň 4 GB paměti RAM. Chcete-li začít, postupujte takto.

Nastavte Node.js

Node.js je jedním z nejpopulárnějších běhových prostředí JavaScriptu. S Node.js můžete spouštět JavaScrpt mimo prostředí prohlížeče. Node.js také umožnil používat JavaScript při vývoji backendu se svými frameworky, jako je Express.js.

Můžeš stáhnout Node.js zdarma, pokud jej ještě nemáte na svém počítači. Můžete také zkontrolovat, zda je nainstalován na vašem počítači pomocí tohoto příkazu:

node -v

Pokud je nainstalován, uvidíte na svém terminálu něco takového:

Nastavení kódu Visual Studio pro vývoj Javascriptu

Visual Studio Code lze v závislosti na případu použití popsat jako editor kódu a IDE. VS Code ve výchozím nastavení podporuje JavaScript. Některé funkce JavaScriptu však ke spuštění vyžadují rozšíření.

VS Code je zdarma ke stažení. Můžete si vybrat relevantní verze ke stažení na základě vašeho operačního systému.

Vytvoření projektu JavaScript

Nyní máte základní software (runtime prostředí a editor kódu) pro tvorbu JavaScriptové aplikace. JavaScript se používá k přidání interaktivity na webové stránky a většinou se používá s HTML a CSS. Můžete jej však použít i pro skriptování a datové struktury.

Nyní mohu vytvořit jednoduchou aplikaci a nazvat ji JavaScript-VsCode-app.

Můžete použít tyto příkazy:

mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .

Psaní kódu JavaScript v kódu Visual Studio

Pro tuto ukázku napíšu pouze kód JavaScript. Takto vypadá náš projekt v editoru kódu.

Jak vidíte, máme pouze jeden soubor (app.js). Nyní mohu napsat jednoduchý program, který kontroluje, zda je číslo sudé. Svůj kód napíšu do souboru app.js. Toto je můj kód:

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.");
}

Spouštění kódu JavaScript v kódu Visual Studio

Nyní jsme připraveni spustit JavaScript v kódu VS. Musíme však pochopit, co tento kód dělá. Máme funkci, kterou jsme nazvali ‚isEven‘. Naše funkce vezme číslo a vrátí ‚true‘, pokud je číslo dělitelné dvěma. Pokud však číslo není dělitelné dvěma, vrátí hodnotu ‚false‘.

  Co je to umělá obecná inteligence? Vše, co potřebujete vědět

Nyní můžeme spustit tento příkaz:

node app.js

Můžete jej spustit v kořenovém adresáři nebo na terminálu VS Code.

Po spuštění kódu, který jsme poskytli v posledním kroku, dostaneme jako výstup ‚8 je sudé‘.

Co když zkontrolujeme, zda je 9 sudá? Náš kód můžeme změnit následovně:

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.");
}

Toto dostaneme po spuštění našeho kódu:

Jak vidíte, ‚9 je lichá‘ je náš výstup.

Přidejte potřebná rozšíření

Program, který jsme vytvořili výše, je jednoduchý. Možná však budete chtít vytvořit komplexní aplikaci, ve které budete muset svůj kód lintovat nebo dokonce ladit. Na levé straně VS kódu klikněte na předposlední tlačítko.

Můžete také použít klávesové zkratky: CTRL+Shift+X.

Nyní můžete hledat různá rozšíření, která chcete použít ve svém kódu. Například mohu vyhledat ESLint.

Můžete vidět, že rozšíření jsou na mé straně již povolena. Vždy zkontrolujte popis různých rozšíření, abyste je mohli snadno konfigurovat a používat.

Použijte rozšíření Code Runner

Visual Studio Code podporuje stovky programovacích jazyků. Můžeš použít Spouštěč kódu spouštět kódy ve většině běžných programovacích jazyků. Najděte záložku rozšíření na levé straně vašeho kódu VS a vyhledejte Code Runner.

Klikněte na nainstalovat a povolit rozšíření a nyní jste připraveni spustit svůj kód. Mám jednoduché prohlášení, které říká console.log(“Hello, World!“); v mém souboru app.js. Mohu to spustit pomocí Code Runner. Použiji zkratku F1 a napíšu RUN CODE.

Na svém terminálu dostanu toto:

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

Nejlepší postupy pro efektivní psaní kódu JavaScript

Nastavení, které máme doposud, je ideální pro jednoduché programy JavaScript. Pokud však chcete na kódu VS spouštět JavaScript hladce, musíte mít na paměti tyto osvědčené postupy:

  • Použijte kód linter: Čitelnost se může stát problémem, když se zvětší velikost vašeho souboru JavaScript. Můžete použít rozšíření jako např Hezčí ESLint abyste zajistili včasné zachycení chyb v kódu a zvýšili čitelnost kódu.
  • Uchovávejte různé jazyky v různých souborech: Typický front-endový projekt může vyžadovat, abyste napsali kód HTML, CSS a JavaScript. Můžete být v pokušení napsat celý kód do jednoho dokumentu. Vždy se však ujistěte, že kód HTML, CSS a JavaScript píšete do různých souborů.
  • Využijte rozšíření: VS Code Marketplace má tisíce rozšíření, která usnadňují práci s různými knihovnami. Prozkoumat tržiště a vyberte si rozšíření s nejlepším hodnocením a dokumentací.
  5 způsobů, jak můžete udržovat svůj Nintendo Switch (a prodloužit jeho životnost)

Nastavení Gitu v kódu Visual Studio pro integraci správy verzí

Dosud jsme uvedli kroky pro nastavení kódu VS a spuštění JavaScriptu v tomto editoru kódu. Možná však budete muset použít správu verzí, jako je Git, ke sledování změn ve vašem kódu nebo je dokonce odeslat do vzdáleného úložiště, jako je GitHub. Následující kroky:

  • Nainstalujte Git: Git je nejpoužívanější správa verzí ve vývoji. Stáhněte si Git verzi, která vyhovuje specifikacím vašeho operačního systému a stroje. Po instalaci můžete spustit tento příkaz a zkontrolovat verzi Git:
git -v

Pokud jste jej nainstalovali správně, budete mít na svém terminálu něco podobného:

  • Inicializujte úložiště Git: Můžete sledovat všechny své změny a odevzdávat je (scánit) na Git. Spusťte tento příkaz z kořenové složky vašeho projektu:
git init

  • Nakonfigurujte svou identitu Git: Musíte Gitu sdělit, kdo jste, nastavením svého uživatelského jména a e-mailu. Chcete-li začít, spusťte tyto příkazy:

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

git config –global user.email “[email protected]”>[email protected]”

Nahraďte ‚Vaše jméno‘ a ‚[email protected]“ s příslušnými podrobnostmi.

  • Fáze a odevzdání změn: Nyní jste nakonfigurovali Git a nyní můžete připravit a odevzdat své změny. Spusťte tento příkaz pro kontrolu všech nesledovaných souborů:
git status

Nyní můžete vidět všechny nesledované a nepotvrzené soubory.

Spusťte tento příkaz, abyste provedli změny:

git add .

Spusťte znovu git status a uvidíte něco podobného tomuto:

Nyní můžete odevzdat své soubory. Spusťte tento příkaz:

git commit -m “your commit message”

Nahraďte „správu vašeho závazku“ něčím, co popisuje vaše akce.

Nyní můžete propojit ovládání zdroje se vzdálenými platformami úložišť, jako je GitHub.

Závěr

Nyní doufáme, že rozumíte tomu, jak vytvořit prostředí a spouštět JavaScript ve VS Code. Pro práci s knihovnami a frameworky JavaScript v tomto editoru kódu možná budete potřebovat další rozšíření. Pokud však chcete využívat všechny nejnovější funkce, vždy udržujte kód Visual Studio aktualizovaný.

Podívejte se na náš článek o nejlepších zdrojích, jak se naučit JavaScript a vylepšit své znalosti.