Руководство для начинающих по Visual Studio Code и Git

Учебники
Terraform

Те, кто впервые сталкиваются с Visual Studio (VS) Code, могут просто увидеть редактор кода. Настоящая сила VS Code заключается в его расширениях, интегрированном терминале и других функциях. В этом практическом уроке вы узнаете, как использовать Visual Studio Code, работая с репозиторием Git.

Связано:Всё, что вам нужно знать о Visual Studio Code: учебное пособие

С помощью встроенных инструментов VS Code и нескольких расширений вы будете писать код и фиксировать его в системе контроля версий, используя единый интерфейс.

Этот блог-пост является фрагментом главы из электронной книги From Admin to DevOps: The BS Way to DevOps in Azure. Если вам понравилась эта глава и вы хотите узнать о DevOps в Azure, загляните в неё!

Обзор урока

В этом уроке вы узнаете, как использовать различные функции VS Code в Windows, создавая проект с использованием Visual Studio Code и Git. Вам поручено выяснить, как создать виртуальную машину Azure с помощью Terraform в качестве небольшого проекта-доказательства концепции (POC). У вас есть VS Code, и вы слышали о его возможностях как полноценной среды разработки, и хотите проверить его в деле.

Вы собираетесь:

  • Создать рабочую область VS Code для совместного использования с вашей командой
  • Установить расширение Terraform
  • Изменить файл конфигурации Terraform в соответствии с вашими соглашениями об именовании и подпиской Azure
  • Создайте фрагмент для общей задачи, которую вы постоянно набираете
  • Закоммитить файл конфигурации Terraform в репозиторий Git

Этот учебник не предназначен для демонстрации, как использовать Terraform для развертывания виртуальных машин Azure. У нас уже есть статья о Terraform и виртуальных машинах Azure для этого. В этом учебнике мы сосредоточимся на изучении Visual Studio Code.

Звучит интересно? Если да, читайте дальше, чтобы начать!

Предварительные требования

Для следования этому учебнику по Git в Visual Studio Code убедитесь, что у вас есть следующее:

  • VS Code – Все примеры будут использовать VS Code 1.44, хотя более ранние версии, скорее всего, также будут работать.
  • Terraform – Все примеры будут использовать Terraform для Windows v0.12.24.
  • Git для Windows установлен – Все примеры будут использовать v2.26. Если вы хотите, чтобы VS Code был редактором Git по умолчанию, убедитесь, что выбрали это при установке.
Default editor for Git

Клонирование репозитория Git

Поскольку этот учебник будет фокусироваться на работе с кодом в репозитории GitHub, вашей первой задачей является клонирование этого репозитория GitHub на ваш компьютер.

Для этого проекта вы будете работать с репозиторием GitHub, который называется VSCodeDemo. Поскольку в VS Code есть встроенная поддержка Git, вы можете клонировать репозиторий Git без дополнительной конфигурации. Для этого сделайте следующее:

  1. Откройте командную палитру с помощью комбинации клавиш Ctrl-Shift-P, введите git, где вы увидите различные варианты, как показано ниже.
Cloning a Git repo with VS Code

2. Выберите Git: Clone, после чего VS Code попросит вас ввести URL репозитория. Здесь укажите URL https://github.com/NoBSDevOps/VSCodeDemo.git и нажмите Enter.

3. Выберите папку для размещения склонированных файлов проекта. В данном проекте репозиторий будет размещен в корне C:\. После выбора места для репозитория, VS Code запустит git.exe в фоновом режиме и склонирует репозиторий на ваш компьютер.

4. Когда процесс завершится, VS Code спросит, хотите ли вы открыть склонированный репозиторий немедленно, как показано ниже. Нажмите Open, чтобы сделать это.

Opening the cloned Git repo

Теперь у вас открыта папка в VS Code для репозитория Git. Теперь вам нужно “сохранить” эту открытую папку и все настройки, которые вы будете выполнять в рабочем пространстве.

Создание рабочего пространства

Теперь, когда у вас открыта папка с репозиторием Git, сохраните рабочее пространство, перейдя в меню File и выбрав пункт Save Workspace As….

Saving a VS Code workspace

Сохраните рабочую область с именем проект в папке проекта. Затем VS Code создаст файл с именем project.code-workspace в папке Git-репозитория. Теперь эта рабочая область знает, какую папку вы открыли. Теперь, когда рабочая область открывается в будущем, она автоматически открывает папку C:\VSCodeDemo.

Теперь, вместо имени папки, вы увидите имя рабочей области.

Inspecting a VS Code workspace

Настройка расширений

Расширения являются одной из самых полезных функций VS Code. Расширения позволяют добавлять функциональность, которая помогает управлять множеством различных проектов. В этом учебнике вы будете работать с Terraform.

Откройте один из файлов конфигурации Terraform в рабочей области в боковой панели слева. Обратите внимание, что открывается вкладка редактора и отображается только текст. Здесь нет обычной подсветки синтаксиса или других функций. VS Code считает, что это файл обычного текста и отображает его соответствующим образом. Исправим это.

No syntax highlighting for a Terraform configuration file

Чтобы VS Code “понимал” файл конфигурации Terraform, вам понадобится расширение. Расширения являются важной частью VS Code, которая открывает мир новой функциональности. В данном случае вам нужно расширение Terraform, чтобы помочь в создании файлов конфигурации Terraform и развертывании инфраструктуры с помощью Terraform.

Чтобы установить расширение Terraform, нажмите на кнопку расширений на панели активности и найдите terraform. Вы увидите несколько расширений, но для этого проекта нажмите Установить для верхнего результата, созданного Mikael Olenfalk. Затем VS Code установит расширение.

Installing a Terraform extension

После установки вернитесь в рабочую область и щелкните по одному из файлов TF в рабочей области. Вы сразу увидите одно из самых очевидных отличий при использовании расширения – подсветку синтаксиса.

Теперь вы можете видеть на следующем скриншоте, что VS Code “знает”, что такое комментарий (он зеленый), что такое строка (она красная) и так далее. Теперь намного проще читать файл конфигурации Terraform.

Terraform syntax-highlighting performed by the VS Code Terraform extension

В расширение Mikael’s Terrafom включено гораздо больше функциональности. Обязательно изучите все возможные преимущества, которые вы можете получить от этого расширения при использовании Terraform.

Редактирование кода

Вероятно, когда вы находите сценарий или файл конфигурации в Интернете, он не будет точно таким, как вам нужно. Вам потребуется внести в него некоторые изменения.

В данном примере учебного пособия вы хотите изменить метку блока main в файле конфигурации Terraform infrastructure-before.tf на, скажем, project. Для этого вам нужно найти и заменить некоторый текст. В VS Code есть несколько способов сделать это.

Один из наиболее распространенных способов найти строку и заменить ее другой – это функциональность поиска и замены.

Нажмите Ctrl-F и вы увидите диалоговое окно, подобное показанному на скриншоте ниже. Здесь вы можете ввести строку, которую хотите найти, и если нажать на стрелку вниз, она развернется и предоставит место для ввода строки, на которую ее нужно заменить. На скриншоте ниже вы можете видеть такие варианты, как Aa и Ab| для поиска с учетом регистра и также регулярные выражения.

Finding and replacing text

Вы также можете выполнить “поиск и замену”, используя Ctrl-D. Просто выберите текст, который хотите найти, и начните нажимать Ctrl-D. Вы заметите, что VS Code начнет выделять каждый экземпляр этой строки мигающим курсором.

Когда вы выбрали все элементы, начните вводить текст, и VS Code изменит все экземпляры одновременно, как если бы вы выбрали каждый из них по отдельности.

Synchronizing changes with multiple cursors

Экономия времени с помощью фрагментов кода

Допустим, вы действительно углубились в изучение Terraform и Azure и устали набирать блок конфигурации Terraform для создания новой группы ресурсов Azure в следующем фрагменте кода. 

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

Чтобы сэкономить время на создание этих блоков, создайте фрагмент кода в VS Code.

Связано:Фрагменты кода в VS Code: ускорение написания с помощью ярлыков

Для создания фрагмента кода в VS Code:

  1. Скопируйте блок azurerm_resource_group из файла конфигурации Terraform Infrastructure-before.tf.

2. Откройте палитру команд с помощью Ctrl-Shift-P.

3. Введите “фрагменты” для фильтрации списка вариантов.

4. Выберите Настройки: Настроить пользовательские фрагменты. Это откроет список всех файлов фрагментов, обычно разделенных по языку.

5. Введите “terraform” для фильтрации фрагментов Terraform.

6. Выберите terraform (Terraform), чтобы открыть файл фрагментов Terraform (terraform.json).

После открытия файла фрагментов Terraform удалите все комментарии и скопируйте/вставьте следующий элемент JSON. 

{
     "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"
      }
 }

Обратите внимание на использование символа \t и обратных слешей. Вы не можете напрямую вставить символы табуляции внутри фрагмента. Чтобы представить символ табуляции, вы должны использовать \t. Также вы должны экранировать символы, такие как двойные кавычки, знаки доллара, фигурные скобки и обратные слеши с помощью обратного слеша.

8. Сохраните файл terraform.json.

9. Вернитесь к файлу конфигурации Terraform и введите “rg”. Обратите внимание, что теперь появляется опция для разворачивания фрагмента.

Expanding a snippet

10. Выберите фрагмент rg, как показано выше. Обратите внимание, что теперь он разворачивается в только что созданный фрагмент с тремя выделенными элементами.

VS Code выделяет каждое из слов для использования в качестве заполнителей из-за переменных, определенных в файле фрагментов terraform.json (${1:метка блока}).

Filling in snippet placeholders

На этом этапе вы можете нажать Tab и просто вводить нужные значения, не заморачиваясь с созданием самого блока.

Для полного разбора синтаксиса фрагментов обязательно ознакомьтесь с документацией Фрагменты в Visual Studio Code.

Запишите код в Git

На данном этапе вы склонировали общедоступный репозиторий GitHub, который содержит несколько файлов конфигурации Terraform. Вы отредактировали некоторые файлы и теперь готовы вернуть эти изменения в репозиторий GitHub.

Чтобы вернуть изменения в репозиторий GitHub, вам необходимо сначала использовать Visual Studio Code и Git, чтобы зафиксировать изменения в локальном склонированном репозитории Git. Когда вы ранее клонировали репозиторий GitHub, вы загрузили не только файлы конфигурации, но и репозиторий Git.

Если вы следовали инструкциям, то теперь у вас открыт склонированный репозиторий Git с несколькими ожидающими изменениями, двумя, чтобы быть точным. Как вы это знаете? По числу в панели активности, как показано ниже.

Когда у вас открыт репозиторий Git в Visual Studio Code, вы увидите количество файлов, которые вы можете подготовить и зафиксировать в локальном репозитории Git в панели активности.

Unstaged Git commits

Щелкните на элементе Source Control слева и вы увидите два элемента: файл конфигурации Terraform infrastructure-before.tf и сохраненное ранее рабочее пространство (project.code-workspace). Файл конфигурации будет иметь красную метку M справа, указывающую на то, что он был изменен. Файл рабочего пространства будет иметь зеленую метку U справа от него, потому что он не отслеживается (untracked), что означает, что он в настоящее время не находится под контролем версий.

VS Code Git change labels

Чтобы обеспечить возвращение обоих этих файлов в репозиторий GitHub, сначала создайте полезное сообщение о коммите, указывающее, почему вы фиксируете эти файлы. Сообщение может быть любым описательным резюме. После написания сообщения о коммите, добавьте изменения в стейдж. Настройка изменений в Visual Studio Code в Git добавляет содержимое файла в область стейджинга и готовит его к коммиту в репозиторий.

Находясь в панели Управление исходным кодом, щелкните на значок + рядом с каждым файлом, чтобы добавить их в стейджинг, как показано ниже.

Staging Git changes

После добавления в стейджинг щелкните на галочку, чтобы сделать коммит всех добавленных изменений, как показано ниже.

Committing Git changes

Вероятно, вы получите сообщение об ошибке, указывающее, что вам нужно настроить user.name и user.email в Git.

Your Git user is not defined in the Git configuration

Нет проблемы. Вам просто нужно предоставить Git необходимую информацию. Для этого перейдите в ваш интегрированный терминал VS Code и выполните следующие две команды, изменяя мой адрес электронной почты и имя на свои. 

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

Теперь попробуйте закоммитить файлы. Теперь вы должны увидеть, что файлы фиксируются в репозитории.

Вы можете добавить все измененные файлы в стейджинг, не щелкая вручную на + рядом с каждым файлом, сделав коммит всех сразу. VS Code автоматически добавит все файлы в стейджинг для вас.

Если вы работаете в команде с общим репозиторием, следующим шагом будет отправить эти изменения обратно в репозиторий GitHub или открыть запрос на включение изменений.

Заключение

VS Code – это IDE с богатым функционалом. Она не только помогает вам лучше писать и понимать код, но и создавать и вносить изменения в инфраструктуру, вызывать утилиты и многое другое. VS Code предоставляет вам одно место для управления всеми вашими усилиями в разработке.

Хотя этот учебник охватывает только часть возможностей VS Code, эта IDE способна на гораздо большее. Если вы хотите узнать больше о возможностях VS Code, ознакомьтесь с Что нужно знать о Visual Studio Code: Руководство.

Source:
https://adamtheautomator.com/visual-studio-code-git/