{"id":67699,"date":"2024-04-05T06:26:13","date_gmt":"2024-04-05T09:26:13","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=67699&#038;preview=true&#038;preview_id=67699"},"modified":"2024-04-08T05:27:02","modified_gmt":"2024-04-08T08:27:02","slug":"typescript-visual-studio","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/","title":{"rendered":"Domine o Desenvolvimento de TypeScript no Visual Studio Code"},"content":{"rendered":"<p>O Visual Studio Code \u00e9 um ambiente de desenvolvimento integrado (IDE) preferido por muitos programadores que apreciam sua ampla variedade de recursos e sua heran\u00e7a de c\u00f3digo aberto. O Visual Studio Code torna a codifica\u00e7\u00e3o mais f\u00e1cil, mais r\u00e1pida e menos frustrante. Isso \u00e9 especialmente verdadeiro quando se trata de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a>, uma das v\u00e1rias linguagens suportadas pelo IDE.<\/p>\n<p>Recursos como preenchimento autom\u00e1tico de c\u00f3digo, dicas de par\u00e2metros e realce de sintaxe ajudam muito a tornar os desenvolvedores de TypeScript mais produtivos no Visual Studio Code. Ele tamb\u00e9m vem com um depurador <a href=\"https:\/\/kinqsta.com\/pt\/topicos\/node-js\/\">Node.js<\/a> integrado e a capacidade de converter o c\u00f3digo em <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a> execut\u00e1vel a partir do editor. No entanto, a maioria desses recursos precisa ser configurada para que sejam usados da melhor forma poss\u00edvel.<\/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>Como configurar o Visual Studio Code para o desenvolvimento do TypeScript<\/h2>\n<p>Este tutorial passo a passo mostra como voc\u00ea pode configurar o Visual Studio Code para o desenvolvimento de TypeScript. Inicializamos um projeto Node.js em TypeScript, escrevemos algum c\u00f3digo e, em seguida, compilamos, executamos e depuramos o TypeScript \u2014 tudo no Visual Studio Code.<\/p>\n<h3>Pr\u00e9-requisitos<\/h3>\n<p>Antes de come\u00e7ar, certifique-se de que voc\u00ea tenha:<\/p>\n<ul>\n<li>O <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> instalado e configurado localmente<\/li>\n<li>O <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> instalado<\/li>\n<\/ul>\n<p>Voc\u00ea precisa do Node.js e do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a> (o gerenciador de pacotes do Node) para criar seu projeto TypeScript. Voc\u00ea pode verificar se o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js est\u00e1 instalado<\/a> em seu computador com o seguinte comando de terminal:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Isso deve retornar a vers\u00e3o do Node.js em seu computador assim:<\/p>\n<pre><code class=\"language-bash\">v21.6.1<\/code><\/pre>\n<p>Agora vamos come\u00e7ar a usar o TypeScript no Visual Studio Code!<\/p>\n<h3>Instale o compilador do TypeScript<\/h3>\n<p>O Visual Studio Code oferece suporte ao desenvolvimento em TypeScript, mas n\u00e3o inclui o compilador do TypeScript. Uma vez que o <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\" target=\"_blank\" rel=\"noopener noreferrer\">compilador TypeScript<\/a>, tsc, transforma \u2014 ou transpila \u2014 o c\u00f3digo TypeScript em JavaScript, ele \u00e9 um requisito para testar seu c\u00f3digo TypeScript. Em outras palavras, o tsc recebe c\u00f3digo TypeScript como entrada e produz c\u00f3digo JavaScript como sa\u00edda, e ent\u00e3o voc\u00ea pode executar o c\u00f3digo JavaScript com o Node.js ou em um navegador web.<\/p>\n<p>Execute o comando abaixo em seu terminal para instalar o compilador TypeScript globalmente em seu computador:<\/p>\n<pre><code class=\"language-bash\">npm install -g typescript<\/code><\/pre>\n<p>Verifique a vers\u00e3o instalada do tsc:<\/p>\n<pre><code class=\"language-bash\">tsc --version<\/code><\/pre>\n<p>Se esse comando n\u00e3o retornar um erro, o tsc est\u00e1 dispon\u00edvel. Agora voc\u00ea tem tudo que precisa para criar um projeto TypeScript!<\/p>\n<h2>Crie um projeto TypeScript<\/h2>\n<p>Vamos criar um projeto TypeScript simples com Node.js chamado <strong>hello-world<\/strong>. Abra o seu terminal e crie uma pasta para o seu projeto:<\/p>\n<pre><code class=\"language-bash\">mkdir hello-world\ncd hello-world<\/code><\/pre>\n<p>Dentro de <strong>hello-world<\/strong>, inicialize um projeto com o seguinte comando npm:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Isso cria um arquivo de configura\u00e7\u00e3o <strong>package.json<\/strong> para o seu projeto Node.js. \u00c9 hora de voc\u00ea ver em que consiste o projeto no Visual Studio Code!<\/p>\n<p>Inicie o Visual Studio Code e selecione <strong>File<\/strong> &gt; <strong>Open Folder&#8230;<\/strong><\/p>\n<p>Na janela que aparece, selecione a pasta do projeto <strong>hello-world<\/strong> e clique em <strong>Open<\/strong>. Seu projeto deve ter a seguinte apar\u00eancia:<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/open-typescript-project-visual-studio-code.png\" alt=\"O projeto TypeScript do Node.js aberto no Visual Studio Code.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">O projeto TypeScript do Node.js aberto no Visual Studio Code.<\/figcaption><\/figure>\n<p>Nesse momento, o projeto consiste apenas no arquivo <strong>package.json<\/strong> inicializado por <code>npm init<\/code>.<\/p>\n<p>Selecione <strong>View<\/strong>\u00a0&gt; <strong>Terminal<\/strong> no menu do Visual Studio Code para ter acesso ao <a href=\"https:\/\/code.visualstudio.com\/docs\/terminal\/basics\" target=\"_blank\" rel=\"noopener noreferrer\">terminal integrado<\/a> do editor. L\u00e1, execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npx tsc --init<\/code><\/pre>\n<p>Isso inicializa um arquivo de configura\u00e7\u00e3o do TypeScript chamado <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>tsconfig.json<\/strong><\/a> no diret\u00f3rio do projeto.<\/p>\n<p>O arquivo <strong>tsconfig.json<\/strong> permite que voc\u00ea personalize o comportamento do compilador do TypeScript. Especificamente, fornece ao compilador do TypeScript instru\u00e7\u00f5es para transpilar o c\u00f3digo do TypeScript. Sem ele, o tsc n\u00e3o conseguir\u00e1 compilar seu projeto Typescript como voc\u00ea gostaria.<\/p>\n<p>Abra o <strong>tsconfig.json<\/strong> no Visual Studio Code, e voc\u00ea perceber\u00e1 que ele cont\u00e9m um coment\u00e1rio para cada op\u00e7\u00e3o de configura\u00e7\u00e3o dispon\u00edvel. Queremos que nosso arquivo <strong>tsconfig.json<\/strong> inclua estas op\u00e7\u00f5es:<\/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>\u00c9 prov\u00e1vel que as \u00fanicas diferen\u00e7as que voc\u00ea ver\u00e1 entre as op\u00e7\u00f5es acima sejam a ativa\u00e7\u00e3o do mapeamento de fonte para o JavaScript que voc\u00ea ir\u00e1 gerar e a adi\u00e7\u00e3o de um diret\u00f3rio de sa\u00edda:<\/p>\n<pre><code class=\"language-json\">    \"sourceMap\": true,\n    \"outDir\": \".\/build\"<\/code><\/pre>\n<p>Fa\u00e7a essas altera\u00e7\u00f5es em seu arquivo <strong>tsconfig.json<\/strong>.<\/p>\n<p>O <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#sourceMap\" target=\"_blank\" rel=\"noopener noreferrer\">mapeamento de fonte<\/a> \u00e9 exigido pelo compilador do Visual Studio Code.<\/p>\n<p>A configura\u00e7\u00e3o do <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#outDir\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>outDir<\/strong><\/a> define onde o compilador coloca os arquivos transpilados. Por padr\u00e3o, essa \u00e9 a pasta raiz do projeto. Para evitar encher a pasta do projeto com arquivos de build a cada compila\u00e7\u00e3o, defina-a como outra pasta, por exemplo, <strong>build<\/strong>.<\/p>\n<p>Seu projeto TypeScript est\u00e1 quase pronto para ser compilado. Mas primeiro voc\u00ea precisa do c\u00f3digo TypeScript.<\/p>\n<p>Clique com o bot\u00e3o direito do mouse na se\u00e7\u00e3o <strong>Explorer<\/strong> e selecione <strong>New File&#8230;<\/strong>\u00a0Digite <code>index.ts<\/code> e aperte <strong>Enter<\/strong>. Seu projeto agora conter\u00e1 um arquivo TypeScript chamado <strong>index.ts<\/strong>:<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/typescript-file-visual-studio-code.png\" alt=\"O arquivo index.ts em branco no Visual Studio Code.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">O arquivo <strong>index.ts<\/strong> em branco no Visual Studio Code.<\/figcaption><\/figure>\n<p>Vamos come\u00e7ar com o seguinte c\u00f3digo TypeScript:<\/p>\n<pre><code class=\"language-typescript\">const message: string = \"Hello, World!\"\nconsole.log(message)\n<\/code><\/pre>\n<p>Este snippet simplesmente imprime a conhecida mensagem <em>Hello, World!<\/em><\/p>\n<h2>Experimente o IntelliSense para preenchimento autom\u00e1tico de c\u00f3digo<\/h2>\n<p>Quando voc\u00ea estava escrevendo as linhas acima no Visual Studio Code, deve ter notado algumas sugest\u00f5es de c\u00f3digo feitas pelo editor. Isso acontece por causa do <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">IntelliSense<\/a>, um dos recursos interessantes do Visual Studio Code.<\/p>\n<p>O IntelliSense inclui recursos como preenchimento autom\u00e1tico de c\u00f3digo, informa\u00e7\u00f5es de documentos, e informa\u00e7\u00f5es de par\u00e2metros em fun\u00e7\u00f5es. O IntelliSense sugere automaticamente como completar o c\u00f3digo \u00e0 medida que voc\u00ea digita, o que pode aumentar significativamente suas produtividade e precis\u00e3o. Voc\u00ea pode v\u00ea-lo em a\u00e7\u00e3o aqui:<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/intellisense-visual-studio-code.gif\" alt=\"O reconhecimento de c\u00f3digo do IntelliSense do Visual Studio Code em a\u00e7\u00e3o.\" width=\"800\" height=\"503\"><figcaption class=\"wp-caption-text\">O reconhecimento de c\u00f3digo do IntelliSense do Visual Studio Code em a\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>Lembre-se de que o Visual Studio Code vem com suporte ao IntelliSense para projetos TypeScript prontos. Voc\u00ea n\u00e3o precisa configur\u00e1-lo manualmente.<\/p>\n<p>Agora que voc\u00ea sabe como escrever TypeScript como um profissional no Visual Studio Code, vamos compil\u00e1-lo e ver se funciona.<\/p>\n<h2>Compilando o TypeScript no Visual Studio Code<\/h2>\n<p>Abra o terminal integrado no Visual Studio Code e execute:<\/p>\n<pre><code class=\"language-bash\">tsc -p .<\/code><\/pre>\n<p>Isso transpila todos os arquivos TypeScript do projeto para JavaScript. O <code>-p .<\/code> diz ao compilador para usar o arquivo <strong>tsconfig.json<\/strong> localizado no diret\u00f3rio atual. A sa\u00edda \u2014 neste caso, <strong>index.js<\/strong> e o mapa de fonte <strong>index.js.map<\/strong> \u2014 \u00e9 colocada no diret\u00f3rio <strong>.\/build<\/strong>.<\/p>\n<p>Voc\u00ea pode confirmar que o c\u00f3digo JavaScript transpilado funciona com este comando no terminal:<\/p>\n<pre><code class=\"language-bash\">node .\/build\/index.js<\/code><\/pre>\n<p>O Node.js interpretar\u00e1 <strong>index.js<\/strong> e imprimir\u00e1 no terminal:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Um m\u00e9todo alternativo para iniciar o transpilador \u00e9 selecionar <strong>Terminal<\/strong> &gt; <strong>Run Build Task\u2026<\/strong>\u00a0no menu do Visual Studio Code e clicar na op\u00e7\u00e3o <strong>tsc: build &#8211; tsconfig.json<\/strong>.<\/p>\n<figure style=\"width: 909px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/transpiling-visual-studio-code.png\" alt=\"Iniciando o processo de build usando os menus do Visual Studio Code.\" width=\"909\" height=\"136\"><figcaption class=\"wp-caption-text\">Iniciando o processo de build usando os menus do Visual Studio Code.<\/figcaption><\/figure>\n<p>Essa opera\u00e7\u00e3o executa <code>tsc -p .<\/code> nos bastidores e constr\u00f3i seu c\u00f3digo diretamente no editor.<\/p>\n<p>E \u00e9 assim que voc\u00ea compila seu projeto TypeScript no Visual Studio Code. Agora s\u00f3 falta descobrir como iniciar e depurar seu c\u00f3digo.<\/p>\n<h2>Execute e depure TypeScript no Visual Studio Code<\/h2>\n<p>O Visual Studio Code oferece suporte \u00e0 depura\u00e7\u00e3o do TypeScript gra\u00e7as ao <a href=\"https:\/\/code.visualstudio.com\/docs\/nodejs\/nodejs-debugging\" target=\"_blank\" rel=\"noopener noreferrer\">depurador Node.js<\/a> integrado. Mas antes de poder us\u00e1-lo, voc\u00ea precisa configur\u00e1-lo. Clique no \u00edcone <strong>Run and Debug <\/strong>na barra lateral, clique em <strong>Create a launch.json file <\/strong>e selecione <strong>Node.js<\/strong>.<\/p>\n<figure style=\"width: 1367px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/node-debugger-visual-studio-code.png\" alt=\"Selecionando o depurador Node.js para a configura\u00e7\u00e3o launch.json.\" width=\"1367\" height=\"471\"><figcaption class=\"wp-caption-text\">Selecionando o depurador Node.js para a configura\u00e7\u00e3o <strong>launch.json<\/strong>.<\/figcaption><\/figure>\n<p>Isso cria um arquivo <strong>launch.json<\/strong> padr\u00e3o do Node.js, que \u00e9 o arquivo de configura\u00e7\u00e3o que o depurador do Visual Studio Code usa para iniciar e depurar um aplicativo. Esse arquivo de configura\u00e7\u00e3o detalha como iniciar o aplicativo, os argumentos de linha de comando a serem usados e as vari\u00e1veis de ambiente a serem definidas.<\/p>\n<p>Como voc\u00ea pode ver na se\u00e7\u00e3o <strong>Explorer<\/strong>, o <strong>launch.json est\u00e1 localizado na pasta<\/strong> <strong><strong>.vscode <\/strong>de um projeto<\/strong>.<\/p>\n<p>Abra esse arquivo e o edite da seguinte forma:<\/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>Ajuste as op\u00e7\u00f5es <code>program<\/code>, <code>preLaunchTask<\/code> e <code>outFiles<\/code>, considerando que:<\/p>\n<ul>\n<li><code>program<\/code>: Especifica o caminho para o ponto de entrada do aplicativo a ser depurado. No TypeScript, ele deve conter o arquivo principal a ser executado ao iniciar o aplicativo.<\/li>\n<li><code>preLaunchTask<\/code>: Define o nome da tarefa de build do Visual Studio Code a ser executada antes de iniciar o aplicativo. Em um projeto TypeScript, deve ser a tarefa de build.<\/li>\n<li><code>outFiles<\/code>: Cont\u00e9m o caminho para os arquivos JavaScript transpilados gerados pelo processo de build. Os arquivos de mapa de fonte gerados pelo tsc devido \u00e0 configura\u00e7\u00e3o <code>\"sourceMap\": true<\/code> s\u00e3o usados pelo depurador para mapear o c\u00f3digo-fonte do TypeScript para o c\u00f3digo JavaScript gerado. Isso permite que voc\u00ea depure o c\u00f3digo TypeScript diretamente.<\/li>\n<\/ul>\n<p>Salve o arquivo <strong>launch.json<\/strong> e abra o arquivo <strong>index.ts<\/strong>. Clique no espa\u00e7o em branco antes da linha <code>console.log()<\/code> para definir um breakpoint. Voc\u00ea ver\u00e1 um ponto vermelho ao lado da linha, mais ou menos assim:<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/debug-breakpoint-visual-studio-code.png\" alt=\"O ponto vermelho marca um breakpoint de depura\u00e7\u00e3o.\" width=\"1366\" height=\"261\"><figcaption class=\"wp-caption-text\">O ponto vermelho marca um breakpoint de depura\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>Quando voc\u00ea executa o c\u00f3digo com o compilador, a execu\u00e7\u00e3o para nesse ponto. Gra\u00e7as a esse breakpoint, voc\u00ea pode verificar se o depurador do Node.js no Visual Studio Code est\u00e1 funcionando conforme o esperado.<\/p>\n<p>Visite a se\u00e7\u00e3o <strong>Run and Debug<\/strong> novamente e clique no bot\u00e3o verde de reprodu\u00e7\u00e3o para executar o depurador. Aguarde a execu\u00e7\u00e3o de <code>preLaunchTask<\/code>. Depois que o c\u00f3digo tiver sido compilado, o programa ser\u00e1 iniciado e a execu\u00e7\u00e3o ser\u00e1 interrompida no breakpoint definido acima.<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/debug-running-visual-studio-code.png\" alt=\"O depurador do Visual Studio Code em a\u00e7\u00e3o.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">O depurador do Visual Studio Code em a\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>\u00c0 esquerda na imagem acima, voc\u00ea pode ver os valores das vari\u00e1veis no momento da interrup\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode pausar, passar por cima, entrar\/sair, reiniciar e parar, conforme descrito na <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o de depura\u00e7\u00e3o<\/a> do Visual Studio Code.<\/p>\n<p>Aperte <strong>F5<\/strong> para retomar a execu\u00e7\u00e3o, e voc\u00ea dever\u00e1 ver a seguinte mensagem na aba <strong>Debug Console<\/strong>:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Isso \u00e9 o que voc\u00ea espera que o aplicativo produza e significa que o programa foi executado corretamente.<\/p>\n<p>Voc\u00ea acabou de aprender como configurar o Visual Studio Code para a programa\u00e7\u00e3o TypeScript. O tutorial poderia terminar aqui, mas voc\u00ea ainda precisa aprender mais uma coisa importante: como configurar uma extens\u00e3o no Visual Studio Code que pode tornar ainda mais f\u00e1cil escrever c\u00f3digo de qualidade em TypeScript.<\/p>\n<h2>Como configurar o ESLint no Visual Studio Code<\/h2>\n<p>Voc\u00ea pode estender o n\u00facleo do Visual Studio Code usando <a href=\"https:\/\/kinqsta.com\/pt\/blog\/extensoes-vscode-extensions\/\">extens\u00f5es<\/a>. Elas fornecem recursos e funcionalidades adicionais para o editor de c\u00f3digo.<\/p>\n<p>Uma das extens\u00f5es mais populares do Visual Studio Code para o desenvolvimento em TypeScript \u00e9 a <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\" rel=\"noopener noreferrer\">extens\u00e3o ESLint<\/a>.<\/p>\n<p>O <a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> \u00e9 uma ferramenta popular de an\u00e1lise de c\u00f3digo est\u00e1tico para JavaScript e TypeScript que ajuda os desenvolvedores a identificar e corrigir erros comuns de codifica\u00e7\u00e3o e a impor padr\u00f5es de codifica\u00e7\u00e3o. A extens\u00e3o executa o ESLint diretamente no editor.<\/p>\n<p>Vamos integrar o ESLint ao Visual Studio Code em seu projeto TypeScript.<\/p>\n<p>Primeiro, inicialize o ESLint em seu projeto com este comando de terminal:<\/p>\n<pre><code class=\"language-bash\">npm init @eslint\/config<\/code><\/pre>\n<p>Durante o processo de configura\u00e7\u00e3o, voc\u00ea receber\u00e1 algumas perguntas para ajudar a gerar o arquivo de configura\u00e7\u00e3o do ESLint. Voc\u00ea pode responder da seguinte forma:<\/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>O instalador verificar\u00e1 as depend\u00eancias e perguntar\u00e1 se voc\u00ea deseja instalar algum pacote que esteja faltando. Voc\u00ea pode responder da seguinte forma:<\/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>No final do processo, voc\u00ea encontrar\u00e1 um novo arquivo <strong>.eslintrc.json<\/strong> contendo o seguinte 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>O arquivo <strong>.eslintrc.json<\/strong> cont\u00e9m as configura\u00e7\u00f5es usadas pelo ESLint para impor padr\u00f5es espec\u00edficos de c\u00f3digo, estilo e qualidade. \u00c9 assim que se parece um arquivo <strong>.eslintrc.json<\/strong> b\u00e1sico para um projeto 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>Agora \u00e9 hora de instalar a extens\u00e3o ESLint no Visual Studio Code. Clique no \u00edcone <strong>Extensions<\/strong>\u00a0no menu esquerdo e digite <code>ESLint<\/code>. Encontre a extens\u00e3o ESLint e clique em <strong>Install<\/strong>.<\/p>\n<figure style=\"width: 1642px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/eslint-installation-visual-studio-code.png\" alt=\"Instalando a extens\u00e3o ESLint no Visual Studio Code.\" width=\"1642\" height=\"724\"><figcaption class=\"wp-caption-text\">Instalando a extens\u00e3o ESLint no Visual Studio Code.<\/figcaption><\/figure>\n<p>Para ativar a extens\u00e3o ESLint para inspecionar automaticamente seus arquivos TypeScript em cada salvamento, crie um arquivo <strong>settings.json<\/strong> dentro de <strong>.vscode<\/strong> com o seguinte conte\u00fado:<\/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>O arquivo <strong>settings.json<\/strong> cont\u00e9m a configura\u00e7\u00e3o usada pelo Visual Studio Code para personalizar o comportamento do editor e de suas extens\u00f5es.<\/p>\n<p>Reinicie o Visual Studio Code para que o editor carregue a nova extens\u00e3o e as novas configura\u00e7\u00f5es.<\/p>\n<p>Se voc\u00ea abrir o <strong>index.ts<\/strong> e editar o c\u00f3digo, ver\u00e1 novos erros relatados pelo IDE. Para erros de estilo de c\u00f3digo, salve o arquivo e o ESLint reformatar\u00e1 automaticamente o c\u00f3digo conforme definido em <strong>.eslintrc.json<\/strong>.<\/p>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/02\/eslint-running-visual-studio-code.gif\" alt=\"ESLint em a\u00e7\u00e3o no Visual Studio Code.\" width=\"600\" height=\"301\"><figcaption class=\"wp-caption-text\">ESLint em a\u00e7\u00e3o no Visual Studio Code.<\/figcaption><\/figure>\n<p>Agora, nada pode impedir voc\u00ea de escrever um c\u00f3digo de qualidade! Tudo o que voc\u00ea precisa fazer \u00e9 implantar seu aplicativo Node.js em um servi\u00e7o moderno de hospedagem na nuvem, como o da Kinsta.<\/p>\n<h2>Resumo<\/h2>\n<p>Portanto, configurar o Visual Studio Code para desenvolvimento em TypeScript \u00e9 bastante simples \u2014 voc\u00ea acabou de aprender como criar um projeto Node.js em TypeScript, carreg\u00e1-lo no Visual Studio Code e usar o IDE para escrever c\u00f3digo com o aux\u00edlio do IntelliSense. Voc\u00ea tamb\u00e9m configurou o compilador do TypeScript, configurou o compilador do Node.js para depurar o c\u00f3digo do TypeScript e integrou o ESLint ao projeto.<\/p>\n<p>Se voc\u00ea deseja levar o desenvolvimento de seu aplicativo web para o pr\u00f3ximo n\u00edvel, explore os servi\u00e7os de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos Web<\/a> e <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Hospedagem de Banco de Dados Gerenciado<\/a> da Kinsta. A Kinsta oferece uma gama de solu\u00e7\u00f5es de hospedagem otimizadas para velocidade, seguran\u00e7a e escalabilidade, proporcionando um \u00f3timo ambiente para a cria\u00e7\u00e3o e implanta\u00e7\u00e3o de aplicativos de alto desempenho.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Visual Studio Code \u00e9 um ambiente de desenvolvimento integrado (IDE) preferido por muitos programadores que apreciam sua ampla variedade de recursos e sua heran\u00e7a de &#8230;<\/p>\n","protected":false},"author":305,"featured_media":67700,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1018,1017],"class_list":["post-67699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-ferramentas-desenvolvimento-web","topic-linguagens-desenvolvimento-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>Domine o desenvolvimento de TypeScript no Visual Studio Code - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da 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:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Domine o Desenvolvimento de TypeScript no Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-05T09:26:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-08T08:27:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\"},\"headline\":\"Domine o Desenvolvimento de TypeScript no Visual Studio Code\",\"datePublished\":\"2024-04-05T09:26:13+00:00\",\"dateModified\":\"2024-04-08T08:27:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\"},\"wordCount\":2330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\",\"name\":\"Domine o desenvolvimento de TypeScript no Visual Studio Code - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png\",\"datePublished\":\"2024-04-05T09:26:13+00:00\",\"dateModified\":\"2024-04-08T08:27:02+00:00\",\"description\":\"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Domine o Desenvolvimento de TypeScript no Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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:\/\/kinqsta.com\/pt\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/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:\/\/kinqsta.com\/pt\/blog\/author\/antonellozanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domine o desenvolvimento de TypeScript no Visual Studio Code - Kinsta\u00ae","description":"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da 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:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/","og_locale":"pt_PT","og_type":"article","og_title":"Domine o Desenvolvimento de TypeScript no Visual Studio Code","og_description":"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-04-05T09:26:13+00:00","article_modified_time":"2024-04-08T08:27:02+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","type":"image\/png"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_description":"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Antonello Zanini","Tempo estimado de leitura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b"},"headline":"Domine o Desenvolvimento de TypeScript no Visual Studio Code","datePublished":"2024-04-05T09:26:13+00:00","dateModified":"2024-04-08T08:27:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/"},"wordCount":2330,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/","url":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/","name":"Domine o desenvolvimento de TypeScript no Visual Studio Code - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","datePublished":"2024-04-05T09:26:13+00:00","dateModified":"2024-04-08T08:27:02+00:00","description":"Veja aqui como colocar seus projetos TypeScript em funcionamento com o ambiente de desenvolvimento integrado Visual Studio Code da Microsoft.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/typescript-visual-studio.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/typescript-visual-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinqsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Domine o Desenvolvimento de TypeScript no Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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:\/\/kinqsta.com\/pt\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/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:\/\/kinqsta.com\/pt\/blog\/author\/antonellozanini\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67699"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67699\/revisions"}],"predecessor-version":[{"id":67891,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67699\/revisions\/67891"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/translations\/es"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67699\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/67700"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67699"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67699"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}