Cum să rulați JavaScript în codul Visual Studio și programul ca un profesionist

de
Tweet
Share
Share
Pin

JavaScript a fost constant recunoscut ca fiind unul dintre cele mai preferate limbaje de programare de către majoritatea dezvoltatorilor.

Conform unui studiu Stack Overflow din 2023, peste 63% dintre participanții intervievați au declarat că folosesc JavaScript. În contrast, Visual Studio Code este un mediu de dezvoltare integrat (IDE) foarte popular. Același studiu a evidențiat că VS Code este editorul de cod preferat de peste 73% dintre respondenți.

Visual Studio Code oferă suport pentru JavaScript, printre multe alte limbaje. În acest articol, vom explora importanța execuției codului JavaScript în Visual Studio Code, vom explica cum se creează un proiect JavaScript și cum se scrie cod, vom prezenta un ghid pas cu pas pentru rularea JavaScript în VS Code, și vom oferi cele mai bune practici pentru a asigura o funcționare eficientă a codului JavaScript în acest editor.

De ce este important să rulezi JavaScript în VS Code

JavaScript este unul dintre puținele limbaje care sunt acceptate implicit în VS Code. Iată câteva dintre motivele pentru care este avantajos să rulezi JavaScript în VS Code:

  • Execută și testează codul: poți scrie și rula cod JavaScript direct în editor. VS Code va interpreta tot codul scris în fișiere cu extensia .js ca fiind JavaScript. De asemenea, editorul va evidenția erorile pe măsură ce scrii codul, facilitând depanarea.
  • Terminal integrat: nu este nevoie să ieși din editorul de cod pentru a rula comenzi necesare pentru crearea de noi foldere sau fișiere, sau pentru gestionarea versiunilor. Terminalul îți permite, de asemenea, să vizualizezi mesajele de eroare.
  • Un ecosistem vast: poți căuta extensii pentru orice funcționalitate care nu este inclusă în mod implicit în VS Code. Aceste extensii pot oferi funcții suplimentare și suport pentru diverse biblioteci și cadre de lucru.
  • Reîncărcare rapidă și server live: poți activa salvarea automată pentru codul JavaScript în VS Code. Funcția de server live îți permite, de asemenea, să vizualizezi modificările direct în browser în timp real. Funcția de reîncărcare rapidă permite editorului să preia automat toate modificările, fără a fi nevoie să repornești serverul live.
  • IntelliSense și completare automată: uneori, editorii de cod oferă sugestii pe măsură ce începi să scrii cod, prin intermediul funcției IntelliSense și a completării automate. Această caracteristică economisește timp, permițându-ți să te concentrezi pe logică.
  • Compatibilitate între platforme: VS Code poate fi instalat pe macOS, Linux și Windows. Editorul oferă suport și pentru TypeScript, un superset al JavaScript care introduce tipuri.

Cum să rulezi JavaScript în VS Code

Configurarea unui mediu pentru rularea codului JavaScript este simplă, indiferent de sistemul de operare. Ideal, computerul tău ar trebui să aibă cel puțin 4 GB de RAM pentru aceste instalări. Urmează acești pași pentru a începe.

Instalarea Node.js

Node.js este unul dintre cele mai populare medii de execuție JavaScript. Cu Node.js, poți rula JavaScript în afara unui browser. De asemenea, Node.js a permis utilizarea JavaScript în dezvoltarea backend, prin intermediul cadrelor de lucru precum Express.js.

Poți descărca Node.js gratuit, dacă nu îl ai deja instalat pe computer. Poți verifica dacă este instalat folosind această comandă:

node -v

Dacă este instalat, vei vedea ceva similar în terminal:

Configurarea Visual Studio Code pentru dezvoltare JavaScript

Visual Studio Code poate fi considerat un editor de cod sau un IDE, în funcție de modul în care este folosit. VS Code acceptă JavaScript în mod implicit. Totuși, unele funcționalități JavaScript pot necesita extensii pentru a putea fi utilizate.

VS Code poate fi descărcat gratuit. Poți alege versiunea potrivită pentru sistemul tău de operare.

Crearea unui proiect JavaScript

Acum ai software-ul de bază (mediu de execuție și editor de cod) pentru a crea o aplicație JavaScript. JavaScript este folosit pentru a adăuga interactivitate site-urilor web și este adesea utilizat împreună cu HTML și CSS. Îl poți folosi, de asemenea, pentru scripturi și structuri de date.

Acum, vom crea o aplicație simplă, numită JavaScript-VsCode-app.

Poți folosi aceste comenzi:

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

Scrierea codului JavaScript în Visual Studio Code

Pentru această demonstrație, vom scrie doar cod JavaScript. Așa arată proiectul nostru în editorul de cod.

După cum poți vedea, avem un singur fișier (app.js). Acum vom scrie un program simplu care verifică dacă un număr este par. Vom scrie codul în fișierul app.js. Acesta este codul:

function isEven(number) {
    return number % 2 === 0;
}
// Exemplu de utilizare:
let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " este par.");
} else {
    console.log(myNumber + " este impar.");
}

Rularea codului JavaScript în Visual Studio Code

Acum suntem gata să rulăm JavaScript în VS Code. Este important să înțelegem ce face codul. Avem o funcție numită „isEven”. Această funcție primește un număr și returnează „true” dacă numărul este divizibil cu doi. Altfel, returnează „false”.

Acum putem rula această comandă:

node app.js

Această comandă poate fi rulată în directorul rădăcină sau în terminalul VS Code.

După rularea codului furnizat anterior, vom obține ca rezultat „8 este par”.

Ce se întâmplă dacă verificăm dacă 9 este par? Putem schimba codul astfel:

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

// Exemplu de utilizare:
let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " este par.");
} else {
    console.log(myNumber + " este impar.");
}

Iată ce obținem după rularea codului:

După cum se poate observa, rezultatul este „9 este impar”.

Adăugarea extensiilor necesare

Programul pe care l-am creat mai sus este simplu. Totuși, pentru dezvoltarea unor aplicații complexe, va fi nevoie să verificăm codul sau chiar să-l depanăm. În partea stângă a VS Code, apasă pe ultimul buton.

Poți folosi și comanda rapidă CTRL+Shift+X.

Acum poți căuta diverse extensii pe care să le folosești în codul tău. De exemplu, poți căuta ESLint.

După cum se poate vedea, extensia este deja activată în cazul meu. Verifică întotdeauna descrierea diferitelor extensii pentru a le configura și utiliza cu ușurință.

Utilizarea extensiei Code Runner

Visual Studio Code oferă suport pentru sute de limbaje de programare. Poți folosi Code Runner pentru a executa cod în cele mai uzuale limbaje de programare. Accesează secțiunea de extensii din partea stângă a VS Code și caută Code Runner.

Apasă pe Instalează și activează extensia, iar acum poți rula codul. În fișierul app.js, am o instrucțiune simplă: console.log(„Salut, lume!”); O voi rula folosind Code Runner. Voi folosi comanda rapidă F1 și voi introduce RUN CODE.

Iată ce obțin în terminal:

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

Cele mai bune practici pentru a scrie cod JavaScript eficient

Configurația pe care o avem până acum este ideală pentru programe JavaScript simple. Totuși, dacă dorești să rulezi codul JavaScript în VS Code fără probleme, ia în considerare următoarele bune practici:

  • Folosește un cod linter: lizibilitatea codului poate deveni o problemă pe măsură ce dimensiunea fișierului JavaScript crește. Poți folosi o extensie precum ESLint cu Prettier pentru a identifica erorile din cod și a îmbunătăți lizibilitatea acestuia.
  • Păstrează limbajele diferite în fișiere separate: un proiect front-end tipic poate solicita scrierea codului HTML, CSS și JavaScript. Poți fi tentat să scrii tot codul într-un singur document. Totuși, este recomandat să scrii codul HTML, CSS și JavaScript în fișiere separate.
  • Beneficiază de extensii: Magazinul VS Code are mii de extensii care facilitează lucrul cu diverse biblioteci. Explorează magazinul și alege extensii cu evaluări bune și documentație detaliată.

Configurarea Git în Visual Studio Code pentru controlul versiunilor

Am prezentat pașii pentru configurarea VS Code și rularea JavaScript în acest editor. Totuși, este posibil să fie necesar să utilizezi controlul versiunilor, precum Git, pentru a monitoriza modificările codului sau pentru a le încărca într-un depozit la distanță, cum ar fi GitHub. Iată pașii de urmat:

  • Instalează Git: Git este cel mai popular sistem de control al versiunilor în dezvoltare. Descarcă Git, versiunea potrivită pentru sistemul tău de operare. După instalare, poți rula această comandă pentru a verifica versiunea Git:
git -v

Dacă l-ai instalat corect, vei obține un rezultat similar în terminal:

  • Inițializează un depozit Git: poți monitoriza toate modificările și le poți adăuga în Git. Rulează această comandă din rădăcina folderului proiectului:
git init

  • Configurează identitatea Git: trebuie să specifici identitatea ta pentru Git, configurând numele de utilizator și adresa de email. Rulează aceste comenzi pentru a începe:

git config –global user.name „Numele tău”

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

Înlocuiește „Numele tău” și „[email protected]” cu detaliile tale.

  • Adaugă și validează modificările: acum ai configurat Git și poți adăuga și valida modificările. Rulează această comandă pentru a verifica toate fișierele nemodificate:
git status

Acum poți vedea toate fișierele nemodificate sau nevalidate.

Rulează această comandă pentru a adăuga modificările:

git add .

Rulează din nou git status și vei vedea ceva similar cu acesta:

Acum poți valida fișierele. Rulează această comandă:

git commit -m "mesajul tău de validare"

Înlocuiește „mesajul tău de validare” cu un mesaj care descrie acțiunile tale.

Acum poți conecta controlul sursei cu platforme de depozitare la distanță, precum GitHub.

Concluzie

Sperăm că acum ai înțeles cum să creezi un mediu și să rulezi JavaScript în VS Code. Pentru a lucra cu biblioteci și cadre de lucru JavaScript în acest editor, este posibil să ai nevoie de extensii suplimentare. Totuși, menține întotdeauna VS Code actualizat pentru a beneficia de toate funcțiile noi.

Consultă articolul nostru despre cele mai bune resurse pentru a învăța JavaScript și a-ți îmbunătăți cunoștințele.