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

de
Tweet
Share
Share
Pin

JavaScript a fost clasat constant ca limbaj de programare preferat de majoritatea dezvoltatorilor.

Peste 63% dintre respondenții intervievați în a Sondaj Stackoverflow 2023 au spus că folosesc JavaScript. Pe de altă parte, codul Visual Studio este un mediu de dezvoltare integrat (IDE) popular. Aceeași studiu a arătat că VS Code este cel mai preferat editor de cod, peste 73% dintre respondenți votând în favoarea acestuia.

Visual Studio Code acceptă JavaScript, printre multe alte limbi. În acest articol, voi descrie importanța rulării JavaScript în Visual Studio Code, cum să creați un proiect JavaScript/scrierea unui cod, voi oferi un ghid pas cu pas pentru rularea JavaScript în VS Code și cele mai bune practici pentru rularea codului JavaScript în VS Code.

Importanța rulării JavaScript în VS Code

JavaScript este printre puținele limbi care sunt acceptate imediat Cod VS. Acestea sunt câteva dintre motivele pentru care este posibil să doriți să rulați JavaScript pe VS Code:

  • Executați și testați codul: puteți scrie și executa cod JavaScript fără a părăsi editorul. Acest editor va trata tot ce scrieți în fișiere cu extensie .js ca cod JavaScript. Acest editor de cod va evidenția, de asemenea, erorile din codul dvs. pe măsură ce scrieți și va facilita depanarea.
  • Are un terminal integrat: nu trebuie să părăsiți editorul de cod pentru a rula comenzi pentru a crea noi foldere sau fișiere sau pentru a controla versiunile. Acest terminal vă permite, de asemenea, să vizualizați mesaje de eroare.
  • Un ecosistem mare: poți oricând să cauți extensii dacă funcția pe care o cauți nu este acceptată de VS Code. Puteți folosi astfel de extensii pentru funcții suplimentare și puteți obține suport pentru diferite biblioteci și cadre.
  • Reîncărcare la cald și server live: puteți activa salvarea automată pentru codul JavaScript pe VS Code. Opțiunea de server live vă permite, de asemenea, să rulați cod JavaScript în browser pe măsură ce codificați. Funcția de reîncărcare la cald asigură că editorul de cod alege automat toate modificările și nu trebuie să reporniți serverul live.
  • IntelliSense și completarea codului: Uneori, editorii de cod au nevoie doar să începeți să scrieți cod și vă vor oferi sugestii prin sugestie inteligentă de cod și completare automată. Această caracteristică vă va economisi timp; trebuie doar să te concentrezi pe logică.
  • Compatibilitate între platforme: puteți instala VS Code pe macOS, Linux și Windows. Acest editor de cod acceptă și TypeScript, un superscript al JavaScript care introduce tipuri.
  Verificați compatibilitatea rețelei 2G, 3G și 4G LTE pentru un telefon din orice țară

Rularea JavaScript în VS Code

Setarea unui mediu pentru rularea codului JavaScript este ușoară, indiferent de sistemul dvs. de operare. În mod ideal, mașina dvs. ar trebui să aibă cel puțin 4 GB de RAM pentru aceste instalări. Urmați acești pași pentru a începe.

Configurați Node.js

Node.js este unul dintre cele mai populare medii de rulare JavaScript. Cu Node.js, puteți rula JavaScrpt în afara unui mediu de browser. De asemenea, Node.js a făcut posibilă utilizarea JavaScript în dezvoltarea backend cu cadrele sale precum Express.js.

Puteți descărcați Node.js gratuit dacă nu îl aveți deja pe aparat. De asemenea, puteți verifica dacă este instalat pe mașina dvs. folosind această comandă:

node -v

Dacă este instalat, veți vedea ceva de genul acesta pe terminalul dvs.:

Configurarea codului Visual Studio pentru dezvoltarea Javascript

Visual Studio Code poate fi descris ca un editor de cod și un IDE, în funcție de cazul de utilizare. VS Code acceptă JavaScript în mod implicit. Cu toate acestea, unele funcții JavaScript vor avea nevoie de extensii pentru a fi executate.

VS Code poate fi descărcat gratuit. Puteți alege cel relevant versiune pentru descărcare bazat pe sistemul dvs. de operare.

Crearea unui proiect JavaScript

Acum aveți software-ul de bază (mediu de rulare și editor de cod) pentru a crea o aplicație JavaScript. JavaScript este folosit pentru a adăuga interactivitate la site-uri web și este folosit mai ales cu HTML și CSS. Cu toate acestea, îl puteți folosi și pentru scripturi și structuri de date.

Acum pot crea o aplicație simplă și o numesc JavaScript-VsCode-app.

Puteți folosi aceste comenzi:

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

Scrierea codului JavaScript în codul Visual Studio

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

După cum puteți vedea, avem un singur fișier (app.js). Acum pot scrie un program simplu care verifică dacă un număr este par. Îmi voi scrie codul în fișierul app.js. Acesta este codul meu:

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

Rularea codului JavaScript în Visual Studio Code

Acum suntem gata să rulăm JavaScript în VS Code. Cu toate acestea, trebuie să înțelegem ce face acest cod. Avem o funcție pe care am numit-o „isEven”. Funcția noastră ia un număr și returnează „adevărat” dacă numărul este divizibil cu doi. Cu toate acestea, dacă numărul nu este divizibil cu doi, va returna „fals”.

  Este suficient de bun pentru a înlocui programatorii?

Acum putem rula această comandă:

node app.js

Îl puteți rula în directorul rădăcină sau în terminalul VS Code.

După rularea codului pe care l-am furnizat în ultimul pas, obținem „8 este egal” ca rezultat.

Ce se întâmplă dacă verificăm dacă 9 este par? Ne putem schimba codul după cum urmează:

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

Iată ce obținem după ce rulăm codul nostru:

După cum puteți vedea, „9 este impar” este rezultatul nostru.

Adăugați extensiile necesare

Programul pe care l-am creat mai sus este simplu. Cu toate acestea, poate doriți să construiți o aplicație complexă în care trebuie să vă lăsați codul sau chiar să depanați. În partea stângă a codului VS, faceți clic pe ultimul buton.

De asemenea, puteți utiliza comenzi rapide de la tastatură: CTRL+Shift+X.

Acum puteți căuta diverse extensii pe care să le utilizați în codul dvs. De exemplu, pot căuta ESLint.

Puteți vedea că extensiile sunt deja activate de partea mea. Verificați întotdeauna descrierea diferitelor extensii pentru a le face ușor de configurat și utilizat.

Utilizați extensia Code Runner

Visual Studio Code acceptă sute de limbaje de programare. Poți să folosești Cod Runner pentru a executa coduri în cele mai comune limbaje de programare. Găsiți fila de extensii din partea stângă a codului VS și căutați Code Runner.

Faceți clic pe Instalați și activați extensia, iar acum sunteți gata să rulați codul. Am o declarație simplă care spune console.log(„Bună ziua, lume!”); în fișierul meu app.js. Îl pot rula folosind Code Runner. Voi folosi comanda rapidă F1 și voi tasta RUN CODE.

Iată ce primesc pe terminalul meu:

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

Cele mai bune practici pentru scrierea eficientă a codului JavaScript

Configurația pe care o avem până acum este perfectă pentru programe JavaScript simple. Cu toate acestea, trebuie să țineți cont de aceste bune practici dacă doriți să rulați JavaScript pe VS Code fără probleme:

  • Utilizați un cod linter: lizibilitatea poate deveni o problemă pe măsură ce dimensiunea fișierului dvs. JavaScript crește. Puteți utiliza o extensie precum ESLint mai frumos pentru a vă asigura că detectați erorile din codul dvs. din timp și creșteți lizibilitatea codului.
  • Păstrați limbi diferite în fișiere diferite: un proiect front-end tipic vă poate solicita să scrieți cod HTML, CSS și JavaScript. Ați putea fi tentat să scrieți tot codul într-un singur document. Cu toate acestea, asigurați-vă întotdeauna că scrieți codul HTML, CSS și JavaScript în fișiere diferite.
  • Profită de extensii: Piața VS Code are mii de extensii care facilitează lucrul cu diferite biblioteci. Exploreaza piata de desfacere și alegeți extensii cu cele mai bune evaluări și documentație.
  5 instrumente de analiză video bazate pe inteligență artificială pentru o mai bună analiză media

Configurarea Git în Visual Studio Code pentru integrarea Controlului versiunilor

Am dat până acum pașii pentru configurarea VS Code și rularea JavaScript în acest editor de cod. Cu toate acestea, poate fi necesar să utilizați controlul versiunilor, cum ar fi Git, pentru a urmări modificările aduse codului sau chiar să le împingeți într-un depozit de la distanță precum GitHub. Aceștia sunt pașii de urmat:

  • Instalați Git: Git este cel mai folosit control al versiunii în dezvoltare. Descărcați Git versiune care se potrivește sistemului dvs. de operare și specificațiilor mașinii. Puteți rula această comandă după instalare pentru a vă verifica versiunea Git:
git -v

Dacă l-ați instalat corect, veți avea ceva similar cu acesta pe terminalul dvs.:

  • Inițializați un depozit Git: puteți să urmăriți toate modificările și să le puneți în scenă pe Git. Rulați această comandă din rădăcina folderului proiectului dvs.:
git init

  • Configurați-vă identitatea Git: trebuie să spuneți lui Git cine sunteți, configurând numele de utilizator și adresa de e-mail. Rulați 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 relevante.

  • Etape și comite modificări: acum ați configurat Git și acum puteți pune în scenă și comite modificările. Rulați această comandă pentru a verifica toate fișierele neurmărite:
git status

Acum puteți vedea toate fișierele neurmărite și necommitate.

Rulați această comandă pentru a stabili modificările:

git add .

Rulați din nou git status și veți vedea ceva similar cu asta:

Acum vă puteți comite fișierele. Rulați această comandă:

git commit -m “your commit message”

Înlocuiește „mesajul tău de angajare” cu ceva care descrie acțiunile tale.

Acum vă puteți conecta controlul sursei cu platforme de depozit la distanță, cum ar fi GitHub.

Concluzie

Sperăm că acum înțelegeți cum să creați un mediu și să rulați JavaScript în VS Code. Este posibil să aveți nevoie de extensii suplimentare pentru a lucra cu bibliotecile și cadrele JavaScript din acest editor de cod. Cu toate acestea, păstrați întotdeauna codul Visual Studio actualizat dacă doriți să vă bucurați de toate cele mai recente funcții.

Consultați articolul nostru despre cele mai bune resurse pentru a învăța JavaScript și a vă perfecționa cunoștințele.