Creare un'app Node.js in Visual Studio Code
In questa unità verrà illustrato come:
- Creare un'applicazione JavaScript usando Visual Studio Code e Cosmos DB.
- Usare IntelliSense per semplificare la scrittura del codice.
- Eseguire l'applicazione usando Node.js da Visual Studio Code.
- Usare il debugger per eseguire il codice un'istruzione alla volta ed esaminare le variabili durante l'esecuzione del codice.
Creare un'applicazione JavaScript per Node.js
È possibile creare una nuova applicazione JavaScript per Node.js da Visual Studio Code usando una finestra del terminale. Il comando npm init -y crea un nuovo file, denominato package.json, nella cartella dell'applicazione. Questo file contiene i metadati usati per descrivere l'applicazione al runtime di Node.js.
Quindi, sarà necessario creare un nuovo file per il codice dell'applicazione. Quando si salva il file, assicurarsi di assegnare al file un'estensione .js (per JavaScript). A questo punto si è pronti per iniziare a scrivere il codice JavaScript.
Usare IntelliSense per semplificare la scrittura del codice
Quando si scrive il codice, IntelliSense può eseguire operazioni di controllo del tipo e completamento del codice. Ad esempio, durante la creazione di funzioni, la definizione di tipi o anche l'importazione di un modulo in un file JavaScript, gli elementi aggiunti o importati diventano disponibili per IntelliSense.
Durante la digitazione, IntelliSense usa una combinazione di controllo del tipo e inferenza del tipo per visualizzare i suggerimenti appropriati per il contesto corrente. L'inferenza del tipo consente a IntelliSense di presentare suggerimenti validi per il completamento del codice durante la scrittura:
Il controllo del tipo consente a IntelliSense di visualizzare i parametri che una chiamata di funzione può accettare e di controllare il tipo delle espressioni fornite per ogni funzione:
Altre funzionalità di IntelliSense disponibili in Visual Studio Code includono:
- Rilevamento di codice non raggiungibile e variabili inutilizzate. Le istruzioni che non possono essere mai eseguite e le variabili che non vengono mai usate vengono visualizzate con un colore sfumato nell'editor.
- Visualizzazione di definizioni e riferimenti. La funzionalità di editor rapido consente di visualizzare rapidamente la definizione di un oggetto o di una funzione, anche se si trova in un altro file. Fare clic con il pulsante destro del mouse su una variabile o una funzione e scegliere Visualizza definizione o Visualizza riferimenti. La definizione o i riferimenti vengono visualizzati in una finestra popup.
- Passaggio a una definizione di variabile, funzione o tipo. Questa funzionalità consente di passare direttamente alla definizione di una variabile, una funzione o un tipo nel codice. Questa opzione è utile se è necessario modificare la definizione di un elemento o una funzione. Fare clic con il pulsante destro del mouse sul codice che fa riferimento alla variabile o al tipo oppure che chiama la funzione. Selezionare Vai a definizione oppure Vai a definizione di tipo.
- Suggerimento del possibile refactoring del codice. I puntini di sospensione (...) sotto un elemento indicano le aree in cui IntelliSense ha uno o più suggerimenti. Selezionare i puntini di sospensione per visualizzare i suggerimenti. Selezionare Correzione rapida per implementare il suggerimento.
Eseguire un'applicazione Node.js e sottoporla a debug
Il modo più semplice per eseguire un'applicazione Node.js da Visual Studio Code consiste nell'usare il comando node da una finestra del terminale. Ad esempio, per eseguire il codice in un file denominato index.js, eseguire node index.js.
È possibile usare il debugger Node.js nativo, ad esempio node inspect index, da una finestra del terminale, ma Visual Studio Code fornisce un ambiente avanzato per eseguire il codice un'istruzione alla volta ed eseguire il debug delle applicazioni Node.js.
Configurare il debugger nel file launch.json
Prima di usare il debugger di Visual Studio Code, è necessario configurarlo. Per modificare le impostazioni di configurazione del debugger, selezionare Aggiungere la configurazioni nel menu Esegui. Nell'opzione Seleziona debugger selezionare Node.js. Il file ./.vscode/launch.json visualizza la nuova configurazione.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js",
}
]
}
Per questa applicazione Contoso, con diversi file di codice da eseguire, verranno aggiunte un paio di proprietà aggiuntive. Modificare il nome del file della proprietà del programma in ${file}. In questo modo è possibile eseguire il debug del file JavaScript attualmente attivo. Aggiungere la proprietà argomento quando è necessario passare parametri all'applicazione. Questi valori sono disponibili dalla proprietà process.argv disponibile nel runtime di Node.js.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// ${file} is replaced with active file's name
"program": "${workspaceFolder}/${file}",
// these values are available as process.argv
"args": ["abc", "1"],
}
]
}
Impostare i punti di interruzione
Prima di iniziare a eseguire il debug, è necessario impostare un punto di interruzione nel codice dell'applicazione. A tale scopo, fare clic sul margine sinistro dell'istruzione in cui si vuole sospendere l'esecuzione. Verrà visualizzato un punto rosso.
Consente di iniziare il debug
Per avviare il debug, selezionare Avvia debug nel menu Esegui o avviare il debugger F5. Se si usa un terminale esterno, verrà visualizzata una nuova finestra del terminale. L'output del debugger verrà visualizzato nella finestra Output in Visual Studio Code.
Quando il debugger raggiunge un punto di interruzione nell'applicazione, l'esecuzione viene sospesa e l'istruzione con il punto di interruzione viene evidenziata. Windows in Esegui e esplora debug consente di esaminare e impostare i valori delle variabili locali e globali e dello stack di chiamate. È anche possibile aggiungere espressioni di controllo, che vengono valutate e visualizzate durante l'esecuzione.
| Elemento | Descrizione |
|---|---|
| 1 - Variabili | Tutte le variabili nell'ambito locale e globale. |
| 2- Video | Aggiungere qualsiasi variabile a video durante l'esecuzione. |
| 3- Stack di chiamate | Stack di esecuzione dell'applicazione al momento corrente. |
| 4- Punti di interruzione | Tutti i punti di interruzione impostati nell'applicazione. |
| 5- Barra degli strumenti di debug | Questa barra degli strumenti contiene i comandi che consentono di eseguire il codice un'istruzione alla volta. Se un'istruzione contiene una chiamata di funzione, è possibile eseguire l'istruzione nella funzione o passare oltre. Il comando di uscita dall'istruzione continua l'esecuzione fino al termine della funzione. È anche possibile continuare a eseguire l'applicazione finché il debugger raggiunge un altro punto di interruzione o l'applicazione termina. |
| 6- Console di debug | Vedere i valori delle istruzioni della console. |
Quando si aggiunge codice JavaScript nei prossimi esercizi, potrebbe essere necessario eseguire il debug del codice per determinare cosa è errato. Tornare a questa unità quando necessario.