JavaScript è stato costantemente classificato come il linguaggio di programmazione preferito dalla maggior parte degli sviluppatori.
Oltre il 63% degli intervistati in a Sondaggio StackOverflow del 2023 ha detto che usano JavaScript. D’altra parte, il codice di Visual Studio è un popolare ambiente di sviluppo integrato (IDE). Lo stesso sondaggio ha dimostrato che VS Code è l’editor di codice preferito, con oltre il 73% degli intervistati che hanno votato a suo favore.
Visual Studio Code supporta JavaScript, tra molti altri linguaggi. In questo articolo descriverò l’importanza di eseguire JavaScript in Visual Studio Code, come creare un progetto JavaScript/scrivere codice, fornire una guida passo passo per eseguire JavaScript in VS Code e le migliori pratiche per eseguire il codice JavaScript nel codice VS.
Sommario:
Importanza dell’esecuzione di JavaScript in VS Code
JavaScript è tra i pochi linguaggi supportati immediatamente Codice VS. Questi sono alcuni dei motivi per cui potresti voler eseguire JavaScript su VS Code:
- Esegui e testa il codice: puoi scrivere ed eseguire il codice JavaScript senza uscire dall’editor. Questo editor tratterà tutto ciò che scrivi nei file con estensione .js come codice JavaScript. Questo editor di codice evidenzierà anche gli errori nel codice mentre scrivi e semplificherà il debug.
- Ha un terminale integrato: non devi lasciare l’editor del codice per eseguire comandi per creare nuove cartelle o file o eseguire il controllo della versione. Questo terminale consente inoltre di visualizzare i messaggi di errore.
- Un grande ecosistema: puoi sempre cercare estensioni se la funzionalità che stai cercando non è supportata da VS Code immediatamente. Puoi utilizzare tali estensioni per funzionalità extra e ottenere supporto per varie librerie e framework.
- Ricaricamento a caldo e server live: puoi abilitare il salvataggio automatico per il tuo codice JavaScript su VS Code. L’opzione del server live ti consente inoltre di eseguire il codice JavaScript sul tuo browser durante la codifica. La funzione di ricaricamento a caldo garantisce che l’editor del codice raccolga automaticamente tutte le modifiche e non sia necessario riavviare il server live.
- IntelliSense e completamento del codice: a volte gli editor di codice hanno solo bisogno che tu inizi a scrivere il codice e offriranno suggerimenti tramite suggerimenti di codice intelligenti e completamento automatico. Questa funzione ti farà risparmiare tempo; devi solo concentrarti sulla logica.
- Compatibilità multipiattaforma: puoi installare VS Code su macOS, Linux e Windows. Questo editor di codice supporta anche TypeScript, un apice di JavaScript che introduce i tipi.
Esecuzione di JavaScript in VS Code
L’impostazione di un ambiente per l’esecuzione del codice JavaScript è semplice, indipendentemente dal sistema operativo. Idealmente, il tuo computer dovrebbe avere almeno 4 GB di RAM per queste installazioni. Segui questi passaggi per iniziare.
Configura Node.js
Node.js è uno degli ambienti runtime JavaScript più popolari. Con Node.js, puoi eseguire JavaScrpt all’esterno di un ambiente browser. Node.js ha anche reso possibile l’utilizzo di JavaScript nello sviluppo backend con i suoi framework come Express.js.
Puoi scarica Node.js gratuitamente se non lo hai già sul tuo computer. Puoi anche verificare se è installato sul tuo computer utilizzando questo comando:
node -v
Se è installato, vedrai qualcosa di simile sul tuo terminale:
Configurazione del codice Visual Studio per lo sviluppo Javascript
Visual Studio Code può essere descritto come un editor di codice e un IDE, a seconda del caso d’uso. VS Code supporta JavaScript per impostazione predefinita. Tuttavia, alcune funzionalità JavaScript necessitano di estensioni per essere eseguite.
VS Code è scaricabile gratuitamente. Puoi scegliere quello pertinente versione da scaricare in base al tuo sistema operativo.
Creazione di un progetto JavaScript
Ora disponi del software di base (ambiente runtime ed editor di codice) per creare un’applicazione JavaScript. JavaScript viene utilizzato per aggiungere interattività ai siti Web ed è utilizzato principalmente con HTML e CSS. Tuttavia, puoi anche usarlo per script e strutture dati.
Ora posso creare una semplice applicazione e chiamarla JavaScript-VsCode-app.
Puoi usare questi comandi:
mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .
Scrittura di codice JavaScript nel codice di Visual Studio
Per questa dimostrazione, scriverò solo codice JavaScript. Ecco come appare il nostro progetto nell’editor di codice.
Come puoi vedere, abbiamo solo un file (app.js). Ora posso scrivere un semplice programma che controlla se un numero è pari. Scriverò il mio codice sul file app.js. Questo è il mio codice:
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.");
}
Esecuzione del codice JavaScript in Visual Studio Code
Ora siamo pronti per eseguire JavaScript nel VS Code. Dobbiamo però capire cosa fa questo codice. Abbiamo una funzione che abbiamo chiamato “isEven”. La nostra funzione prende un numero e restituisce ‘vero’ se il numero è divisibile per due. Tuttavia, se il numero non è divisibile per due, restituirà “false”.
Ora possiamo eseguire questo comando:
node app.js
Puoi eseguirlo nella directory root o nel terminale VS Code.
Dopo aver eseguito il codice fornito nell’ultimo passaggio, otteniamo “8 is even” come output.
E se controllassimo se 9 è pari? Possiamo modificare il nostro codice come segue:
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.");
}
Questo è ciò che otteniamo dopo aver eseguito il nostro codice:
Come puoi vedere, “9 è dispari” è il nostro risultato.
Aggiungi le estensioni necessarie
Il programma che abbiamo creato sopra è semplice. Tuttavia, potresti voler creare un’app complessa in cui è necessario eseguire l’linting del codice o addirittura eseguire il debug. Sul lato sinistro del codice VS, fare clic sul penultimo pulsante.
Puoi anche utilizzare le scorciatoie da tastiera: CTRL+Maiusc+X.
Ora puoi cercare varie estensioni da utilizzare sul tuo codice. Ad esempio, posso cercare ESLint.
Puoi vedere che le estensioni sono già abilitate dalla mia parte. Controlla sempre la descrizione delle varie estensioni per renderle facili da configurare e utilizzare.
Utilizza l’estensione Code Runner
Visual Studio Code supporta centinaia di linguaggi di programmazione. Puoi usare Corridore di codici per eseguire codici nei linguaggi di programmazione più comuni. Individua la scheda delle estensioni sul lato sinistro del tuo VS Code e cerca Code Runner.
Fai clic su Installa e abilita l’estensione e ora sei pronto per eseguire il codice. Ho una semplice istruzione che dice console.log(“Hello, World!”); nel mio file app.js. Posso eseguirlo utilizzando Code Runner. Utilizzerò la scorciatoia F1 e digiterò RUN CODE.
Questo è quello che mi appare sul terminale:
[Running] node "/home/tk/JavaScript-VSCode-app/app.js" Hello, World! [Done] exited with code=0 in 2.106 seconds
Best practice per scrivere codice JavaScript in modo efficiente
La configurazione che abbiamo finora è perfetta per semplici programmi JavaScript. Tuttavia, devi tenere a mente queste best practice se desideri eseguire JavaScript su VS Code senza problemi:
- Utilizza un codice linter: la leggibilità potrebbe diventare un problema con l’aumento delle dimensioni del file JavaScript. Puoi utilizzare un’estensione come ESLint più carino per assicurarti di individuare tempestivamente gli errori nel codice e aumentare la leggibilità del codice.
- Mantieni lingue diverse in file diversi: un tipico progetto front-end potrebbe richiedere la scrittura di codice HTML, CSS e JavaScript. Potresti essere tentato di scrivere tutto il codice in un unico documento. Tuttavia, assicurati sempre di scrivere il codice HTML, CSS e JavaScript in file diversi.
- Sfrutta le estensioni: il marketplace VS Code dispone di migliaia di estensioni che semplificano il lavoro con varie librerie. Esplorare la mercato e scegli le estensioni con le migliori valutazioni e documentazione.
Configurazione di Git in Visual Studio Code per l’integrazione del controllo della versione
Finora abbiamo fornito i passaggi per impostare VS Code ed eseguire JavaScript su questo editor di codice. Tuttavia, potrebbe essere necessario utilizzare il controllo della versione come Git per tenere traccia delle modifiche al codice o addirittura inviarle a un repository remoto come GitHub. Questi sono i passaggi da seguire:
- Installa Git: Git è il controllo di versione più utilizzato nello sviluppo. Scarica Git versione adatta al sistema operativo e alle specifiche della macchina. Puoi eseguire questo comando dopo l’installazione per verificare la tua versione Git:
git -v
Se lo hai installato correttamente, sul tuo terminale avrai qualcosa di simile a questo:
- Inizializza un repository Git: puoi tenere traccia di tutte le modifiche ed eseguirne il commit (staging) su Git. Esegui questo comando dalla radice della cartella del progetto:
git init
- Configura la tua identità Git: devi dire a Git chi sei impostando il tuo nome utente e la tua email. Esegui questi comandi per iniziare:
git config –global user.name “Il tuo nome”
git config –global user.email “[email protected]”>[email protected]“
Sostituisci “Il tuo nome” e “[email protected]‘ con i dettagli pertinenti.
- Stage e commit delle modifiche: ora hai configurato Git e ora puoi stage e commit delle tue modifiche. Esegui questo comando per controllare tutti i file non tracciati:
git status
Ora puoi vedere tutti i file non tracciati e non salvati.
Esegui questo comando per mettere in scena le modifiche:
git add .
Esegui di nuovo git status e vedrai qualcosa di simile a questo:
Ora puoi impegnare i tuoi file. Esegui questo comando:
git commit -m “your commit message”
Sostituisci “il tuo messaggio di impegno” con qualcosa che descriva le tue azioni.
Ora puoi connettere il controllo del codice sorgente con piattaforme di repository remote come GitHub.
Conclusione
Ci auguriamo ora che tu capisca come creare un ambiente ed eseguire JavaScript in VS Code. Potrebbero essere necessarie estensioni aggiuntive per lavorare con librerie e framework JavaScript su questo editor di codice. Tuttavia, mantieni sempre aggiornato il codice di Visual Studio se desideri usufruire di tutte le funzionalità più recenti.
Consulta il nostro articolo sulle migliori risorse per imparare JavaScript e perfezionare le tue conoscenze.