Visão geral do IDE do Visual Studio para JavaScript

Nesta introdução de 5 a 10 minutos ao IDE (ambiente de desenvolvimento integrado) do Visual Studio, fazemos um tour por algumas das janelas, menus e outros recursos de interface do usuário.

Se você ainda não instalou o Visual Studio, acesse a página de downloads do Visual Studio para instalá-lo gratuitamente.

Janela de Início

A primeira coisa que você vê depois de iniciar o Visual Studio é a janela inicial. A janela inicial foi projetada para ajudá-lo a "começar a codificar" mais rapidamente. Ele tem opções para fechar ou verificar código, abrir um projeto ou solução existente, criar um novo projeto ou simplesmente abrir uma pasta que contenha alguns arquivos de código. Se a janela inicial não estiver aberta, escolha Janela Iniciar Arquivo > para abri-la.

Se esta for a primeira vez que você estiver usando o Visual Studio, sua lista de projetos recentes estará vazia.

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.

A opção Continuar sem código simplesmente abre o ambiente de desenvolvimento do Visual Studio sem nenhum projeto ou código específico carregado. Você pode escolher essa opção para ingressar em uma sessão do Live Share ou conectar-se a um processo para depuração. Você também pode pressionar Esc para fechar a janela inicial e abrir o IDE.

Criar um projeto

Para continuar explorando os recursos do Visual Studio, vamos criar um novo projeto.

1. Na janela inicial, selecione Criar um novo projeto e, na caixa de pesquisa, digite javascript ou typescript para filtrar a lista de tipos de projeto para aqueles que contêm "javascript" ou "typescript" em seu nome ou tipo de idioma.

   O Visual Studio fornece vários tipos de modelos de projeto que ajudam você a começar a codificar rapidamente.

   

2. Escolha um modelo de projeto do Aplicativo Expresso JavaScript e clique em Avançar.

3. Na caixa de diálogo Configurar seu novo projeto que aparece, aceite o nome do projeto padrão e escolha Criar.

   O projeto foi criado. No painel direito, selecione 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.

   

Gerenciador de Soluções

O Gerenciador de Soluções, que normalmente está no lado direito do Visual Studio, mostra uma representação gráfica da hierarquia de arquivos e pastas em seu projeto, solução ou pasta de código. Você pode navegar pela hierarquia e navegar até um arquivo no Gerenciador de Soluções.

Menus

A barra de menus na parte superior do Visual Studio agrupa os comandos em categorias. 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.

Vamos abrir a janela Lista de Erros escolhendo o menu Exibir e, em seguida, a Lista de Erros.

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.

Janela de 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.

Vamos criar o projeto para ver alguns resultados da compilação. No menu Compilar , escolha Criar Solução. A janela Saída obtém automaticamente o foco e exibe uma mensagem de build bem-sucedida.

Caixa de pesquisa

A caixa Pesquisar é uma maneira rápida e fácil de fazer praticamente qualquer coisa no Visual Studio. Você pode inserir algum texto relacionado ao que deseja fazer e ele mostrará uma lista de opções que pertencem ao texto. Por exemplo, imagine que você deseja aumentar a verbosidade da saída de build para exibir detalhes adicionais sobre o que exatamente o build está fazendo. Veja como você pode fazer isso:

1. Se você não vir a caixa de pesquisa, pressione Ctrl+Q para abri-la e digite verbosidade na caixa.

2. Nos resultados exibidos, dê duplo clique na entrada verbosidade de saída do build do projeto MSBuild (projectsAndSolutions.buildAndRun.outputVerbosity).

   

   O painel Opções é aberto na seção Todos os Configurações>Projetos e Soluções>Compilar e Executar.

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

4. Crie o projeto novamente clicando com o botão direito do mouse no projeto no Gerenciador de Soluções e escolhendo Recompilar no menu de contexto.

   Desta vez, a janela Saída mostra um log mais detalhado do processo de build.

   

Menu Enviar Comentários

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

Próximas etapas

Examinamos apenas alguns dos recursos do Visual Studio para nos familiarizarmos com a interface do usuário. Para explorar mais:

Saiba mais sobre o editor de código

Saiba mais sobre projetos e soluções

Consulte também

• Visão geral do IDE do Visual Studio
• Mais recursos do Visual Studio 2017
• Alterar o tema e as cores da fonte