{"id":74283,"date":"2024-03-18T10:25:13","date_gmt":"2024-03-18T09:25:13","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74283&#038;preview=true&#038;preview_id=74283"},"modified":"2024-03-27T09:48:51","modified_gmt":"2024-03-27T08:48:51","slug":"typescript-visual-studio","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/","title":{"rendered":"Domina el desarrollo TypeScript en Visual Studio Code"},"content":{"rendered":"<p>Visual Studio Code es un entorno de desarrollo integrado (IDE, integrated development environment) por el que se decantan muchos programadores, que aprecian su amplia gama de funciones y su herencia de c\u00f3digo abierto. Visual Studio Code hace que programar sea m\u00e1s f\u00e1cil, m\u00e1s r\u00e1pido y menos frustrante. Esto es especialmente cierto cuando se trata de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-typescript\/\">TypeScript<\/a>, uno de los m\u00faltiples lenguajes soportados por el IDE.<\/p>\n<p>Funciones como el completado de c\u00f3digo, las sugerencias de par\u00e1metros y el resaltado de sintaxis contribuyen en gran medida a que los desarrolladores de TypeScript sean m\u00e1s productivos en Visual Studio Code. Tambi\u00e9n incorpora un depurador de <a href=\"https:\/\/kinsta.com\/es\/secciones\/node-js\/\">Node.js<\/a> y la posibilidad de convertir el c\u00f3digo en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> ejecutable desde el editor. Sin embargo, la mayor\u00eda de estas funciones deben configurarse para un uso \u00f3ptimo.<\/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>C\u00f3mo configurar Visual Studio Code para el desarrollo de TypeScript<\/h2>\n<p>Este tutorial paso a paso muestra c\u00f3mo configurar Visual Studio Code para el desarrollo de TypeScript. Inicializamos un proyecto Node.js en TypeScript, escribimos algo de c\u00f3digo, y luego compilamos, ejecutamos y depuramos el TypeScript \u2014 todo en Visual Studio Code.<\/p>\n<h3>Requisitos previos<\/h3>\n<p>Antes de empezar, aseg\u00farate de que tienes<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> instalado y configurado localmente<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> descargado e instalado<\/li>\n<\/ul>\n<p>Necesitas Node.js y <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">npm<\/a> (el gestor de paquetes de Node) para construir tu proyecto TypeScript. Puedes verificar que <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">Node.js est\u00e1 instalado<\/a> en tu m\u00e1quina con el siguiente comando de terminal:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Que deber\u00eda devolver la versi\u00f3n de Node.js en tu m\u00e1quina de la siguiente manera:<\/p>\n<pre><code class=\"language-bash\">v21.6.1<\/code><\/pre>\n<p>\u00a1Ahora empecemos con TypeScript en Visual Studio Code!<\/p>\n<h3>Instala el compilador de TypeScript<\/h3>\n<p>Visual Studio Code soporta el desarrollo de TypeScript pero no incluye el compilador de TypeScript. Dado que el <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\">compilador de TypeScript<\/a>, tsc, transforma \u2014 o transpila \u2014 el c\u00f3digo TypeScript a JavaScript, es un requisito para probar tu c\u00f3digo TypeScript. En otras palabras, tsc toma c\u00f3digo TypeScript como entrada y produce c\u00f3digo JavaScript como salida, y luego puedes ejecutar el c\u00f3digo JavaScript con Node.js o en un navegador Web.<\/p>\n<p>Ejecuta el siguiente comando en tu terminal para instalar el compilador TypeScript globalmente en tu ordenador:<\/p>\n<pre><code class=\"language-bash\">npm install -g typescript<\/code><\/pre>\n<p>Verifica la versi\u00f3n instalada de tsc:<\/p>\n<pre><code class=\"language-bash\">tsc --version<\/code><\/pre>\n<p>Si este comando no devuelve un error, tsc est\u00e1 disponible. \u00a1Ya tienes todo lo que necesitas para crear un proyecto TypeScript!<\/p>\n<h2>Crear un proyecto TypeScript<\/h2>\n<p>Vamos a crear un sencillo proyecto TypeScript Node.js llamado <strong>hello-world<\/strong>. Abre tu terminal, y crea una carpeta para tu proyecto:<\/p>\n<pre><code class=\"language-bash\">mkdir hello-world\ncd hello-world<\/code><\/pre>\n<p>Dentro de <strong>hello-world<\/strong>, inicializa un proyecto con el siguiente comando npm:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Esto crea un archivo de configuraci\u00f3n <strong>package.json<\/strong> para tu proyecto Node.js. \u00a1Es hora de ver en qu\u00e9 consiste el proyecto en Visual Studio Code!<\/p>\n<p>Inicia Visual Studio Code y selecciona <strong>Archivo<\/strong> &gt; <strong>Abrir carpeta<\/strong>&#8230;<\/p>\n<p>En la ventana que aparece, selecciona la carpeta del proyecto <strong>hello-world<\/strong> y haz clic en <strong>Abrir<\/strong>. Tu proyecto deber\u00eda tener este aspecto:<\/p>\n<figure 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=\"Captura de pantalla de Visual Studio Code con un proyecto abierto.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">El proyecto Node.js TypeScript abierto en Visual Studio Code.<\/figcaption><\/figure>\n<p>Actualmente, el proyecto s\u00f3lo consta del archivo <strong>package.json<\/strong> inicializado por <code>npm init<\/code>.<\/p>\n<p>Selecciona <strong>Ver<\/strong> &gt; <strong>Terminal<\/strong> en el men\u00fa de Visual Studio Code para acceder al <a href=\"https:\/\/code.visualstudio.com\/docs\/terminal\/basics\" target=\"_blank\" rel=\"noopener noreferrer\">terminal integrado<\/a> del editor. All\u00ed, ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npx tsc --init<\/code><\/pre>\n<p>Esto inicializa un archivo de configuraci\u00f3n de TypeScript llamado <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>tsconfig.json<\/strong><\/a> en el directorio del proyecto.<\/p>\n<p>El archivo <strong>tsconfig.json<\/strong> te permite personalizar el comportamiento del compilador de TypeScript. En concreto, proporciona al compilador de TypeScript instrucciones para transpilar el c\u00f3digo TypeScript. Sin \u00e9l, tsc no podr\u00e1 compilar tu proyecto Typescript como te gustar\u00eda.<\/p>\n<p>Abre <strong>tsconfig.json<\/strong> en Visual Studio Code, y ver\u00e1s que contiene un comentario para cada opci\u00f3n de configuraci\u00f3n disponible. Queremos que nuestro archivo <strong>tsconfig.json<\/strong> incluya estas opciones:<\/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>Es probable que las \u00fanicas diferencias que veas entre las opciones anteriores sean la habilitaci\u00f3n de la asignaci\u00f3n de fuentes para el JavaScript que vas a generar y la adici\u00f3n de un directorio de salida:<\/p>\n<pre><code class=\"language-json\">    \"sourceMap\": true,\n    \"outDir\": \".\/build\"<\/code><\/pre>\n<p>Realiza esos cambios en tu archivo <strong>tsconfig.json<\/strong>.<\/p>\n<p>El <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#sourceMap\">mapeo de c\u00f3digo fuente<\/a>\u00a0es necesario para el compilador Visual Studio Code.<\/p>\n<p>La configuraci\u00f3n <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#outDir\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>outDir<\/strong><\/a> define d\u00f3nde coloca el compilador los archivos transpilados. Por defecto, es la carpeta ra\u00edz del proyecto. Para evitar llenar la carpeta del proyecto con archivos de construcci\u00f3n en cada compilaci\u00f3n, establ\u00e9cela en otra carpeta, como <strong>build<\/strong>.<\/p>\n<p>Tu proyecto TypeScript est\u00e1 casi listo para ser compilado. Pero primero, necesitas c\u00f3digo TypeScript.<\/p>\n<p>Haz clic con el bot\u00f3n derecho del rat\u00f3n en la secci\u00f3n <strong>Explorador<\/strong> y selecciona <strong>Nuevo archivo<\/strong>&#8230; Escribe <code>index.ts<\/code> y pulsa <strong>Intro<\/strong>. Tu proyecto contendr\u00e1 ahora un archivo TypeScript llamado <strong>index.ts<\/strong>:<\/p>\n<figure 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=\"Captura de pantalla de Visual Studio Code mostrando un archivo TypeScript vac\u00edo.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">El archivo <strong>index.ts<\/strong> en blanco en Visual Studio Code.<\/figcaption><\/figure>\n<p>Empecemos con el siguiente c\u00f3digo TypeScript:<\/p>\n<pre><code class=\"language-typescript\">const message: string = \"Hello, World!\"\nconsole.log(message)\n<\/code><\/pre>\n<p>Este fragmento simplemente imprime el conocido mensaje <em>\u00a1Hello, World!<\/em><\/p>\n<h2>Prueba IntelliSense para completar el c\u00f3digo<\/h2>\n<p>Cuando escrib\u00edas las l\u00edneas anteriores en Visual Studio Code, puede que hayas notado algunas sugerencias de c\u00f3digo hechas por el editor. Esto ocurre gracias a <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">IntelliSense<\/a>, una de las geniales funciones de Visual Studio Code.<\/p>\n<p>IntelliSense incluye funciones como completado de c\u00f3digo, informaci\u00f3n de documentos e informaci\u00f3n de par\u00e1metros en las funciones. IntelliSense sugiere autom\u00e1ticamente c\u00f3mo completar el c\u00f3digo mientras escribes, lo que puede mejorar significativamente tu productividad y precisi\u00f3n. Puedes verlo en acci\u00f3n aqu\u00ed:<\/p>\n<figure 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=\"Animaci\u00f3n que muestra la funci\u00f3n IntelliSense de Visual Studio Code en acci\u00f3n.\" width=\"800\" height=\"503\"><figcaption class=\"wp-caption-text\">El reconocimiento de c\u00f3digo IntelliSense de Visual Studio Code en acci\u00f3n.<\/figcaption><\/figure>\n<p>Ten en cuenta que Visual Studio Code viene de f\u00e1brica con soporte IntelliSense para proyectos TypeScript. No tienes que configurarlo manualmente.<\/p>\n<p>Ahora que sabes c\u00f3mo escribir TypeScript como un profesional en Visual Studio Code, vamos a compilarlo y ver si funciona.<\/p>\n<h2>Compilar TypeScript en Visual Studio Code<\/h2>\n<p>Abre el terminal integrado en Visual Studio Code y ejecuta<\/p>\n<pre><code class=\"language-bash\">tsc -p .<\/code><\/pre>\n<p>Esto transpila todos los archivos TypeScript del proyecto a JavaScript. El <code>-p .<\/code> indica al compilador que utilice el archivo <strong>tsconfig.json<\/strong> situado en el directorio actual. El resultado \u2014 en este caso, <strong>index.js<\/strong> y el mapa fuente <strong>index.js.map<\/strong> \u2014 se colocan en el directorio <strong>.\/build<\/strong>.<\/p>\n<p>Puedes confirmar que el c\u00f3digo JavaScript transpilado funciona con este comando en el terminal:<\/p>\n<pre><code class=\"language-bash\">node .\/build\/index.js<\/code><\/pre>\n<p>Node.js interpretar\u00e1 <strong>index.js<\/strong> e imprimir\u00e1 en el terminal:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Un m\u00e9todo alternativo para iniciar el transpilador es seleccionar <strong>Terminal<\/strong> &gt; <strong>Ejecutar tarea de compilaci\u00f3n<\/strong>&#8230; en el men\u00fa C\u00f3digo de Visual Studio y hacer clic en la opci\u00f3n <strong>tsc: build &#8211; tsconfig.json<\/strong>.<\/p>\n<figure 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=\"Captura de pantalla de la entrada del men\u00fa C\u00f3digo de Visual Studio para iniciar el proceso de construcci\u00f3n.\" width=\"909\" height=\"136\"><figcaption class=\"wp-caption-text\">Iniciar el proceso de construcci\u00f3n utilizando los men\u00fas de Visual Studio Code.<\/figcaption><\/figure>\n<p>Esta operaci\u00f3n ejecuta <code>tsc -p .<\/code> en segundo plano y construye tu c\u00f3digo directamente en el editor.<\/p>\n<p>Y as\u00ed es como se compila tu proyecto TypeScript en Visual Studio Code. Ahora s\u00f3lo tienes que averiguar c\u00f3mo ejecutar y depurar tu c\u00f3digo.<\/p>\n<h2>Ejecutar y depurar TypeScript en Visual Studio Code<\/h2>\n<p>Visual Studio Code soporta la depuraci\u00f3n de TypeScript gracias a su <a href=\"https:\/\/code.visualstudio.com\/docs\/nodejs\/nodejs-debugging\" target=\"_blank\" rel=\"noopener noreferrer\">depurador Node.js<\/a> incorporado. Pero antes de poder utilizarlo, tienes que configurarlo. Haz clic en el icono <strong>Ejecutar y Depurar<\/strong> de la barra lateral, haz clic en <strong>Crear un archivo launch.json<\/strong> y selecciona <strong>Node.js<\/strong>.<\/p>\n<figure 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=\"Captura de pantalla que muestra la selecci\u00f3n del depurador de Node.js.\" width=\"1367\" height=\"471\"><figcaption class=\"wp-caption-text\">Seleccionando el depurador Node.js para la configuraci\u00f3n de <strong>launch.json<\/strong>.<\/figcaption><\/figure>\n<p>Esto crea un archivo <strong>launch.json<\/strong> de Node.js por defecto, que es el archivo de configuraci\u00f3n que el depurador de Visual Studio Code utiliza para lanzar y depurar una aplicaci\u00f3n. Este archivo de configuraci\u00f3n especifica c\u00f3mo lanzar la aplicaci\u00f3n, los argumentos de la l\u00ednea de comandos a utilizar y las variables de entorno a establecer.<\/p>\n<p>Como puedes ver en la secci\u00f3n <strong>Explorador<\/strong>, <strong>launch.json se encuentra en la carpeta <strong>.vscode<\/strong> de un proyecto.<\/strong><\/p>\n<p>Abre ese archivo y ed\u00edtalo como se indica a continuaci\u00f3n:<\/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>Ajusta las opciones <code>program<\/code>, <code>preLaunchTask<\/code>, y <code>outFiles<\/code>, teniendo en cuenta que:<\/p>\n<ul>\n<li><code>program<\/code>: Especifica la ruta al punto de entrada de la aplicaci\u00f3n a depurar. En TypeScript, debe contener el archivo principal a ejecutar al lanzar la aplicaci\u00f3n.<\/li>\n<li><code>preLaunchTask<\/code>: Define el nombre de la tarea de construcci\u00f3n de Visual Studio Code que se ejecutar\u00e1 antes de lanzar la aplicaci\u00f3n. En un proyecto TypeScript, debe ser la tarea de construcci\u00f3n.<\/li>\n<li><code>outFiles<\/code>: Contiene la ruta a los archivos JavaScript transpilados generados por el proceso de construcci\u00f3n. Los archivos de mapa de c\u00f3digo fuente generados por tsc gracias a la configuraci\u00f3n de <code>\"sourceMap\": true<\/code> son utilizados por el depurador para mapear el c\u00f3digo fuente TypeScript con el c\u00f3digo JavaScript generado. Esto te permite depurar directamente el c\u00f3digo TypeScript.<\/li>\n<\/ul>\n<p>Guarda el archivo <strong>launch.json<\/strong> y abre <strong>index.ts<\/strong>. Haz clic en el espacio en blanco antes de la l\u00ednea <code>console.log()<\/code> para establecer un punto de interrupci\u00f3n. Aparecer\u00e1 un punto rojo junto a la l\u00ednea, algo parecido a esto:<\/p>\n<figure 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=\"Captura de pantalla que muestra la adici\u00f3n de un punto de interrupci\u00f3n de depuraci\u00f3n.\" width=\"1366\" height=\"261\"><figcaption class=\"wp-caption-text\">El punto rojo marca un punto de interrupci\u00f3n de depuraci\u00f3n.<\/figcaption><\/figure>\n<p>Cuando ejecutes el c\u00f3digo con el compilador, la ejecuci\u00f3n se detendr\u00e1 ah\u00ed. Gracias a este punto de interrupci\u00f3n, puedes verificar que el depurador de Node.js en Visual Studio Code funciona como se espera.<\/p>\n<p>Visita de nuevo la secci\u00f3n <strong>Ejecutar y Depurar<\/strong> y haz clic en el bot\u00f3n verde de reproducci\u00f3n para ejecutar el depurador. Espera a que se ejecute <code>preLaunchTask<\/code>. Una vez compilado el c\u00f3digo, el programa se inicia y la ejecuci\u00f3n se detiene en el punto de interrupci\u00f3n establecido anteriormente.<\/p>\n<figure 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=\"Captura de pantalla que muestra el depurador de c\u00f3digo de Visual Studio en acci\u00f3n.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">El depurador de c\u00f3digo de Visual Studio en acci\u00f3n.<\/figcaption><\/figure>\n<p>A la izquierda de la imagen anterior, puedes ver los valores de las variables en el momento de la pausa. Tambi\u00e9n puedes pausar, avanzar paso a paso, entrar\/salir, reiniciar y detener, como se describe en la <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\">documentaci\u00f3n de depuraci\u00f3n<\/a> de Visual Studio Code.<\/p>\n<p>Pulsa <strong>F5<\/strong> para reanudar la ejecuci\u00f3n, y deber\u00edas ver el siguiente mensaje en la pesta\u00f1a <strong>Consola de Depuraci\u00f3n<\/strong>:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Esto es lo que esperas que produzca la aplicaci\u00f3n, y significa que el programa se ha ejecutado correctamente.<\/p>\n<p>Acabas de aprender a configurar Visual Studio Code para la programaci\u00f3n TypeScript. El tutorial podr\u00eda terminar aqu\u00ed, pero hay una cosa m\u00e1s importante que aprender: c\u00f3mo configurar una extensi\u00f3n en Visual Studio Code que puede hacer que escribir c\u00f3digo de calidad en TypeScript sea a\u00fan m\u00e1s f\u00e1cil.<\/p>\n<h2>C\u00f3mo configurar ESLint en Visual Studio Code<\/h2>\n<p>Puedes ampliar el core de Visual Studio Code utilizando <a href=\"https:\/\/kinsta.com\/es\/blog\/extensiones-vscode\/\">extensiones<\/a>. \u00c9stas proporcionan caracter\u00edsticas y funcionalidades adicionales para el editor de c\u00f3digo.<\/p>\n<p>Una de las extensiones m\u00e1s populares de Visual Studio Code para el desarrollo de TypeScript es la <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\">extensi\u00f3n ESLint<\/a>.<\/p>\n<p><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> es una popular herramienta de an\u00e1lisis est\u00e1tico de c\u00f3digo para JavaScript y TypeScript que ayuda a los desarrolladores a identificar y corregir errores comunes de programaci\u00f3n y a hacer cumplir las normas de programaci\u00f3n. La extensi\u00f3n ejecuta ESLint directamente dentro del editor.<\/p>\n<p>Vamos a integrar ESLint en Visual Studio Code en tu proyecto TypeScript.<\/p>\n<p>Primero, inicializa ESLint en tu proyecto con este comando de terminal:<\/p>\n<pre><code class=\"language-bash\">npm init @eslint\/config<\/code><\/pre>\n<p>Durante el proceso de configuraci\u00f3n, se te har\u00e1n algunas preguntas para ayudarte a generar el archivo de configuraci\u00f3n de ESLint. Puedes responder como se indica a continuaci\u00f3n:<\/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>El instalador comprobar\u00e1 las dependencias y te preguntar\u00e1 si quieres instalar alg\u00fan paquete que falte. Puedes responder as\u00ed:<\/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>Al final del proceso, encontrar\u00e1s un nuevo archivo <strong>.eslintrc.json<\/strong> que contiene el siguiente c\u00f3digo inicial:<\/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>El archivo <strong>.eslintrc.json<\/strong> contiene la configuraci\u00f3n utilizada por ESLint para aplicar normas espec\u00edficas de c\u00f3digo, estilo y calidad. Este es el aspecto que puede tener un archivo <strong>.eslintrc.json<\/strong> b\u00e1sico para un proyecto 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>Ahora es el momento de instalar la extensi\u00f3n ESLint en Visual Studio Code. Haz clic en el icono <strong>Extensiones<\/strong> del men\u00fa de la izquierda y escribe <code>ESLint<\/code>. Busca la extensi\u00f3n ESLint y haz clic en <strong>Instalar<\/strong>.<\/p>\n<figure 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=\"Captura de pantalla que muestra ESLint en el mercado de extensiones de Visual Studio Code.\" width=\"1642\" height=\"724\"><figcaption class=\"wp-caption-text\">Instalaci\u00f3n de la extensi\u00f3n ESLint en Visual Studio Code.<\/figcaption><\/figure>\n<p>Para que la extensi\u00f3n ESLint inspeccione autom\u00e1ticamente tus archivos TypeScript en cada guardado, crea un archivo <strong>settings.json<\/strong> dentro de <strong>.vscode<\/strong> con el siguiente contenido:<\/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>El archivo <strong>settings.json<\/strong> contiene la configuraci\u00f3n utilizada por Visual Studio Code para personalizar el comportamiento del editor y sus extensiones.<\/p>\n<p>Reinicia Visual Studio Code para que el editor cargue la nueva extensi\u00f3n y configuraciones.<\/p>\n<p>Si abres <strong>index.ts<\/strong> y editas el c\u00f3digo, ver\u00e1s nuevos errores informados por el IDE. Para los errores de estilo de c\u00f3digo, guarda el archivo, y ESLint reformatear\u00e1 autom\u00e1ticamente el c\u00f3digo seg\u00fan lo definido en <strong>.eslintrc.json<\/strong>.<\/p>\n<figure 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=\"Una animaci\u00f3n que muestra la ejecuci\u00f3n de ESLint en Visual Studio Code.\" width=\"600\" height=\"301\"><figcaption class=\"wp-caption-text\">ESLint en acci\u00f3n dentro de Visual Studio Code.<\/figcaption><\/figure>\n<p>Ahora, \u00a1nada puede impedirte escribir c\u00f3digo de calidad! Todo lo que queda es desplegar tu aplicaci\u00f3n Node.js en un servicio moderno de alojamiento en la nube como el de Kinsta.<\/p>\n<h2>Resumen<\/h2>\n<p>Por tanto, configurar Visual Studio Code para el desarrollo en TypeScript es bastante sencillo: acabas de aprender a crear un proyecto Node.js en TypeScript, cargarlo en Visual Studio Code y utilizar el IDE para escribir c\u00f3digo asistido por IntelliSense. Tambi\u00e9n has configurado el compilador de TypeScript, has configurado el compilador de Node.js para depurar c\u00f3digo TypeScript, y has integrado ESLint en el proyecto.<\/p>\n<p>Si quieres llevar el desarrollo de tu aplicaci\u00f3n web al siguiente nivel, explora los servicios de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones Web<\/a> y <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Alojamiento de Bases de Datos Administradas<\/a> de Kinsta. Kinsta ofrece una gama de soluciones de alojamiento optimizadas para la velocidad, la seguridad y la escalabilidad, proporcionando un gran entorno para construir y desplegar aplicaciones de alto rendimiento.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code es un entorno de desarrollo integrado (IDE, integrated development environment) por el que se decantan muchos programadores, que aprecian su amplia gama de &#8230;<\/p>\n","protected":false},"author":305,"featured_media":74284,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1337,1336],"class_list":["post-74283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-herramientas-de-desarrollo-web","topic-lenguajes-desarrollo-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>Domina el desarrollo TypeScript en Visual Studio Code - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de 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\/es\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Domina el desarrollo TypeScript en Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T09:25:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T08:48:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\"},\"headline\":\"Domina el desarrollo TypeScript en Visual Studio Code\",\"datePublished\":\"2024-03-18T09:25:13+00:00\",\"dateModified\":\"2024-03-27T08:48:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\"},\"wordCount\":2345,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\",\"name\":\"Domina el desarrollo TypeScript en Visual Studio Code - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png\",\"datePublished\":\"2024-03-18T09:25:13+00:00\",\"dateModified\":\"2024-03-27T08:48:51+00:00\",\"description\":\"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Domina el desarrollo TypeScript en Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/antonellozanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domina el desarrollo TypeScript en Visual Studio Code - Kinsta\u00ae","description":"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de 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\/es\/blog\/typescript-visual-studio\/","og_locale":"es_ES","og_type":"article","og_title":"Domina el desarrollo TypeScript en Visual Studio Code","og_description":"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.","og_url":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-03-18T09:25:13+00:00","article_modified_time":"2024-03-27T08:48:51+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","type":"image\/png"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_description":"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Antonello Zanini","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b"},"headline":"Domina el desarrollo TypeScript en Visual Studio Code","datePublished":"2024-03-18T09:25:13+00:00","dateModified":"2024-03-27T08:48:51+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/"},"wordCount":2345,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/","url":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/","name":"Domina el desarrollo TypeScript en Visual Studio Code - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","datePublished":"2024-03-18T09:25:13+00:00","dateModified":"2024-03-27T08:48:51+00:00","description":"A continuaci\u00f3n te explicamos c\u00f3mo poner en marcha tus proyectos TypeScript con el entorno de desarrollo integrado Visual Studio Code de Microsoft.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/typescript-visual-studio.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/typescript-visual-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"Domina el desarrollo TypeScript en Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/antonellozanini\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=74283"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74283\/revisions"}],"predecessor-version":[{"id":74390,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74283\/revisions\/74390"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74283\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/74284"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=74283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=74283"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=74283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}