{"id":77069,"date":"2024-03-18T10:25:44","date_gmt":"2024-03-18T09:25:44","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77069&#038;preview=true&#038;preview_id=77069"},"modified":"2024-03-27T09:38:08","modified_gmt":"2024-03-27T08:38:08","slug":"typescript-visual-studio","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/","title":{"rendered":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code"},"content":{"rendered":"<p>Visual Studio Code \u00e8 un ambiente di sviluppo integrato (IDE) particolarmente amato da molti programmatori che ne apprezzano l&#8217;ampia gamma di funzioni e il suo patrimonio open source. Visual Studio Code rende la codifica pi\u00f9 facile, pi\u00f9 veloce e meno frustrante. Questo \u00e8 particolarmente vero quando si tratta di <a href=\"https:\/\/kinsta.com\/it\/blog\/typescript\/\">TypeScript<\/a>, uno dei numerosi linguaggi supportati dall&#8217;IDE.<\/p>\n<p>Funzionalit\u00e0 come il completamento del codice, i suggerimenti sui parametri e l&#8217;evidenziazione della sintassi rendono gli sviluppatori di TypeScript pi\u00f9 produttivi in Visual Studio Code. Inoltre, \u00e8 dotato di un debugger <a href=\"https:\/\/kinsta.com\/it\/argomenti\/node-js\/\">Node.js<\/a> integrato e della possibilit\u00e0 di convertire il codice in <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> eseguibile dall&#8217;editor. Tuttavia, la maggior parte di queste funzioni deve essere configurata per essere utilizzata al meglio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Come configurare Visual Studio Code per lo sviluppo in TypeScript<\/h2>\n<p>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.<\/p>\n<h3>Prerequisiti<\/h3>\n<p>Prima di iniziare, assicuriamoci di avere:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> installato e configurato localmente<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> scaricato e installato<\/li>\n<\/ul>\n<p>Avremo bisogno di Node.js e di <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a> (il gestore di pacchetti Node) per costruire il nostro progetto TypeScript. Possiamo verificare che <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">Node.js sia installato<\/a> sul computer con il seguente comando da terminale:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Questo dovrebbe restituire la versione di Node.js presente sul computer in questo modo:<\/p>\n<pre><code class=\"language-bash\">v21.6.1<\/code><\/pre>\n<p>Ora iniziamo a usare TypeScript in Visual Studio Code!<\/p>\n<h3>Installare il compiler TypeScript<\/h3>\n<p>Visual Studio Code supporta lo sviluppo in TypeScript ma non include il compiler TypeScript. Poich\u00e9 il <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\" target=\"_blank\" rel=\"noopener noreferrer\">compiler TypeScript<\/a> tsc trasforma &#8211; o traspila &#8211; il codice TypeScript in JavaScript, \u00e8 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.<\/p>\n<p>Lanciamo il comando seguente nel terminale per installare il compiler TypeScript a livello globale sul computer:<\/p>\n<pre><code class=\"language-bash\">npm install -g typescript<\/code><\/pre>\n<p>Verifichiamo la versione installata di tsc:<\/p>\n<pre><code class=\"language-bash\">tsc --version<\/code><\/pre>\n<p>Se questo comando non restituisce un errore, tsc \u00e8 disponibile. Ora abbiamo tutto ci\u00f2 che serve per creare un progetto TypeScript!<\/p>\n<h2>Creare un progetto TypeScript<\/h2>\n<p>Creiamo un semplice progetto Node.js TypeScript chiamato <strong>hello-world<\/strong>. Apriamo il terminale e creiamo una cartella per il progetto:<\/p>\n<pre><code class=\"language-bash\">mkdir hello-world\ncd hello-world<\/code><\/pre>\n<p>All&#8217;interno di <strong>hello-world<\/strong>, inizializziamo un progetto con il seguente comando npm:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Questo crea un file di configurazione <strong>package.json<\/strong> per il progetto Node.js. \u00c8 ora di vedere il progetto in Visual Studio Code!<\/p>\n<p>Avviamo Visual Studio Code e selezioniamo <strong>File<\/strong> &gt; <strong>Open folder&#8230;<\/strong><\/p>\n<p>Nella finestra che si apre, selezioniamo la cartella del progetto <strong>hello-world<\/strong> e clicchiamo su <strong>Open<\/strong>. Il progetto dovrebbe avere un aspetto simile a questo:<\/p>\n<figure id=\"attachment_175420\" aria-describedby=\"caption-attachment-175420\" style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/open-typescript-project-visual-studio-code.png\" alt=\"Screenshot di Visual Studio Code con un progetto aperto.\" width=\"1919\" height=\"1035\"><figcaption id=\"caption-attachment-175420\" class=\"wp-caption-text\">Il progetto Node.js TypeScript aperto in Visual Studio Code.<\/figcaption><\/figure>\n<p>Attualmente, il progetto \u00e8 composto solo dal file <strong>package.json<\/strong> inizializzato da <code>npm init<\/code>.<\/p>\n<p>Selezioniamo <strong>View<\/strong> &gt; <strong>Terminal<\/strong> nel menu di Visual Studio Code per accedere al <a href=\"https:\/\/code.visualstudio.com\/docs\/terminal\/basics\" target=\"_blank\" rel=\"noopener noreferrer\">terminale integrato<\/a> dell&#8217;editor. Eseguiamo questo comando:<\/p>\n<pre><code class=\"language-bash\">npx tsc --init<\/code><\/pre>\n<p>Questo comando inizializza un file di configurazione TypeScript chiamato <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>tsconfig.json<\/strong><\/a> nella directory del progetto.<\/p>\n<p>Il file <strong>tsconfig.json<\/strong> 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\u00e0 in grado di compilare il progetto Typescript come vorremmo.<\/p>\n<p>Apriamo <strong>tsconfig.json<\/strong> in Visual Studio Code e noteremo che contiene un commento per ogni opzione di configurazione disponibile. Vogliamo che il nostro file <strong>tsconfig.json<\/strong> includa queste opzioni:<\/p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"module\": \"commonjs\",\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"sourceMap\": true,\n    \"outDir\": \".\/build\"\n  }\n}<\/code><\/pre>\n<p>\u00c8 probabile che le uniche differenze che noteremo tra le opzioni precedenti siano l&#8217;abilitazione della source mapping per il JavaScript che genereremo e l&#8217;aggiunta di una directory di output:<\/p>\n<pre><code class=\"language-json\">    \"sourceMap\": true,\n    \"outDir\": \".\/build\"<\/code><\/pre>\n<p>Apportiamo queste modifiche al file <strong>tsconfig.json<\/strong>.<\/p>\n<p>La <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#sourceMap\" target=\"_blank\" rel=\"noopener noreferrer\">source mapping<\/a> \u00e8 richiesta dal compiler di Visual Studio Code.<\/p>\n<p>Il file <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#outDir\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>outDir<\/strong><\/a> definisce la posizione in cui il compiler colloca i file transpilati. Per impostazione predefinita, \u00e8 la cartella principale del progetto. Per evitare di riempire la cartella del progetto con i file di compilazione a ogni build, impostiamola su un&#8217;altra cartella, ad esempio <strong>build<\/strong>.<\/p>\n<p>Il progetto TypeScript \u00e8 quasi pronto per essere compilato. Ma prima \u00e8 necessario il codice TypeScript.<\/p>\n<p>Clicchiamo con il tasto destro del mouse sulla sezione <strong>Explorer<\/strong> e selezioniamo <strong>New File&#8230;<\/strong>. Digitiamo <code>index.ts<\/code> e premiamo <strong>Invio<\/strong>. Il progetto conterr\u00e0 un file TypeScript chiamato <strong>index.ts<\/strong>:<\/p>\n<figure id=\"attachment_175424\" aria-describedby=\"caption-attachment-175424\" style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/typescript-file-visual-studio-code.png\" alt=\"Schermata di Visual Studio Code che visualizza un file TypeScript vuoto.\" width=\"1919\" height=\"1035\"><figcaption id=\"caption-attachment-175424\" class=\"wp-caption-text\">Il file <strong>index.ts<\/strong> vuoto in Visual Studio Code.<\/figcaption><\/figure>\n<p>Iniziamo con il seguente codice TypeScript:<\/p>\n<pre><code class=\"language-typescript\">const message: string = \"Hello, World!\"\nconsole.log(message)\n<\/code><\/pre>\n<p>Questo frammento stampa semplicemente il noto messaggio <em>Hello, World!<\/em><\/p>\n<h2>Provare IntelliSense per il completamento del codice<\/h2>\n<p>Mentre scrivevate le righe qui sopra in Visual Studio Code, potreste aver notato alcuni suggerimenti di codice da parte dell&#8217;editor. Questo accade grazie a <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">IntelliSense<\/a>, una delle funzioni pi\u00f9 interessanti di Visual Studio Code.<\/p>\n<p>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\u00e0 e la precisione. Potete vederlo in azione qui:<\/p>\n<figure id=\"attachment_175426\" aria-describedby=\"caption-attachment-175426\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/intellisense-visual-studio-code.gif\" alt=\"Animazione che mostra la funzione IntelliSense di Visual Studio Code in azione.\" width=\"800\" height=\"503\"><figcaption id=\"caption-attachment-175426\" class=\"wp-caption-text\">Il riconoscimento del codice IntelliSense di Visual Studio Code in azione.<\/figcaption><\/figure>\n<p>Tenete presente che Visual Studio Code viene fornito con il supporto di IntelliSense per i progetti TypeScript. Non \u00e8 necessario configurarlo manualmente.<\/p>\n<p>Ora che sappiamo come scrivere TypeScript come dei professionisti in Visual Studio Code, compiliamolo e vediamo se funziona.<\/p>\n<h2>Compilazione di TypeScript in Visual Studio Code<\/h2>\n<p>Apriamo il terminale integrato in Visual Studio Code ed eseguiamo:<\/p>\n<pre><code class=\"language-bash\">tsc -p .<\/code><\/pre>\n<p>Questa operazione trasporta tutti i file TypeScript del progetto in JavaScript. Il sito <code>-p .<\/code> indica al compiler di utilizzare il file <strong>tsconfig.json<\/strong> che si trova nella directory corrente. L&#8217;output &#8211; in questo caso <strong>index.js<\/strong> e la source map <strong>index.js.map<\/strong> &#8211; viene collocato nella directory <strong>.\/build<\/strong>.<\/p>\n<p>Possiamo confermare che il codice JavaScript transpilato funziona con questo comando nel terminale:<\/p>\n<pre><code class=\"language-bash\">node .\/build\/index.js<\/code><\/pre>\n<p>Node.js interpreter\u00e0 <strong>index.js<\/strong> e lo stamper\u00e0 nel terminale:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Un metodo alternativo per avviare il transpiler consiste nel selezionare <strong>Terminal<\/strong> &gt; <strong>Run Build Task\u2026<\/strong>. nel menu di Visual Studio Code e cliccare sull&#8217;opzione <strong>tsc: build &#8211; tsconfig.json<\/strong>.<\/p>\n<figure id=\"attachment_175428\" aria-describedby=\"caption-attachment-175428\" style=\"width: 909px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/transpiling-visual-studio-code.png\" alt=\"Schermata della voce di menu di Visual Studio Code per l'avvio del processo di build.\" width=\"909\" height=\"136\"><figcaption id=\"caption-attachment-175428\" class=\"wp-caption-text\">Avviare il processo di build utilizzando i menu di Visual Studio Code.<\/figcaption><\/figure>\n<p>Questa operazione esegue <code>tsc -p .<\/code> dietro le quinte e costruisce il codice direttamente nell&#8217;editor.<\/p>\n<p>Ecco come compilare un progetto TypeScript in Visual Studio Code. Ora resta solo da capire come lanciare ed eseguire il debug del tuo codice.<\/p>\n<h2>Lanciare ed eseguire il debug di TypeScript in Visual Studio Code<\/h2>\n<p>Visual Studio Code supporta il debug di TypeScript grazie al <a href=\"https:\/\/code.visualstudio.com\/docs\/nodejs\/nodejs-debugging\" target=\"_blank\" rel=\"noopener noreferrer\">debugger Node.js<\/a> integrato. Ma prima di poterlo utilizzare, dobbiamo configurarlo. Clicchiamo sull&#8217;icona <strong>Run and Debug<\/strong> nella barra laterale, clicchiamo su <strong>Create a launch.json file<\/strong> e selezioniamo <strong>Node.js<\/strong>.<\/p>\n<figure id=\"attachment_175430\" aria-describedby=\"caption-attachment-175430\" style=\"width: 1367px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/node-debugger-visual-studio-code.png\" alt=\"Schermata che mostra la selezione del debugger Node.js.\" width=\"1367\" height=\"471\"><figcaption id=\"caption-attachment-175430\" class=\"wp-caption-text\">Selezione del debugger Node.js per la configurazione del <strong>file launch.json<\/strong>.<\/figcaption><\/figure>\n<p>In questo modo viene creato un file <strong>launch.json<\/strong> 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&#8217;applicazione. Questo file di configurazione specifica come lanciare l&#8217;applicazione, gli argomenti della riga di comando da utilizzare e le variabili d&#8217;ambiente da impostare.<\/p>\n<p>Come possiamo vedere nella sezione <strong>Explorer<\/strong>, <strong>launch.json si trova nella cartella .vscode di un progetto<\/strong>.<\/p>\n<p>Apriamo questo file e modifichiamolo come segue:<\/p>\n<pre><code class=\"language-json\">{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"type\": \"node\",\n            \"request\": \"launch\",\n            \"name\": \"Launch Program\",\n            \"skipFiles\": [\n                \"node_modules\/**\"\n            ],\n            \"program\": \"${workspaceFolder}\/index.ts\",\n            \"preLaunchTask\": \"tsc: build - tsconfig.json\",\n            \"outFiles\": [\"${workspaceFolder}\/build\/**\/*.js\"]\n        }\n    ]\n}<\/code><\/pre>\n<p>Regoliamo le opzioni <code>program<\/code>, <code>preLaunchTask<\/code> e <code>outFiles<\/code>, considerando che:<\/p>\n<ul>\n<li><code>program<\/code>: specifica il percorso del punto di ingresso dell&#8217;applicazione da debuggare. In TypeScript, dovrebbe contenere il file principale da eseguire all&#8217;avvio dell&#8217;applicazione.<\/li>\n<li><code>preLaunchTask<\/code>: definisce il nome dell&#8217;attivit\u00e0 di compilazione di Visual Studio Code da eseguire prima di lanciare l&#8217;applicazione. In un progetto TypeScript, dovrebbe essere l&#8217;attivit\u00e0 di compilazione.<\/li>\n<li><code>outFiles<\/code>: contiene il percorso dei file JavaScript transpilati generati dal processo di build. I file source map generati da tsc grazie alla configurazione di <code>\"sourceMap\": true<\/code> vengono utilizzati dal debugger per mappare il codice sorgente TypeScript nel codice JavaScript generato. Questo ci permette di eseguire il debug del codice TypeScript direttamente.<\/li>\n<\/ul>\n<p>Salviamo il file <strong>launch.json<\/strong> e apriamo <strong>index.ts<\/strong>. Clicchiamo sullo spazio vuoto prima della riga <code>console.log()<\/code> per impostare un punto di interruzione. Accanto alla riga appare un punto rosso, come questo:<\/p>\n<figure id=\"attachment_175431\" aria-describedby=\"caption-attachment-175431\" style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-breakpoint-visual-studio-code.png\" alt=\"Schermata che mostra l'aggiunta di un breakpoint di debug.\" width=\"1366\" height=\"261\"><figcaption id=\"caption-attachment-175431\" class=\"wp-caption-text\">Il punto rosso indica un punto di interruzione del debug.<\/figcaption><\/figure>\n<p>Quando eseguiamo il codice con il compiler, l&#8217;esecuzione si ferma l\u00ec. Grazie a questo punto di interruzione, possiamo verificare che il debugger di Node.js in Visual Studio Code funzioni come previsto.<\/p>\n<p>Visitiamo nuovamente la sezione <strong>Run and Debug<\/strong> e clicchiamo sul pulsante verde play per eseguire il debugger. Attendiamo l&#8217;esecuzione di <code>preLaunchTask<\/code>. Dopo la compilazione del codice, il programma viene lanciato e l&#8217;esecuzione si ferma al punto di interruzione impostato in precedenza.<\/p>\n<figure id=\"attachment_175433\" aria-describedby=\"caption-attachment-175433\" style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-running-visual-studio-code.png\" alt=\"Schermata che mostra il debugger di Visual Studio Code in azione.\" width=\"1919\" height=\"1035\"><figcaption id=\"caption-attachment-175433\" class=\"wp-caption-text\">Il debugger di Visual Studio Code in azione.<\/figcaption><\/figure>\n<p>Nell&#8217;immagine qui sopra, a sinistra, possiamo vedere i valori delle variabili al momento dell&#8217;interruzione. Possiamo anche mettere in pausa, passare oltre, entrare\/uscire, riavviare e interrompere, come descritto nella <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione sul debug<\/a> di Visual Studio Code.<\/p>\n<p>Premiamo <strong>F5<\/strong> per riprendere l&#8217;esecuzione e vedremo il seguente messaggio nella scheda <strong>Debug Console<\/strong>:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Questo \u00e8 ci\u00f2 che ci si aspetta dall&#8217;applicazione e significa che il programma \u00e8 stato eseguito correttamente.<\/p>\n<p>Abbiamo appena imparato come impostare Visual Studio Code per la programmazione in TypeScript. Il tutorial potrebbe finire qui, ma c&#8217;\u00e8 un&#8217;altra cosa importante da imparare: come configurare un&#8217;estensione in Visual Studio Code che pu\u00f2 rendere ancora pi\u00f9 facile scrivere codice di qualit\u00e0 in TypeScript.<\/p>\n<h2>Come configurare ESLint in Visual Studio Code<\/h2>\n<p>Possiamo estendere il nucleo di Visual Studio Code utilizzando le <a href=\"https:\/\/kinsta.com\/it\/blog\/estensioni-vscode\/\">estensioni<\/a>. Queste forniscono caratteristiche e funzionalit\u00e0 aggiuntive per l&#8217;editor di codice.<\/p>\n<p>Una delle estensioni di Visual Studio Code pi\u00f9 popolari per lo sviluppo di TypeScript \u00e8 l&#8217;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\" rel=\"noopener noreferrer\">estensione ESLint<\/a>.<\/p>\n<p><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> \u00e8 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\u00f9 comuni e ad applicare gli standard di codifica. L&#8217;estensione esegue ESLint direttamente nell&#8217;editor.<\/p>\n<p>Integriamo ESLint in Visual Studio Code nel nostro progetto TypeScript.<\/p>\n<p>Per prima cosa, inizializziamo ESLint nel progetto con questo comando da terminale:<\/p>\n<pre><code class=\"language-bash\">npm init @eslint\/config<\/code><\/pre>\n<p>Durante il processo di configurazione, ci verranno poste alcune domande per aiutarci a generare il file di configurazione di ESLint. Possiamo rispondere come segue:<\/p>\n<pre><code class=\"language-bash\">\u221a How would you like to use ESLint? \u00b7 style\n\u221a What type of modules does your project use? \u00b7 commonjs\n\u221a Which framework does your project use? \u00b7 none\n\u221a Does your project use TypeScript? \u00b7 Yes\n\u221a Where does your code run? \u00b7 browser\n\u221a How would you like to define a style for your project? \u00b7 guide\n\u221a Which style guide do you want to follow? \u00b7 standard-with-typescript\n\u221a What format do you want your config file to be in? \u00b7 JSON<\/code><\/pre>\n<p>Il programma di installazione controller\u00e0 le dipendenze e ci chieder\u00e0 se vogliamo installare i pacchetti mancanti. Possiamo rispondere in questo modo:<\/p>\n<pre><code class=\"language-bash\">\u221a Would you like to install them now? \u00b7 Yes\n\u221a Which package manager do you want to use? \u00b7 npm<\/code><\/pre>\n<p>Alla fine del processo, troveremo un nuovo file <strong>.eslintrc.json<\/strong> contenente il seguente codice iniziale:<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\"\n    },\n    \"rules\": {\n    }\n}<\/code><\/pre>\n<p>Il file . <strong>eslintrc.json<\/strong> contiene le impostazioni utilizzate da ESLint per applicare specifici standard di codice, stile e qualit\u00e0. Ecco come pu\u00f2 apparire un <strong>.eslintrc.json<\/strong> di base per un progetto Node.js TypeScript:<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true,\n        \/\/ enable node support\n        \"node\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\",\n        \"project\": \"tsconfig.json\"\n    },\n    \"rules\": {\n        \/\/ force the code to be indented with 2 spaces\n        \"indent\": [\"error\", 2],\n        \/\/ mark extra spaces as errors\n        \"no-multi-spaces\": [\"error\"]\n    }\n}<\/code><\/pre>\n<p>Ora \u00e8 il momento di installare l&#8217;estensione ESLint in Visual Studio Code. Clicchiamo sull&#8217;icona <strong>Estensioni<\/strong> nel menu a sinistra e digitiamo <code>ESLint<\/code>. Individuiamo l&#8217;estensione ESLint e clicchiamo su <strong>Installa<\/strong>.<\/p>\n<figure id=\"attachment_175434\" aria-describedby=\"caption-attachment-175434\" style=\"width: 1642px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-installation-visual-studio-code.png\" alt=\"Schermata che mostra ESLint nel marketplace delle estensioni di Visual Studio Code.\" width=\"1642\" height=\"724\"><figcaption id=\"caption-attachment-175434\" class=\"wp-caption-text\">Installazione dell&#8217;estensione ESLint in Visual Studio Code.<\/figcaption><\/figure>\n<p>Per abilitare l&#8217;estensione ESLint a ispezionare automaticamente i nostri file TypeScript a ogni salvataggio, creiamo un file <strong>settings.json<\/strong> all&#8217;interno di <strong>.vscode<\/strong> con il seguente contenuto:<\/p>\n<pre><code class=\"language-json\">{\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll.eslint\": true\n      },\n      \"eslint.validate\": [\n        \"typescript\"\n      ],\n      \"eslint.codeActionsOnSave.rules\": null\n}<\/code><\/pre>\n<p>Il file <strong>settings.json<\/strong> contiene la configurazione utilizzata da Visual Studio Code per personalizzare il comportamento dell&#8217;editor e delle sue estensioni.<\/p>\n<p>Riavviamo Visual Studio Code per far s\u00ec che l&#8217;editor carichi le nuove estensioni e configurazioni.<\/p>\n<p>Se apriamo <strong>index.ts<\/strong> e modifichiamo il codice, vedremo nuovi errori segnalati dall&#8217;IDE. Per gli errori di stile del codice, salviamo il file ed ESLint riformatter\u00e0 automaticamente il codice come definito in <strong>.eslintrc.json<\/strong>.<\/p>\n<figure id=\"attachment_175435\" aria-describedby=\"caption-attachment-175435\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-running-visual-studio-code.gif\" alt=\"Un'animazione che mostra ESLint in esecuzione in Visual Studio Code.\" width=\"600\" height=\"301\"><figcaption id=\"caption-attachment-175435\" class=\"wp-caption-text\">ESLint in azione all&#8217;interno di Visual Studio Code.<\/figcaption><\/figure>\n<p>Ora nulla potr\u00e0 impedirci di scrivere codice di qualit\u00e0! Non ci resta che distribuire la nostra applicazione Node.js in un moderno servizio di cloud hosting come quello di Kinsta.<\/p>\n<h2>Riepilogo<\/h2>\n<p>La configurazione di Visual Studio Code per lo sviluppo in TypeScript \u00e8 abbastanza semplice: abbiamo appena imparato a creare un progetto Node.js in TypeScript, a caricarlo in Visual Studio Code e a utilizzare l&#8217;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.<\/p>\n<p>Se volete portare lo sviluppo delle vostre applicazioni web a un livello superiore, date un&#8217;occhiata ai servizi di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni Web<\/a> e <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Hosting di Database Gestito<\/a> di Kinsta. Kinsta offre una serie di soluzioni di hosting ottimizzate per la velocit\u00e0, la sicurezza e la scalabilit\u00e0, fornendo un ambiente ideale per la creazione e la distribuzione di applicazioni ad alte prestazioni.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code \u00e8 un ambiente di sviluppo integrato (IDE) particolarmente amato da molti programmatori che ne apprezzano l&#8217;ampia gamma di funzioni e il suo patrimonio &#8230;<\/p>\n","protected":false},"author":305,"featured_media":77070,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25945,25883],"class_list":["post-77069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-linguaggi-sviluppo-web","topic-strumenti-di-sviluppo-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Ecco come rendere operativi i progetti TypeScript con l&#039;ambiente di sviluppo integrato Visual Studio Code di Microsoft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Ecco come rendere operativi i progetti TypeScript con l&#039;ambiente di sviluppo integrato Visual Studio Code di Microsoft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T09:25:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T08:38:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ecco come rendere operativi i progetti TypeScript con l&#039;ambiente di sviluppo integrato Visual Studio Code di Microsoft.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\"},\"headline\":\"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code\",\"datePublished\":\"2024-03-18T09:25:44+00:00\",\"dateModified\":\"2024-03-27T08:38:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\"},\"wordCount\":2108,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\",\"name\":\"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\",\"datePublished\":\"2024-03-18T09:25:44+00:00\",\"dateModified\":\"2024-03-27T08:38:08+00:00\",\"description\":\"Ecco come rendere operativi i progetti TypeScript con l'ambiente di sviluppo integrato Visual Studio Code di Microsoft.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Strumenti di Sviluppo Web\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/antonellozanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code - Kinsta\u00ae","description":"Ecco come rendere operativi i progetti TypeScript con l'ambiente di sviluppo integrato Visual Studio Code di Microsoft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/","og_locale":"it_IT","og_type":"article","og_title":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code","og_description":"Ecco come rendere operativi i progetti TypeScript con l'ambiente di sviluppo integrato Visual Studio Code di Microsoft.","og_url":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-03-18T09:25:44+00:00","article_modified_time":"2024-03-27T08:38:08+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","type":"image\/png"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_description":"Ecco come rendere operativi i progetti TypeScript con l'ambiente di sviluppo integrato Visual Studio Code di Microsoft.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Antonello Zanini","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b"},"headline":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code","datePublished":"2024-03-18T09:25:44+00:00","dateModified":"2024-03-27T08:38:08+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/"},"wordCount":2108,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/","url":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/","name":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","datePublished":"2024-03-18T09:25:44+00:00","dateModified":"2024-03-27T08:38:08+00:00","description":"Ecco come rendere operativi i progetti TypeScript con l'ambiente di sviluppo integrato Visual Studio Code di Microsoft.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/typescript-visual-studio.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/typescript-visual-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Strumenti di Sviluppo Web","item":"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/"},{"@type":"ListItem","position":3,"name":"Sfruttare al meglio lo sviluppo di TypeScript in Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.","url":"https:\/\/kinsta.com\/it\/blog\/author\/antonellozanini\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77069"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77069\/revisions"}],"predecessor-version":[{"id":77153,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77069\/revisions\/77153"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77069\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77070"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77069"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}