Guia para Iniciantes do Visual Studio Code e Git

Aqueles que são novos no Visual Studio (VS) Code podem apenas ver um editor de código. O verdadeiro poder do VS Code está em suas extensões, terminal integrado e outras funcionalidades. Neste tutorial prático, você vai aprender como usar o Visual Studio Code trabalhando com um repositório Git.

Relacionado:O que você precisa saber sobre o Visual Studio Code: Um tutorial

Usando as ferramentas integradas do VS Code e algumas extensões, você vai escrever código e commitar esse código no controle de versão usando uma única interface.

Este post é um trecho de um capítulo do eBook De Admin para DevOps: O caminho BS para DevOps no Azure. Se você gostou deste capítulo e quer aprender mais sobre como fazer DevOps no Azure, confira!

Visão geral do tutorial

Neste tutorial, você vai aprender como usar diversas funcionalidades do VS Code no Windows, construindo um projeto usando o Visual Studio Code e o Git. Você foi encarregado de descobrir como criar uma VM do Azure com o Terraform como um pequeno projeto de prova de conceito (POC). Você possui o VS Code e já ouviu falar de sua capacidade como uma IDE completa e quer testá-lo.

Você vai:

• Criar um espaço de trabalho no VS Code para compartilhar com sua equipe
• Instalar a extensão do Terraform
• Modificar o arquivo de configuração do Terraform para se adequar à sua convenção de nomenclatura e assinatura do Azure
• Crie um snippet para uma tarefa comum que você se encontra digitando repetidamente
• Commit do arquivo de configuração do Terraform para um repositório Git

Este tutorial não tem como objetivo mostrar como usar o Terraform para implantar VMs do Azure. Já temos um artigo sobre Terraform e VMs do Azure para isso. Este tutorial se concentrará em aprender o Visual Studio Code.

Isso parece ser um projeto interessante? Se sim, continue lendo para começar!

Pré-requisitos

Para acompanhar este tutorial do Visual Studio Code Git, certifique-se de ter o seguinte:

• VS Code – Todos os exemplos usarão o VS Code 1.44, embora versões anteriores também funcionem.
• Terraform – Todos os exemplos usarão o Terraform para Windows v0.12.24.
• Git for Windows instalado – Todos os exemplos usarão a versão 2.26. Se você deseja que o VS Code seja o editor padrão do Git, certifique-se de selecioná-lo durante a instalação.

Clone o Repositório Git

Já que este tutorial vai se concentrar em trabalhar com código em um repositório do GitHub, sua primeira tarefa é clonar esse repositório do GitHub para o seu computador local.

Para este projeto, você estará trabalhando a partir de um repositório do GitHub chamado VSCodeDemo. Como o VS Code possui integração nativa com o Git, você pode clonar um repositório Git sem configurações adicionais. Para fazer isso:

1. Abra a paleta de comandos com Ctrl-Shift-P, digite git, onde você verá várias opções, como mostrado abaixo.

2. Escolha Git: Clone e o VS Code irá solicitar a URL do repositório. Aqui, forneça a URL https://github.com/NoBSDevOps/VSCodeDemo.git e pressione Enter.

3. Escolha uma pasta para colocar os arquivos do projeto clonado. Este projeto colocará a pasta do repositório na raiz de C:\. Assim que você selecionar a localização do repositório, o VS Code invocará git.exe em segundo plano e clonará o repositório em seu computador.

4. Quando terminar, o VS Code perguntará se você deseja abrir o repositório clonado imediatamente, como mostrado abaixo, clique em Abrir para fazer isso.

Agora você tem uma pasta aberta no VS Code para o repositório Git. Agora você precisa “salvar” esta pasta aberta e todas as configurações que você fará em um espaço de trabalho.

Criando um Espaço de Trabalho

Agora que você tem uma pasta aberta contendo um repositório Git, salve um espaço de trabalho indo até o menu Arquivo e clicando em Salvar Espaço de Trabalho Como….

Salve o espaço de trabalho como projeto na pasta do projeto. O VS Code criará um arquivo chamado project.code-workspace na pasta do repositório Git. Este espaço de trabalho agora sabe qual pasta você tinha aberto. Agora, quando o espaço de trabalho for aberto no futuro, ele abrirá automaticamente a pasta C:\VSCodeDemo.

Agora, em vez de um nome de pasta, você verá o nome do espaço de trabalho.

Configurando Extensões

As extensões são uma das características mais úteis do VS Code. As extensões permitem que você adicione funcionalidades para ajudar a gerenciar diversos projetos. Neste tutorial, você irá trabalhar com o Terraform.

Abra um dos arquivos de configuração do Terraform na barra lateral esquerda. Observe como uma aba de editor é aberta e exibe o texto, mas só isso. Não há destaque de sintaxe usual ou qualquer outra funcionalidade. O VS Code considera este um arquivo de texto simples e o exibe de acordo. Vamos corrigir isso.

Para que o VS Code “entenda” um arquivo de configuração do Terraform, você precisa de uma extensão. As extensões são uma parte importante do VS Code que abrem um mundo de novas funcionalidades. Neste caso, você precisa da extensão do Terraform para auxiliar na criação de arquivos de configuração do Terraform e implantação de infraestrutura com o Terraform.

Para instalar a extensão do Terraform, clique no botão das extensões na barra de atividade e pesquise por terraform. Você verá várias extensões aparecerem, mas para este projeto, clique em Instalar para o resultado principal criado por Mikael Olenfalk. O VS Code então instalará a extensão.

Depois de instalado, volte para o espaço de trabalho e clique em um dos arquivos TF no espaço de trabalho. Você verá imediatamente uma das diferenças mais óbvias ao usar uma extensão, a coloração da sintaxe.

Agora você pode ver na captura de tela a seguir que o VS Code “sabe” o que é um comentário (ao torná-lo verde), o que é uma string (ao torná-la vermelha) e assim por diante. Agora é muito mais fácil ler um arquivo de configuração do Terraform.

Há muito mais funcionalidade incluída na extensão Terrafom do Mikael. Certifique-se de investigar todos os benefícios potenciais que você pode obter com esta extensão ao usar o Terraform.

Edição de código

O mais provável é que, quando você encontrar um script ou arquivo de configuração na Internet, ele não esteja exatamente como você precisa. Você vai precisar modificá-lo de alguma forma.

No exemplo deste tutorial, você gostaria de alterar o rótulo do bloco main no arquivo de configuração infrastructure-before.tf do Terraform para talvez project. Para fazer isso, você precisará encontrar e substituir algum texto. No VS Code, existem várias maneiras de fazer isso.

Uma das maneiras mais comuns de encontrar uma string e substituí-la por outra é a funcionalidade de busca e substituição.

Pressione Ctrl-F e você verá uma caixa de diálogo semelhante à captura de tela a seguir. Aqui você pode digitar a sequência que deseja encontrar e, se clicar na seta para baixo, ela se expandirá e fornecerá um espaço para inserir uma sequência para substituí-la. Na captura de tela abaixo, você pode ver opções como Aa e Ab| para pesquisa com diferenciação entre maiúsculas e minúsculas e também expressões regulares.

Também é possível realizar uma “localizar e substituir” usando Ctrl-D. Basta selecionar o texto que deseja encontrar e começar a pressionar Ctrl-D. Você verá que o VS Code começará a destacar cada instância dessa sequência com um cursor piscando.

Quando você tiver selecionado todos os itens, comece a digitar e o VS Code alterará todas as instâncias de uma vez, assim como se você as tivesse selecionado individualmente.

Economize tempo com snippets

Vamos supor que você esteja realmente se envolvendo com o Terraform e o Azure e esteja cansado de digitar o bloco de configuração do arquivo Terraform para criar um novo grupo de recursos do Azure no seguinte trecho de código.

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

Para economizar tempo na criação desses blocos, crie um snippet no VS Code.

Relacionado:Snippets do VS Code: acelere a codificação com atalhos

Para criar um snippet no VS Code:

1. Copie o bloco azurerm_resource_group do arquivo de configuração do Terraform Infrastructure-before.tf.

2. Abra a paleta de comandos com Ctrl-Shift-P.

3. Digite “snippets” para filtrar a lista de opções.

4. Selecione Preferências: Configurar Snippets do Usuário. Isso abrirá uma lista de todos os arquivos de snippet, normalmente separados por linguagem.

5. Digite “terraform” para filtrar os snippets relacionados ao Terraform.

6. Selecione terraform (Terraform) para abrir o arquivo de snippets do Terraform (terraform.json).

Com o arquivo de snippets do Terraform aberto, remova todos os comentários e copie/cole o seguinte elemento JSON dentro dele.

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

Observe o uso de \t e as barras invertidas. Você não pode colocar diretamente caracteres de tabulação dentro de um snippet. Para representar um caractere de tabulação, você deve usar \t. Além disso, você deve escapar caracteres como aspas duplas, cifrões, chaves e barras invertidas com uma barra invertida.

8. Salve o arquivo terraform.json.

9. Volte para o arquivo de configuração do Terraform e digite “rg”. Observe que agora você vê uma opção para expandir um snippet.

10. Selecione o snippet rg conforme mostrado acima. Observe que ele agora se expande para o snippet que você acabou de criar, com três itens destacados.

O VS Code destacou cada uma das palavras para atuar como espaços reservados devido às variáveis definidas no arquivo de snippets terraform.json (${1:label de bloco}).

Neste ponto, você pode pressionar Tab e simplesmente digitar os valores que precisa, sem se preocupar em como criar o bloco em si.

Para obter uma explicação completa sobre a sintaxe de snippets, não deixe de consultar a documentação de Snippets no Visual Studio Code.

Cometer código no Git

Neste ponto, você clonou um repositório público do GitHub que contém alguns arquivos de configuração do Terraform. Você editou alguns arquivos e agora está pronto para enviar essas alterações de volta para o repositório do GitHub.

Para enviar as alterações de volta para o repositório do GitHub, você deve primeiro usar o Visual Studio Code e o Git para confirmar as alterações no repositório Git local clonado. Quando você clonou o repositório do GitHub anteriormente, você baixou não apenas os arquivos de configuração, mas também um repositório Git.

Se você seguiu o processo, agora deve ter o repositório Git clonado aberto com algumas alterações pendentes, duas para serem exatas. Como você sabe disso? Observando o número na barra de atividades, como mostrado abaixo.

Quando você tem um repositório Git aberto no Visual Studio Code, você terá uma visão do número de arquivos que você pode preparar e confirmar em um repositório Git local na barra de atividades.

Clique no item Controle de Origem à esquerda e você verá dois itens; o arquivo de configuração do Terraform infrastructure-before.tf e o workspace que você salvou anteriormente (project.code-workspace). O arquivo de configuração terá um M vermelho à direita, indicando que foi modificado. O arquivo do workspace terá um U verde à direita, pois está não rastreado, o que significa que atualmente não está sob controle de origem.

Para garantir que ambos os arquivos voltem para o repositório do GitHub, primeiro crie uma mensagem de commit útil indicando por que você está commitando esses arquivos. A mensagem pode ser qualquer resumo descritivo. Depois de escrever uma mensagem de commit, stage as alterações. O estadiamento de alterações no Visual Studio Code com o Git adiciona o conteúdo do arquivo à área de estadiamento, preparando-o para um commit no repositório.

Enquanto estiver no painel Source Control, clique no ícone + ao lado de cada arquivo para estagiá-los, como mostrado abaixo.

Uma vez estagiados, clique no sinal de check para commitar todas as alterações estagiadas, como mostrado abaixo.

Provavelmente, você receberá uma mensagem de erro indicando que precisa configurar um user.name e user.email no Git.

Não há problema. Você simplesmente precisa fornecer ao Git as informações de que ele precisa. Para fazer isso, vá para o terminal integrado do seu VS Code e execute os dois comandos a seguir, alterando meu endereço de e-mail e nome para o seu.

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

Agora tente commitar os arquivos. Agora você deve ver que os arquivos são commitados no repositório.

Você pode estagiar todos os arquivos alterados sem clicar manualmente no + ao lado de cada arquivo, commitando todos de uma vez. O VS Code irá estagiar automaticamente todos os arquivos para você.

Se você estivesse trabalhando em uma equipe com um repositório compartilhado, o próximo passo seria fazer o push dessas alterações de volta para o repositório do GitHub ou abrir uma solicitação de pull.

Conclusão

O VS Code é um IDE rico em recursos. Ele não apenas ajuda você a escrever e entender melhor o código, mas também a criar e fazer alterações na infraestrutura, invocar utilitários e muito mais. O VS Code oferece um único lugar para gerenciar todos os seus esforços de desenvolvimento.

Embora este tutorial tenha abordado apenas uma parte do que o VS Code pode fazer, este IDE é capaz de muito mais. Se você deseja aprender sobre o que o VS Code pode fazer, confira O que você precisa saber sobre o Visual Studio Code: um tutorial.