Anterior

Avançar

Criar um aplicativo Node.js no Visual Studio Code

Concluído

Nesta unidade, você entenderá como:

• Criar um aplicativo JavaScript usando Visual Studio Code e Cosmos DB.
• Usar o Intellisense para ajudar a escrever código.
• Executar o aplicativo usando o Node.js no Visual Studio Code.
• Usar o depurador integrado 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.

Depois será necessário criar um arquivo para o código do aplicativo. Ao salvar o arquivo, lembre-se de dar a ele 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:

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:

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.
• Dê uma espiada nas 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 index.js, execute node index.js.

Você pode usar o depurador nativo do Node.js (por exemplo, node inspect index) 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.

Configurar o depurador no arquivo launch.json

Para usar o depurador do Visual Studio Code, configure-o. Para editar as definições de configuração do depurador, no menu Executar, clique em Adicionar configuração. Na opção Selecionar depurador, selecione Node.js. O arquivo ./.vscode/launch.json exibe sua nova configuração.

{
    // 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_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
        }
    ]
}

Para este aplicativo Contoso, com vários arquivos de código a serem executados, adicionaremos algumas propriedades extras. Altere o nome do arquivo de propriedade do programa para ${file}. Isso permite que você depure o arquivo JavaScript ativo no momento. Adicione a propriedade args quando precisar passar parâmetros para o aplicativo. Esses valores estão disponíveis na propriedade process.argv disponível no runtime Node.js.

{
    // 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_internals>/**"
            ],
            // ${file} is replaced with active file's name
            "program": "${workspaceFolder}/${file}",
            // these values are available as process.argv
            "args": ["abc", "1"],
        }
    ]
}

Definir Pontos de Interrupção

Antes de começar a depurar, você deve definir um ponto 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.

Iniciar a depuração

Para iniciar a depuração, selecione Iniciar Depuração no menu Executar ou inicialize o depurador com F5. Se você estiver usando um terminal externo, uma nova janela do terminal será exibida. A saída do depurador será exibida na janela 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. O Windows no gerenciador de Execução e Depuração permite examinar e definir os valores de variáveis locais e globais e a pilha de chamadas. Também é possível adicionar Inspecionar expressões que são avaliadas e exibidas conforme a execução prossegue.

Item	Descrição
1 – Variáveis	Todas as variáveis no escopo local e global.
2 – Inspeção	Adicione todas as variáveis para inspecionar durante a execução.
3 – Pilha de chamadas	A pilha de execução do aplicativo no momento atual.
4 – Pontos de interrupção	Todos os pontos de interrupção definidos no aplicativo.
5 – Barra de ferramentas de depuração	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.
6 – Console de depuração	Consulte todos os valores da instrução de console.

Ao adicionar código JavaScript nos próximos exercícios, talvez seja necessário depurar o código para determinar o que está errado. Volte para esta unidade quando necessário.

Continuar