Início Rápido: Explorar o Visual Studio IDE para JavaScript

Neste Início Rápido, você explorará o IDE (ambiente de desenvolvimento integrado) Visual Studio. Este artigo fornece uma introdução de 5 a 10 minutos para ajudá-lo a se familiarizar com as janelas, menus e outros recursos disponíveis para desenvolvimento javaScript.

Se você não tiver o Visual Studio, poderá instalar a versão de avaliação gratuita na página Downloads do Visual Studio.

Usar a janela Iniciar

A primeira coisa que você vê depois de iniciar Visual Studio é a janela Start. A Janela Iniciar foi projetada para ajudá-lo a "acessar o código" mais rapidamente. Há opções para clonar ou fazer checkout de código, abrir um projeto ou solução existente, criar um novo projeto ou abrir uma pasta com arquivos de código.

Se você já estiver trabalhando no Visual Studio, poderá abrir a Janela Iniciar selecionando File>Start Window.

Captura de tela da janela inicial quando o Visual Studio é aberto.

Captura de tela da Janela Inicial ao abrir o Visual Studio 2022.

Se você não estiver familiarizado com o trabalho com Visual Studio, sua lista de projetos recentes poderá estar vazia.

Se você trabalhar com bases de código não baseadas no MSBuild, use a opção Open uma pasta para abrir seu código no Visual Studio. Para obter mais informações, consulte Desenvolver código no Visual Studio sem projetos ou soluções. Caso contrário, você pode criar um novo projeto ou clonar um projeto de um provedor de origem, como o GitHub ou o Azure DevOps.

Se você trabalhar com bases de código não baseadas no MSBuild, use a opção Abrir uma pasta local para abrir seu código no Visual Studio. Para obter mais informações, consulte Desenvolver código no Visual Studio sem projetos ou soluções. Caso contrário, você pode criar um novo projeto ou clonar um projeto de um provedor de origem, como o GitHub ou o Azure DevOps.

Quando você inicia Visual Studio, a Janela Inicial inclui a opção Continue sem código. Essa ação permite que você abra o ambiente de desenvolvimento Visual Studio sem nenhum projeto ou código específico carregado. Você pode usar essa opção para entrar em uma sessão do Live Share ou anexar-se a um processo para depuração. Você também pode selecionar a chave Esc para fechar a Janela Inicial e abrir o IDE.

Criar um projeto

Para continuar explorando os recursos de Visual Studio, crie um novo projeto. O Visual Studio fornece vários tipos de modelos de projeto que ajudam você a começar a codificar rapidamente.

  1. Na Janela Iniciar, selecione Criar um novo projeto. A janela é atualizada para mostrar as opções para criar o novo projeto.

  2. Na caixa Pesquisar modelos, insirajavascript ou typescript.

    O texto de entrada filtra a lista de tipos de projeto para mostrar modelos que contêm "JavaScript" ou "TypeScript" em seu nome ou tipo de linguagem.

    Screenshot que mostra como usar o filtro 'Pesquisar modelos' para localizar modelos JavaScript no Visual Studio Start Window.

    Screenshot que mostra como usar o filtro 'Pesquisar modelos' para localizar modelos JavaScript no Visual Studio 2022 Start Window.

  3. Selecione o modelo de projeto do Aplicativo Expresso JavaScript e selecione Avançar.

  4. Na janela Configurar seu novo projeto , aceite o nome do projeto padrão e selecione Criar.

Visual Studio cria o projeto e o abre no IDE. Os arquivos e pastas do projeto estão visíveis em Gerenciador de Soluções.

Navegue pelo projeto no Gerenciador de Soluções

O painel Gerenciador de Soluções normalmente é aberto no lado direito do Visual Studio IDE. Esta janela mostra uma representação gráfica da hierarquia de arquivos e pastas em seu projeto, solução ou pasta de código.

Screenshot do novo projeto aberto em Gerenciador de Soluções em Visual Studio.

Captura de tela do novo projeto com o Gerenciador de Soluções aberto no Visual Studio 2022.

Você pode procurar a hierarquia, pesquisar um arquivo ou pasta específico e selecionar um arquivo para abri-lo.

Abrir arquivos no editor de código

Em Gerenciador de Soluções, selecione o arquivo app.js para abrir o arquivo na janela Editor. O Editor mostra o conteúdo dos arquivos e é onde você faz a maior parte do trabalho de codificação no Visual Studio.

Screenshot do arquivo de aplicativo aberto no editor em Visual Studio.

Screenshot do arquivo de aplicativo aberto no editor no Visual Studio 2022.

Explorar os menus principais

A barra de menus na parte superior do Visual Studio IDE fornece acesso rápido a grupos de comandos organizados por categoria. Por exemplo, o menu Projeto contém comandos relacionados ao projeto em que você está trabalhando. No menu Ferramentas , você pode personalizar como o Visual Studio se comporta selecionando Opções ou adicionar recursos à sua instalação selecionando Obter Ferramentas e Recursos.

Screenshot da barra de menus em Visual Studio.

Captura de tela da barra de menus no Visual Studio 2022.

Selecione Exibir para ver a lista de comandos relacionados à exibição e selecione Lista de Erros para abrir a janela Lista de Erros .

Examinar erros e avisos na Lista de Erros

A Lista de Erros mostra erros, avisos e mensagens referentes ao estado atual do código. Se houver erros (como uma chave ou ponto-e-vírgula ausente) no arquivo ou em qualquer lugar do projeto, eles estarão listados aqui.

Screenshot da Lista de Erros em Visual Studio.

Captura de tela da Lista de Erros no Visual Studio 2022.

Verificar mensagens de compilação na janela Saída

A janela Saída mostra as mensagens de saída da compilação do seu projeto e fornecidas pelo seu provedor de controle de versão.

Crie seu novo projeto para que você possa explorar as mensagens de build na janela Saída . Na barra de menus, selecione Compilar>Compilar Solução.

A janela Saída obtém automaticamente o foco e exibe uma mensagem de build bem-sucedida.

Captura de tela da janela Saída no Visual Studio mostrando uma saída mínima de compilação.

Captura de tela da janela Saída no Visual Studio 2022 mostrando uma saída mínima de compilação.

Pesquisar comandos e recursos

A caixa Pesquisar é uma maneira rápida e fácil de fazer a maioria das coisas em Visual Studio. Você pode inserir algum texto relacionado ao que deseja fazer e os resultados da pesquisa mostram uma lista de opções relacionadas ao texto de entrada.

Suponha que você queira aumentar a verbosidade da saída da compilação para ver mais detalhes sobre o que a compilação está fazendo. Você pode seguir estas etapas:

  1. Se você não vir a caixa de Pesquisa, use o atalho de teclado Ctrl+Q. Na caixa de pesquisa, insira verbosity.
  1. Na lista de resultados, clique duas vezes na verbosidade da saída de compilação do projeto MSBuild (projectsAndSolutions.buildAndRun.outputVerbosity).

    Captura de tela que mostra como usar a caixa Pesquisar no Visual Studio.

    O painel Opções abre na seção Todas as Configurações>Projetos e Soluções>Compilação e Execução.

  2. Use o menu dropdown e defina a opção de verbosidade de saída de build do projeto MSBuild como Normal.

  1. Na lista de resultados, clique duas vezes na entrada Alterar a verbosidade do MSBuild (Compilação e Execução de Projetos e Soluções > ).

    Captura de tela que mostra como usar a caixa Pesquisar no Visual Studio.

    A caixa de diálogo Opções abre na seção Projetos e Soluções>Compilação e Execução.

  2. Use o menu suspenso e defina a opção verbosidade da saída de build do projeto MSBuild como Normal, e selecione OK.

  1. Crie o projeto novamente clicando com o botão direito do mouse no projeto em Gerenciador de Soluções e selecionando Rebuild no menu de contexto.

    Desta vez, a janela Saída mostra logs mais detalhados do processo de compilação.

    Captura de tela da saída de build detalhada no Visual Studio.

    Captura de tela da saída de compilação detalhada no Visual Studio 2022.

Enviar comentários

Se você encontrar problemas enquanto estiver usando Visual Studio ou se tiver sugestões de como melhorar o produto, poderá usar o menu Send Feedback na parte superior da janela Visual Studio.

Screenshot que mostra como acessar o menu Enviar Comentários em Visual Studio.

Screenshot que mostra como acessar o menu Enviar Comentários no Visual Studio 2022.