Um Guia Inicial para o Visual Studio Code e Git

Para aqueles que estão começando com o Visual Studio (VS) Code, pode parecer apenas um editor de código. A verdadeira potência do VS Code reside em suas extensões, terminal integrado e outras funcionalidades. Neste tutorial prático, você vai aprender como usar o Visual Studio Code ao trabalhar 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 origem usando uma única interface.

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

Visão Geral do Tutorial

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

Você irá:

• 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 trecho para uma tarefa comum que você encontrou digitando várias vezes
• Confirme o 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 um projeto interessante? Se sim, continue lendo para começar!

Pré-requisitos

Para acompanhar este tutorial de Git no Visual Studio Code, verifique se você tem o seguinte:

• VS Code – Todos os exemplos usarão o VS Code 1.44, embora versões anteriores provavelmente também funcionem.
• Terraform – Todos os exemplos usarão o Terraform para Windows v0.12.24.
• Git para 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

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

Para este projeto, você estará trabalhando a partir de um repositório no GitHub chamado VSCodeDemo. Já que o VS Code tem integração nativa com Git, você pode clonar um repositório Git sem nenhuma configuração adicional. Para fazer isso:

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

2. Escolha Git: Clone o qual o VS Code então 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:\. Uma vez que você selecionar o local do repositório, o VS Code invocará git.exe em segundo plano e clonará o repositório para o seu computador.

4. Quando estiver finalizado, o VS Code perguntará se você gostaria de abrir o repositório clonado imediatamente conforme mostrado abaixo, clique em Abrir para fazê-lo.

Você agora 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ê estará realizando 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 então criará um arquivo chamado projeto.code-workspace na pasta do repositório Git. Este espaço de trabalho agora sabe em que 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 muitos projetos diferentes. Neste tutorial, você estará trabalhando com o Terraform.

Abra um dos arquivos de configuração do Terraform no espaço de trabalho ao longo da barra lateral esquerda. Note como uma aba do editor se abre e mostra o texto, mas é só isso. Não há destaque de sintaxe usual ou qualquer outra funcionalidade. O VS Code pensa que este é um arquivo de texto simples e o exibe conforme. 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 enorme do VS Code que abre um mundo de novas funcionalidades. Neste caso, você precisa da extensão Terraform para ajudar na criação de arquivos de configuração do Terraform e na implantação de infraestrutura com o Terraform.

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

Uma vez instalado, volte para a área de trabalho e clique em um dos arquivos TF na área 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 seguinte captura de tela que o VS Code “sabe” o que é um comentário (tornando-o verde), o que é uma string (tornando-a 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 desta extensão ao usar o Terraform.

Edição de Código

Provavelmente quando você encontra um script ou arquivo de configuração na Internet, ele não será exatamente como você precisa. Você 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 do Terraform infrastructure-before.tf. 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 boa e velha funcionalidade de encontrar e substituir.

Pressione Ctrl-F e você verá um 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á, fornecendo um local para inserir a sequência pela qual substituí-la. Na captura de tela abaixo, você pode ver opções como Aa e Ab| para busca sensível a maiúsculas e também expressões regulares.

Você também pode 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.

Ao selecionar 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.

Economizando tempo com trechos de código

Vamos dizer que você está realmente se aprofundando no Terraform e no Azure e está cansado de digitar o bloco de arquivo de configuração do Terraform para criar um novo grupo de recursos 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 trecho de código no VS Code.

Relacionado:Trechos de código no VS Code: Agilize a codificação com atalhos

Para criar um trecho de código 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 “trechos de código” para filtrar a lista de opções.

4. Selecione Preferências: Configurar Trechos de Código do Usuário. Isso traz uma lista de todos os arquivos de trechos de código normalmente separados por idioma.

5. Digite “terraform” para filtrar pelos trechos de código do Terraform.

6. Selecione terraform (Terraform) para abrir o arquivo de trechos de código do Terraform (terraform.json).

Com o arquivo de trechos de código do Terraform aberto, remova todos os comentários e copie/cole o seguinte elemento JSON dentro.

{
     "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 inserir diretamente caracteres de tabulação dentro de um trecho de código. 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 trecho de código.

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

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

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

Para uma análise completa da sintaxe de trechos de código, certifique-se de verificar a Documentação de Trechos de Código no Visual Studio Code.

Enviar código para o 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, primeiro você deve usar o Visual Studio Code e o Git para fazer commit das alterações no seu repositório local clonado do Git. 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 do Git.

Se você seguiu o processo até agora, você deve ter o repositório clonado do Git 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 do Git aberto no Visual Studio Code, você terá uma visão do número de arquivos que você pode preparar e fazer commit em um repositório local do Git 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 espaço de trabalho que você salvou anteriormente (project.code-workspace). O arquivo de configuração terá um M vermelho à direita indicando que foi modificado. O arquivo do espaço de trabalho terá um U verde à direita dele porque está não rastreado, o que significa que não está atualmente sob controle de origem.

Para garantir que ambos esses arquivos retornem ao repositório GitHub, primeiro crie uma mensagem de commit útil indicando por que está commitando esses arquivos. A mensagem pode ser um resumo descritivo qualquer. Depois de escrever a mensagem de commit, stage as mudanças. Estagiar mudanças no Visual Studio Code no Git adiciona o conteúdo do arquivo à área de estagiamento preparando para um commit para o repositório.

Enquanto estiver na aba Controle de Origem, clique no ícone + ao lado de cada arquivo para estagiá-los como mostrado abaixo.

Uma vez estagiados, clique no marcador de seleção para commitar todas as mudanças estagiadas, como mostrado abaixo.

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

Sem problemas. 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, trocando meu endereço de e-mail e nome pelo seu.

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

Agora tente commitar os arquivos. Você deverá ver agora que os arquivos foram commitados para o repositório.

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

Se você estivesse trabalhando em equipe com um repositório compartilhado, o próximo passo seria enviar essas alterações de volta para o repositório do GitHub ou abrir um pedido de pull.

Conclusão

O VS Code é uma IDE rica em recursos. Não só pode ajudá-lo a escrever e entender o código melhor, mas também pode construir e fazer alterações na infraestrutura, invocar utilitários e muito mais. O VS Code fornece um 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, esta IDE é capaz de muito mais. Se você quiser aprender sobre o que o VS Code pode fazer, confira O Que Você Precisa Saber sobre o Visual Studio Code: Um Tutorial.