O Visual Studio Code é um ambiente de desenvolvimento integrado (IDE) preferido por muitos programadores que apreciam sua ampla variedade de recursos e sua herança de código aberto. O Visual Studio Code torna a codificação mais fácil, mais rápida e menos frustrante. Isso é especialmente verdadeiro quando se trata de TypeScript, uma das várias linguagens suportadas pelo IDE.
Recursos como preenchimento automático de código, dicas de parâmetros e realce de sintaxe ajudam muito a tornar os desenvolvedores de TypeScript mais produtivos no Visual Studio Code. Ele também vem com um depurador Node.js integrado e a capacidade de converter o código em JavaScript executável a partir do editor. No entanto, a maioria desses recursos precisa ser configurada para que sejam usados da melhor forma possível.
Como configurar o Visual Studio Code para o desenvolvimento do TypeScript
Este tutorial passo a passo mostra como você pode configurar o Visual Studio Code para o desenvolvimento de TypeScript. Inicializamos um projeto Node.js em TypeScript, escrevemos algum código e, em seguida, compilamos, executamos e depuramos o TypeScript — tudo no Visual Studio Code.
Pré-requisitos
Antes de começar, certifique-se de que você tenha:
- O Node.js instalado e configurado localmente
- O Visual Studio Code instalado
Você precisa do Node.js e do npm (o gerenciador de pacotes do Node) para criar seu projeto TypeScript. Você pode verificar se o Node.js está instalado em seu computador com o seguinte comando de terminal:
node -vIsso deve retornar a versão do Node.js em seu computador assim:
v21.6.1Agora vamos começar a usar o TypeScript no Visual Studio Code!
Instale o compilador do TypeScript
O Visual Studio Code oferece suporte ao desenvolvimento em TypeScript, mas não inclui o compilador do TypeScript. Uma vez que o compilador TypeScript, tsc, transforma — ou transpila — o código TypeScript em JavaScript, ele é um requisito para testar seu código TypeScript. Em outras palavras, o tsc recebe código TypeScript como entrada e produz código JavaScript como saída, e então você pode executar o código JavaScript com o Node.js ou em um navegador web.
Execute o comando abaixo em seu terminal para instalar o compilador TypeScript globalmente em seu computador:
npm install -g typescriptVerifique a versão instalada do tsc:
tsc --versionSe esse comando não retornar um erro, o tsc está disponível. Agora você tem tudo que precisa para criar um projeto TypeScript!
Crie um projeto TypeScript
Vamos criar um projeto TypeScript simples com Node.js chamado hello-world. Abra o seu terminal e crie uma pasta para o seu projeto:
mkdir hello-world
cd hello-worldDentro de hello-world, inicialize um projeto com o seguinte comando npm:
npm init -yIsso cria um arquivo de configuração package.json para o seu projeto Node.js. É hora de você ver em que consiste o projeto no Visual Studio Code!
Inicie o Visual Studio Code e selecione File > Open Folder…
Na janela que aparece, selecione a pasta do projeto hello-world e clique em Open. Seu projeto deve ter a seguinte aparência:
Nesse momento, o projeto consiste apenas no arquivo package.json inicializado por npm init.
Selecione View > Terminal no menu do Visual Studio Code para ter acesso ao terminal integrado do editor. Lá, execute o seguinte comando:
npx tsc --initIsso inicializa um arquivo de configuração do TypeScript chamado tsconfig.json no diretório do projeto.
O arquivo tsconfig.json permite que você personalize o comportamento do compilador do TypeScript. Especificamente, fornece ao compilador do TypeScript instruções para transpilar o código do TypeScript. Sem ele, o tsc não conseguirá compilar seu projeto Typescript como você gostaria.
Abra o tsconfig.json no Visual Studio Code, e você perceberá que ele contém um comentário para cada opção de configuração disponível. Queremos que nosso arquivo tsconfig.json inclua estas opções:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./build"
}
}É provável que as únicas diferenças que você verá entre as opções acima sejam a ativação do mapeamento de fonte para o JavaScript que você irá gerar e a adição de um diretório de saída:
"sourceMap": true,
"outDir": "./build"Faça essas alterações em seu arquivo tsconfig.json.
O mapeamento de fonte é exigido pelo compilador do Visual Studio Code.
A configuração do outDir define onde o compilador coloca os arquivos transpilados. Por padrão, essa é a pasta raiz do projeto. Para evitar encher a pasta do projeto com arquivos de build a cada compilação, defina-a como outra pasta, por exemplo, build.
Seu projeto TypeScript está quase pronto para ser compilado. Mas primeiro você precisa do código TypeScript.
Clique com o botão direito do mouse na seção Explorer e selecione New File… Digite index.ts e aperte Enter. Seu projeto agora conterá um arquivo TypeScript chamado index.ts:
Vamos começar com o seguinte código TypeScript:
const message: string = "Hello, World!"
console.log(message)
Este snippet simplesmente imprime a conhecida mensagem Hello, World!
Experimente o IntelliSense para preenchimento automático de código
Quando você estava escrevendo as linhas acima no Visual Studio Code, deve ter notado algumas sugestões de código feitas pelo editor. Isso acontece por causa do IntelliSense, um dos recursos interessantes do Visual Studio Code.
O IntelliSense inclui recursos como preenchimento automático de código, informações de documentos, e informações de parâmetros em funções. O IntelliSense sugere automaticamente como completar o código à medida que você digita, o que pode aumentar significativamente suas produtividade e precisão. Você pode vê-lo em ação aqui:
Lembre-se de que o Visual Studio Code vem com suporte ao IntelliSense para projetos TypeScript prontos. Você não precisa configurá-lo manualmente.
Agora que você sabe como escrever TypeScript como um profissional no Visual Studio Code, vamos compilá-lo e ver se funciona.
Compilando o TypeScript no Visual Studio Code
Abra o terminal integrado no Visual Studio Code e execute:
tsc -p .Isso transpila todos os arquivos TypeScript do projeto para JavaScript. O -p . diz ao compilador para usar o arquivo tsconfig.json localizado no diretório atual. A saída — neste caso, index.js e o mapa de fonte index.js.map — é colocada no diretório ./build.
Você pode confirmar que o código JavaScript transpilado funciona com este comando no terminal:
node ./build/index.jsO Node.js interpretará index.js e imprimirá no terminal:
Hello, World!Um método alternativo para iniciar o transpilador é selecionar Terminal > Run Build Task… no menu do Visual Studio Code e clicar na opção tsc: build – tsconfig.json.
Essa operação executa tsc -p . nos bastidores e constrói seu código diretamente no editor.
E é assim que você compila seu projeto TypeScript no Visual Studio Code. Agora só falta descobrir como iniciar e depurar seu código.
Execute e depure TypeScript no Visual Studio Code
O Visual Studio Code oferece suporte à depuração do TypeScript graças ao depurador Node.js integrado. Mas antes de poder usá-lo, você precisa configurá-lo. Clique no ícone Run and Debug na barra lateral, clique em Create a launch.json file e selecione Node.js.
Isso cria um arquivo launch.json padrão do Node.js, que é o arquivo de configuração que o depurador do Visual Studio Code usa para iniciar e depurar um aplicativo. Esse arquivo de configuração detalha como iniciar o aplicativo, os argumentos de linha de comando a serem usados e as variáveis de ambiente a serem definidas.
Como você pode ver na seção Explorer, o launch.json está localizado na pasta .vscode de um projeto.
Abra esse arquivo e o edite da seguinte forma:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"node_modules/**"
],
"program": "${workspaceFolder}/index.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/build/**/*.js"]
}
]
}Ajuste as opções program, preLaunchTask e outFiles, considerando que:
program: 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.preLaunchTask: 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.outFiles: Contém o caminho para os arquivos JavaScript transpilados gerados pelo processo de build. Os arquivos de mapa de fonte gerados pelo tsc devido à configuração"sourceMap": truesão usados pelo depurador para mapear o código-fonte do TypeScript para o código JavaScript gerado. Isso permite que você depure o código TypeScript diretamente.
Salve o arquivo launch.json e abra o arquivo index.ts. Clique no espaço em branco antes da linha console.log() para definir um breakpoint. Você verá um ponto vermelho ao lado da linha, mais ou menos assim:
Quando você executa o código com o compilador, a execução para nesse ponto. Graças a esse breakpoint, você pode verificar se o depurador do Node.js no Visual Studio Code está funcionando conforme o esperado.
Visite a seção Run and Debug novamente e clique no botão verde de reprodução para executar o depurador. Aguarde a execução de preLaunchTask. Depois que o código tiver sido compilado, o programa será iniciado e a execução será interrompida no breakpoint definido acima.
À esquerda na imagem acima, você pode ver os valores das variáveis no momento da interrupção. Você também pode pausar, passar por cima, entrar/sair, reiniciar e parar, conforme descrito na documentação de depuração do Visual Studio Code.
Aperte F5 para retomar a execução, e você deverá ver a seguinte mensagem na aba Debug Console:
Hello, World!Isso é o que você espera que o aplicativo produza e significa que o programa foi executado corretamente.
Você acabou de aprender como configurar o Visual Studio Code para a programação TypeScript. O tutorial poderia terminar aqui, mas você ainda precisa aprender mais uma coisa importante: como configurar uma extensão no Visual Studio Code que pode tornar ainda mais fácil escrever código de qualidade em TypeScript.
Como configurar o ESLint no Visual Studio Code
Você pode estender o núcleo do Visual Studio Code usando extensões. Elas fornecem recursos e funcionalidades adicionais para o editor de código.
Uma das extensões mais populares do Visual Studio Code para o desenvolvimento em TypeScript é a extensão ESLint.
O ESLint é uma ferramenta popular de análise de código estático para JavaScript e TypeScript que ajuda os desenvolvedores a identificar e corrigir erros comuns de codificação e a impor padrões de codificação. A extensão executa o ESLint diretamente no editor.
Vamos integrar o ESLint ao Visual Studio Code em seu projeto TypeScript.
Primeiro, inicialize o ESLint em seu projeto com este comando de terminal:
npm init @eslint/configDurante o processo de configuração, você receberá algumas perguntas para ajudar a gerar o arquivo de configuração do ESLint. Você pode responder da seguinte forma:
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSONO instalador verificará as dependências e perguntará se você deseja instalar algum pacote que esteja faltando. Você pode responder da seguinte forma:
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npmNo final do processo, você encontrará um novo arquivo .eslintrc.json contendo o seguinte código inicial:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "standard-with-typescript",
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
}
}O arquivo .eslintrc.json contém as configurações usadas pelo ESLint para impor padrões específicos de código, estilo e qualidade. É assim que se parece um arquivo .eslintrc.json básico para um projeto Node.js TypeScript:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
// enable node support
"node": true
},
"extends": "standard-with-typescript",
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"project": "tsconfig.json"
},
"rules": {
// force the code to be indented with 2 spaces
"indent": ["error", 2],
// mark extra spaces as errors
"no-multi-spaces": ["error"]
}
}Agora é hora de instalar a extensão ESLint no Visual Studio Code. Clique no ícone Extensions no menu esquerdo e digite ESLint. Encontre a extensão ESLint e clique em Install.
Para ativar a extensão ESLint para inspecionar automaticamente seus arquivos TypeScript em cada salvamento, crie um arquivo settings.json dentro de .vscode com o seguinte conteúdo:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"typescript"
],
"eslint.codeActionsOnSave.rules": null
}O arquivo settings.json contém a configuração usada pelo Visual Studio Code para personalizar o comportamento do editor e de suas extensões.
Reinicie o Visual Studio Code para que o editor carregue a nova extensão e as novas configurações.
Se você abrir o index.ts e editar o código, verá novos erros relatados pelo IDE. Para erros de estilo de código, salve o arquivo e o ESLint reformatará automaticamente o código conforme definido em .eslintrc.json.
Agora, nada pode impedir você de escrever um código de qualidade! Tudo o que você precisa fazer é implantar seu aplicativo Node.js em um serviço moderno de hospedagem na nuvem, como o da Kinsta.
Resumo
Portanto, configurar o Visual Studio Code para desenvolvimento em TypeScript é bastante simples — você acabou de aprender como criar um projeto Node.js em TypeScript, carregá-lo no Visual Studio Code e usar o IDE para escrever código com o auxílio do IntelliSense. Você também configurou o compilador do TypeScript, configurou o compilador do Node.js para depurar o código do TypeScript e integrou o ESLint ao projeto.
Se você deseja levar o desenvolvimento de seu aplicativo web para o próximo nível, explore os serviços de Hospedagem de Aplicativos Web e Hospedagem de Banco de Dados Gerenciado da Kinsta. A Kinsta oferece uma gama de soluções de hospedagem otimizadas para velocidade, segurança e escalabilidade, proporcionando um ótimo ambiente para a criação e implantação de aplicativos de alto desempenho.
Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.
Deixe um comentário