Exercício – Explorar a interface do usuário do Visual Studio Code

Concluído

O Visual Studio Code fornece ferramentas para desenvolvedores que estão apenas começando, mas também são extensíveis e avançados o suficiente para desenvolvedores profissionais.

Neste exercício, você abre o Visual Studio Code e conclui um tour rápido pela interface do usuário.

Abra o Visual Studio Code e examine a página De boas-vindas

  1. Use o menu Iniciar do Windows para abrir o Visual Studio Code.

    Se você abrir o menu Iniciar do Windows, deverá ver o Visual Studio Code listado como um aplicativo adicionado recentemente. Você também pode rolar para baixo para encontrar o Visual Studio Code.

    Outra opção é digitar o Visual Studio Code na caixa Pesquisa do Windows na bandeja de inicialização na parte inferior da tela.

  2. Observe que o Visual Studio Code é aberto para uma página "Bem-vindo" que inclui alguns links e outras informações.

    Na primeira vez que você abre o Visual Studio Code, a página Boas-vindas exibe alguns passo a passo úteis, como o conteúdo Introdução ao VS Code . Se for relevante para você, examine essas informações em outro momento.

  3. Para fechar a página De boas-vindas, selecione o botão Fechar (mostrado como um X na interface).

    Cada página aberta no Editor inclui um botão Fechar (X) localizado à direita do título da página. A guia Página de boas-vindas é mostrada na parte superior esquerda da janela do Visual Studio Code, abaixo do Menu Principal. Se você passar o ponteiro do mouse sobre o X, a palavra Fechar será exibida.

Examinar a barra de atividades e a barra lateral

  1. Observe que a barra lateral à direita da barra de atividades está recolhida.

    Lembre-se de que a barra de atividades é a lista vertical de ícones à esquerda da janela do Visual Studio Code. O conteúdo da barra lateral depende do que está selecionado atualmente na barra de atividades.

  2. Posicione o ponteiro do mouse sobre a barra atividade e passe o ponteiro do mouse sobre cada um dos ícones para exibir rótulos.

    Um rótulo é exibido quando você passa o mouse sobre os ícones. Você deve ver os botões da barra de atividades mostrados na imagem a seguir:

    Captura de tela mostrando a barra atividades do Visual Studio Code com ícones rotulados.

    De cima para baixo, os ícones da barra de atividades são: Explorer, Search, Source Control, Run and Debug, Extensions, Accounts e Manage.

  3. Na barra Atividades, selecione Explorer.

    A barra lateral deve abrir e exibir informações contextuais.

  4. Observe que a barra lateral agora está rotulada explorer.

    O modo de exibição EXPLORADOR é usado para acessar/explorar pastas do projeto e arquivos de código.

    O Visual Studio Code se lembrará do histórico de trabalho e abrirá os arquivos de projeto mais recentes quando ele for aberto. Como esta é a primeira vez que você abre o Visual Studio Code, nenhuma pasta de projeto é aberta.

  5. Na barra Atividades, selecione Extensões.

  6. Observe que a barra lateral agora está rotulada EXTENSÕES.

  7. Reserve um momento para examinar as informações exibidas no modo de exibição EXTENSIONS .

    As extensões do Visual Studio Code permitem adicionar linguagens de codificação, depuradores e outras ferramentas ao ambiente para dar suporte ao fluxo de trabalho de desenvolvimento. Você instalará uma extensão C# mais adiante neste módulo.

  8. Na barra Atividades, para fechar a barra lateral EXTENSIONS , selecione Extensões.

Examinar as principais opções de menu

  1. Para exibir as opções de menu Arquivo, selecione Arquivo.

  2. Observe as opções Novo, Abrir, Salvar e Fechar listadas no menu Arquivo .

  3. Reserve um minuto para examinar as opções de menu Editar e, em seguida, cada um dos outros itens de menu de nível superior.

  4. Observe que vários dos menus incluem opções para interagir com seu código.

    Por exemplo:

    • O menu Editar inclui opções para localizar, substituir e ativar/desativar comentários de código, bem como as ações padrão de recortar, copiar, colar, desfazer e refazer.
    • O menu Seleção inclui opções para selecionar e manipular linhas de código.
    • O menu Executar inclui opções para executar e depurar seu aplicativo.
  5. No menu Terminal , selecione Novo Terminal.

  6. Reserve um momento para examinar o conteúdo do painel terminal.

    É possível alternar entre as guias (PROBLEMAS, SAÍDA, CONSOLE DE DEPURAÇÃO e TERMINAL) e passar o ponteiro do mouse sobre os botões (canto superior direito) para exibir os rótulos dos botões.

  7. Observe que o painel terminal inclui um prompt de comando.

    O painel terminal pode ser usado para executar comandos da CLI (interface de linha de comando). Você usará comandos da CLI do .NET mais adiante neste módulo.

  8. No canto superior direito do painel Terminal, selecione X (Fechar Painel).

  9. No menu Exibir, selecione Paleta de Comandos

    A paleta de comandos pode ser usada para localizar e executar todos os tipos de comandos úteis. Você não tem tempo (ou a necessidade) para examiná-los em detalhes agora, mas é bom saber onde encontrar a paleta de comandos.

  10. No prompt de paleta de comandos, digite extensões

    Observe que a lista de comandos é filtrada com base na sua entrada.

  11. Para atualizar a lista filtrada de comandos, altere extensões para ajuda

  12. Na lista de opções de comando, selecione Ajuda: Playground do Editor Interativo.

    O documento do Editor Playground aberto no Editor inclui uma lista de atividades interativas.

  13. Na lista de atividades interativas com marcadores, selecione Formatação.

  14. Reserve um minuto para ler sobre as opções de formatação.

    Você usará comandos de formatação de código durante as atividades à medida que aprender mais sobre programação em C#.

  15. Feche o documento do Editor Playground.

Isso conclui seu tour pela interface do usuário do Visual Studio Code. Depois de começar a codificar, os materiais de treinamento continuarão apontando maneiras que o Visual Studio Code pode ajudar a aumentar sua produtividade.