Criar um aplicativo Node.js no Visual Studio Code

O Visual Studio Code facilita a escrita do código JavaScript e a execução dele com o Node.js. O editor do Visual Studio Code tem suporte interno para JavaScript e JSON. Utilize os recursos do IntelliSense do editor para ajudar a verificar a sintaxe. O IntelliSense também oferece o preenchimento de código, ajudando a minimizar os erros sintáticos e semânticos em seus aplicativos. Use as ferramentas de depuração integradas para ajudar a testar e verificar o código.

Nesta unidade, você aprenderá a criar um aplicativo JavaScript usando o Visual Studio Code. Você verá como executar o aplicativo usando o Node.js no Visual Studio Code. Por fim, você aprenderá a usar o depurador para executar o código em etapas e examinar as variáveis durante a execução do código.

Criar um aplicativo JavaScript para o Node.js

Crie um aplicativo JavaScript para o Node.js no Visual Studio Code usando uma janela do terminal. O comando npm init -y cria um arquivo chamado package.json na pasta do aplicativo. Esse arquivo contém metadados que você usará para descrever o aplicativo para o runtime do Node.js.

Edite o arquivo package.json e adicione uma descrição à propriedade description . Substitua também o texto main.js na propriedade main pelo nome do arquivo JavaScript que armazenará o código do aplicativo.

Crie um arquivo para o código do aplicativo. Salve o arquivo com o mesmo nome especificado no arquivo package.json . Lembre-se de fornecer ao arquivo uma extensão .js (para JavaScript)

Agora você está pronto para começar a escrever seu código JavaScript.

Usar o IntelliSense para ajudar a escrever o código

Enquanto você escreve o código, o IntelliSense pode executar a verificação de tipo e o preenchimento de código. Por exemplo, conforme você cria funções, define tipos ou, até mesmo, importa um módulo para um arquivo JavaScript, os itens que você adicionou ou importou ficam disponíveis para o IntelliSense.

Durante a digitação, o IntelliSense usará uma combinação de verificação de tipo e inferência de tipos para mostrar sugestões apropriadas ao contexto atual. A inferência de tipos habilita o IntelliSense para apresentar sugestões válidas de conclusão de código conforme você escreve seu código:

Captura de tela do Visual Studio Code do editor mostrando um prompt do IntelliSense.

A verificação de tipo habilita o IntelliSense para mostrar os parâmetros que podem ser usados por uma chamada de função e digitará as expressões fornecidas para cada função:

Captura de tela do Visual Studio Code do editor mostrando um prompt do IntelliSense.

Outros recursos do IntelliSense disponíveis no Visual Studio Code incluem:

  • Detecção de código inacessível e variáveis não utilizadas. As instruções que nunca podem ser executadas e as variáveis que nunca são usadas são mostradas esmaecidas no editor.
  • Organização de importações. O IntelliSense pode classificar rapidamente as importações ocorridas em um arquivo de código e remover as importações que não são usadas.
  • Espiada de definições e referências. O recurso de espiada permite que você exiba rapidamente a definição de um objeto ou uma função, mesmo que ela esteja em outro arquivo. Clique com o botão direito do mouse em uma variável ou uma função e selecione Espiar Definição ou Espiar Referências . A definição ou as referências são exibidas em uma janela pop-up.
  • Acesse a definição de uma variável, uma função ou um tipo. Esse recurso permite que você vá diretamente para a definição de uma variável, uma função ou um tipo no código. Isso será útil se você precisar alterar a definição de um item ou modificar uma função. Clique com o botão direito do mouse no código que referencia a variável ou o tipo ou que chama a função. Selecione Ir para Definição ou Ir para Definição de Tipo .
  • Sugestão de uma possível refatoração do código. As reticências (...) em um item indicam as áreas para as quais o IntelliSense tem uma ou mais sugestões. Clique nas reticências para exibir as sugestões. Selecione Correção Rápida para implementar a sugestão.

Executar e depurar um aplicativo Node.js

A maneira mais simples de executar um aplicativo Node.js no Visual Studio Code é usar o comando node em uma janela do terminal. Por exemplo, para executar o código em um arquivo chamado myapp.js , execute node myapp.js.

Você pode usar o depurador nativo do Node.js (por exemplo, node inspect myapp) em uma janela do terminal, mas o Visual Studio Code fornece um ambiente avançado para a execução em etapas e a depuração de aplicativos Node.js.

Para usar o depurador do Visual Studio Code, configure-o. Por exemplo, o depurador do Visual Studio Code exibe a saída na Janela de Saída no IDE. No entanto, essa janela não pode tratar a entrada do terminal. Caso o aplicativo espere receber uma entrada do teclado, você precisará configurar o depurador para usar um terminal externo.

Para editar as definições de configuração do depurador, no menu Depurar , clique em Abrir Configurações . O arquivo de configuração contém um objeto JSON chamado configurations . Para depurar o aplicativo usando um terminal externo, adicione a propriedade console e defina-a como externalTerminal .

{
    // 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",
            "program": "${workspaceFolder}/myapp.js",
            "console": "externalTerminal"
        }
    ]
}

Para iniciar uma sessão de depuração, primeiro defina um ou mais pontos de interrupção no código do aplicativo. Para fazer isso, clique na margem esquerda ao lado da instrução na qual deseja pausar a execução. Um ponto vermelho será exibido.

Em seguida, selecione Iniciar Depuração no menu Depurar . Se você estiver usando um terminal externo, uma nova janela do terminal será exibida. Caso o aplicativo espere qualquer entrada, insira-a nessa janela. Todas as mensagens enviadas pelo aplicativo serão exibidas nesta janela:

Captura de tela do Visual Studio Code do editor mostrando um prompt do IntelliSense.

Caso não esteja usando um terminal externo, a saída do depurador será exibida na Janela de Saída no Visual Studio Code.

Quando o depurador atingir um ponto de interrupção no aplicativo, a execução será pausada e a instrução do ponto de interrupção será realçada. À esquerda, você verá o Windows, no qual poderá examinar e definir os valores de variáveis locais e globais, bem como a pilha de chamadas. Também é possível adicionar Inspecionar expressões que são avaliadas e exibidas conforme a execução prossegue:

Captura de tela do Visual Studio Code do editor mostrando um prompt do IntelliSense.

A barra de ferramentas Depurar será exibida acima da janela do editor. Essa barra de ferramentas contém comandos que permitem executar uma etapa do código. Se uma instrução contiver uma chamada de função, você poderá intervir nessa função ou executar a depuração parcial dela. O comando de depuração circular continua a execução até que a função seja concluída. Você também pode continuar executando o aplicativo até que o depurador atinja outro ponto de interrupção ou o aplicativo seja concluído.