Visual Studio Code è un ambiente di sviluppo integrato (IDE) particolarmente amato da molti programmatori che ne apprezzano l’ampia gamma di funzioni e il suo patrimonio open source. Visual Studio Code rende la codifica più facile, più veloce e meno frustrante. Questo è particolarmente vero quando si tratta di TypeScript, uno dei numerosi linguaggi supportati dall’IDE.
Funzionalità come il completamento del codice, i suggerimenti sui parametri e l’evidenziazione della sintassi rendono gli sviluppatori di TypeScript più produttivi in Visual Studio Code. Inoltre, è dotato di un debugger Node.js integrato e della possibilità di convertire il codice in JavaScript eseguibile dall’editor. Tuttavia, la maggior parte di queste funzioni deve essere configurata per essere utilizzata al meglio.
Come configurare Visual Studio Code per lo sviluppo in TypeScript
Questo tutorial mostra passo dopo passo come configurare Visual Studio Code per lo sviluppo in TypeScript. Inizializzeremo un progetto Node.js in TypeScript, scriveremo del codice e poi compileremo, lanceremo ed eseguiremo il debug di TypeScript, tutto in Visual Studio Code.
Prerequisiti
Prima di iniziare, assicuriamoci di avere:
- Node.js installato e configurato localmente
- Visual Studio Code scaricato e installato
Avremo bisogno di Node.js e di npm (il gestore di pacchetti Node) per costruire il nostro progetto TypeScript. Possiamo verificare che Node.js sia installato sul computer con il seguente comando da terminale:
node -vQuesto dovrebbe restituire la versione di Node.js presente sul computer in questo modo:
v21.6.1Ora iniziamo a usare TypeScript in Visual Studio Code!
Installare il compiler TypeScript
Visual Studio Code supporta lo sviluppo in TypeScript ma non include il compiler TypeScript. Poiché il compiler TypeScript tsc trasforma – o traspila – il codice TypeScript in JavaScript, è un requisito necessario per testare il nostro codice TypeScript. In altre parole, tsc prende il codice TypeScript come input e produce codice JavaScript come output; poi possiamo eseguire il codice JavaScript con Node.js o in un browser web.
Lanciamo il comando seguente nel terminale per installare il compiler TypeScript a livello globale sul computer:
npm install -g typescriptVerifichiamo la versione installata di tsc:
tsc --versionSe questo comando non restituisce un errore, tsc è disponibile. Ora abbiamo tutto ciò che serve per creare un progetto TypeScript!
Creare un progetto TypeScript
Creiamo un semplice progetto Node.js TypeScript chiamato hello-world. Apriamo il terminale e creiamo una cartella per il progetto:
mkdir hello-world
cd hello-worldAll’interno di hello-world, inizializziamo un progetto con il seguente comando npm:
npm init -yQuesto crea un file di configurazione package.json per il progetto Node.js. È ora di vedere il progetto in Visual Studio Code!
Avviamo Visual Studio Code e selezioniamo File > Open folder…
Nella finestra che si apre, selezioniamo la cartella del progetto hello-world e clicchiamo su Open. Il progetto dovrebbe avere un aspetto simile a questo:
Attualmente, il progetto è composto solo dal file package.json inizializzato da npm init.
Selezioniamo View > Terminal nel menu di Visual Studio Code per accedere al terminale integrato dell’editor. Eseguiamo questo comando:
npx tsc --initQuesto comando inizializza un file di configurazione TypeScript chiamato tsconfig.json nella directory del progetto.
Il file tsconfig.json permette di personalizzare il comportamento del compiler TypeScript. In particolare, fornisce al compiler TypeScript le istruzioni per il transpiling del codice TypeScript. Senza di esso, tsc non sarà in grado di compilare il progetto Typescript come vorremmo.
Apriamo tsconfig.json in Visual Studio Code e noteremo che contiene un commento per ogni opzione di configurazione disponibile. Vogliamo che il nostro file tsconfig.json includa queste opzioni:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./build"
}
}È probabile che le uniche differenze che noteremo tra le opzioni precedenti siano l’abilitazione della source mapping per il JavaScript che genereremo e l’aggiunta di una directory di output:
"sourceMap": true,
"outDir": "./build"Apportiamo queste modifiche al file tsconfig.json.
La source mapping è richiesta dal compiler di Visual Studio Code.
Il file outDir definisce la posizione in cui il compiler colloca i file transpilati. Per impostazione predefinita, è la cartella principale del progetto. Per evitare di riempire la cartella del progetto con i file di compilazione a ogni build, impostiamola su un’altra cartella, ad esempio build.
Il progetto TypeScript è quasi pronto per essere compilato. Ma prima è necessario il codice TypeScript.
Clicchiamo con il tasto destro del mouse sulla sezione Explorer e selezioniamo New File…. Digitiamo index.ts e premiamo Invio. Il progetto conterrà un file TypeScript chiamato index.ts:
Iniziamo con il seguente codice TypeScript:
const message: string = "Hello, World!"
console.log(message)
Questo frammento stampa semplicemente il noto messaggio Hello, World!
Provare IntelliSense per il completamento del codice
Mentre scrivevate le righe qui sopra in Visual Studio Code, potreste aver notato alcuni suggerimenti di codice da parte dell’editor. Questo accade grazie a IntelliSense, una delle funzioni più interessanti di Visual Studio Code.
IntelliSense include funzioni come il completamento del codice, informazioni sui documenti e informazioni sui parametri delle funzioni. IntelliSense suggerisce automaticamente come completare il codice durante la digitazione, migliorando notevolmente la produttività e la precisione. Potete vederlo in azione qui:
Tenete presente che Visual Studio Code viene fornito con il supporto di IntelliSense per i progetti TypeScript. Non è necessario configurarlo manualmente.
Ora che sappiamo come scrivere TypeScript come dei professionisti in Visual Studio Code, compiliamolo e vediamo se funziona.
Compilazione di TypeScript in Visual Studio Code
Apriamo il terminale integrato in Visual Studio Code ed eseguiamo:
tsc -p .Questa operazione trasporta tutti i file TypeScript del progetto in JavaScript. Il sito -p . indica al compiler di utilizzare il file tsconfig.json che si trova nella directory corrente. L’output – in questo caso index.js e la source map index.js.map – viene collocato nella directory ./build.
Possiamo confermare che il codice JavaScript transpilato funziona con questo comando nel terminale:
node ./build/index.jsNode.js interpreterà index.js e lo stamperà nel terminale:
Hello, World!Un metodo alternativo per avviare il transpiler consiste nel selezionare Terminal > Run Build Task…. nel menu di Visual Studio Code e cliccare sull’opzione tsc: build – tsconfig.json.
Questa operazione esegue tsc -p . dietro le quinte e costruisce il codice direttamente nell’editor.
Ecco come compilare un progetto TypeScript in Visual Studio Code. Ora resta solo da capire come lanciare ed eseguire il debug del tuo codice.
Lanciare ed eseguire il debug di TypeScript in Visual Studio Code
Visual Studio Code supporta il debug di TypeScript grazie al debugger Node.js integrato. Ma prima di poterlo utilizzare, dobbiamo configurarlo. Clicchiamo sull’icona Run and Debug nella barra laterale, clicchiamo su Create a launch.json file e selezioniamo Node.js.
In questo modo viene creato un file launch.json predefinito di Node.js, ovvero il file di configurazione che il debugger di Visual Studio Code utilizza per avviare ed eseguire il debug di un’applicazione. Questo file di configurazione specifica come lanciare l’applicazione, gli argomenti della riga di comando da utilizzare e le variabili d’ambiente da impostare.
Come possiamo vedere nella sezione Explorer, launch.json si trova nella cartella .vscode di un progetto.
Apriamo questo file e modifichiamolo come segue:
{
// 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_modules/**"
],
"program": "${workspaceFolder}/index.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/build/**/*.js"]
}
]
}Regoliamo le opzioni program, preLaunchTask e outFiles, considerando che:
program: specifica il percorso del punto di ingresso dell’applicazione da debuggare. In TypeScript, dovrebbe contenere il file principale da eseguire all’avvio dell’applicazione.preLaunchTask: definisce il nome dell’attività di compilazione di Visual Studio Code da eseguire prima di lanciare l’applicazione. In un progetto TypeScript, dovrebbe essere l’attività di compilazione.outFiles: contiene il percorso dei file JavaScript transpilati generati dal processo di build. I file source map generati da tsc grazie alla configurazione di"sourceMap": truevengono utilizzati dal debugger per mappare il codice sorgente TypeScript nel codice JavaScript generato. Questo ci permette di eseguire il debug del codice TypeScript direttamente.
Salviamo il file launch.json e apriamo index.ts. Clicchiamo sullo spazio vuoto prima della riga console.log() per impostare un punto di interruzione. Accanto alla riga appare un punto rosso, come questo:
Quando eseguiamo il codice con il compiler, l’esecuzione si ferma lì. Grazie a questo punto di interruzione, possiamo verificare che il debugger di Node.js in Visual Studio Code funzioni come previsto.
Visitiamo nuovamente la sezione Run and Debug e clicchiamo sul pulsante verde play per eseguire il debugger. Attendiamo l’esecuzione di preLaunchTask. Dopo la compilazione del codice, il programma viene lanciato e l’esecuzione si ferma al punto di interruzione impostato in precedenza.
Nell’immagine qui sopra, a sinistra, possiamo vedere i valori delle variabili al momento dell’interruzione. Possiamo anche mettere in pausa, passare oltre, entrare/uscire, riavviare e interrompere, come descritto nella documentazione sul debug di Visual Studio Code.
Premiamo F5 per riprendere l’esecuzione e vedremo il seguente messaggio nella scheda Debug Console:
Hello, World!Questo è ciò che ci si aspetta dall’applicazione e significa che il programma è stato eseguito correttamente.
Abbiamo appena imparato come impostare Visual Studio Code per la programmazione in TypeScript. Il tutorial potrebbe finire qui, ma c’è un’altra cosa importante da imparare: come configurare un’estensione in Visual Studio Code che può rendere ancora più facile scrivere codice di qualità in TypeScript.
Come configurare ESLint in Visual Studio Code
Possiamo estendere il nucleo di Visual Studio Code utilizzando le estensioni. Queste forniscono caratteristiche e funzionalità aggiuntive per l’editor di codice.
Una delle estensioni di Visual Studio Code più popolari per lo sviluppo di TypeScript è l’estensione ESLint.
ESLint è un popolare strumento di analisi statica del codice per JavaScript e TypeScript che aiuta gli sviluppatori a identificare e correggere gli errori di codifica più comuni e ad applicare gli standard di codifica. L’estensione esegue ESLint direttamente nell’editor.
Integriamo ESLint in Visual Studio Code nel nostro progetto TypeScript.
Per prima cosa, inizializziamo ESLint nel progetto con questo comando da terminale:
npm init @eslint/configDurante il processo di configurazione, ci verranno poste alcune domande per aiutarci a generare il file di configurazione di ESLint. Possiamo rispondere come segue:
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSONIl programma di installazione controllerà le dipendenze e ci chiederà se vogliamo installare i pacchetti mancanti. Possiamo rispondere in questo modo:
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npmAlla fine del processo, troveremo un nuovo file .eslintrc.json contenente il seguente codice iniziale:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "standard-with-typescript",
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
}
}Il file . eslintrc.json contiene le impostazioni utilizzate da ESLint per applicare specifici standard di codice, stile e qualità. Ecco come può apparire un .eslintrc.json di base per un progetto Node.js TypeScript:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
// enable node support
"node": true
},
"extends": "standard-with-typescript",
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"project": "tsconfig.json"
},
"rules": {
// force the code to be indented with 2 spaces
"indent": ["error", 2],
// mark extra spaces as errors
"no-multi-spaces": ["error"]
}
}Ora è il momento di installare l’estensione ESLint in Visual Studio Code. Clicchiamo sull’icona Estensioni nel menu a sinistra e digitiamo ESLint. Individuiamo l’estensione ESLint e clicchiamo su Installa.
Per abilitare l’estensione ESLint a ispezionare automaticamente i nostri file TypeScript a ogni salvataggio, creiamo un file settings.json all’interno di .vscode con il seguente contenuto:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"typescript"
],
"eslint.codeActionsOnSave.rules": null
}Il file settings.json contiene la configurazione utilizzata da Visual Studio Code per personalizzare il comportamento dell’editor e delle sue estensioni.
Riavviamo Visual Studio Code per far sì che l’editor carichi le nuove estensioni e configurazioni.
Se apriamo index.ts e modifichiamo il codice, vedremo nuovi errori segnalati dall’IDE. Per gli errori di stile del codice, salviamo il file ed ESLint riformatterà automaticamente il codice come definito in .eslintrc.json.
Ora nulla potrà impedirci di scrivere codice di qualità! Non ci resta che distribuire la nostra applicazione Node.js in un moderno servizio di cloud hosting come quello di Kinsta.
Riepilogo
La configurazione di Visual Studio Code per lo sviluppo in TypeScript è abbastanza semplice: abbiamo appena imparato a creare un progetto Node.js in TypeScript, a caricarlo in Visual Studio Code e a utilizzare l’IDE per scrivere codice assistito da IntelliSense. Abbiamo anche configurato il compiler TypeScript, impostato il compiler Node.js per eseguire il debug del codice TypeScript e integrato ESLint nel progetto.
Se volete portare lo sviluppo delle vostre applicazioni web a un livello superiore, date un’occhiata ai servizi di Hosting di Applicazioni Web e Hosting di Database Gestito di Kinsta. Kinsta offre una serie di soluzioni di hosting ottimizzate per la velocità, la sicurezza e la scalabilità, fornendo un ambiente ideale per la creazione e la distribuzione di applicazioni ad alte prestazioni.
Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.
Lascia un commento