↓Перейти к содержанию
  1. Git: руководства и команды/

Git в VS Code: как пользоваться встроенным контролем версий

·9 минут·

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

В этом руководстве мы рассмотрим всё: от базовых операций (staging, коммиты, push) до продвинутых функций (разрешение конфликтов, интерактивный rebase) и полезных расширений (GitLens, Git Graph).

Встроенная интеграция Git в VS Code #

VS Code обнаруживает Git репозитории автоматически. Если вы откроете папку с Git проектом, VS Code сразу включит интеграцию.

Проверка что Git работает #

# Убедитесь что Git установлен
git --version
# git version 2.45.0

# В VS Code откройте панель Source Control
# Ctrl+Shift+G на Windows/Linux
# Cmd+Shift+G на macOS

# Если вы видите панель с ветками и файлами - всё работает!

Если Git не установлен, VS Code предложит вам установить его. Следуйте инструкциям в всплывающем окне.

Панель Source Control (Ctrl+Shift+G) #

Панель Source Control — это главное место для работы с Git в VS Code. Вот что вы видите:

Source Control
═════════════════════════════════════

REPOSITORIES
└─ awesome-project

Changes (5)
├─ U src/app.js           (Untracked - новый файл)
├─ M src/config.js        (Modified - изменен)
├─ A src/utils.js         (Added - добавлен)
├─ D src/old.js           (Deleted - удален)
└─ M README.md            (Modified)

STAGED CHANGES (2)
├─ A src/utils.js
└─ M src/config.js

Иконки:

  • U (Untracked) — файл не отслеживается Git
  • M (Modified) — файл изменен
  • A (Added) — файл добавлен в staging
  • D (Deleted) — файл удален
  • R (Renamed) — файл переименован
  • C (Copied) — файл скопирован

Поле для сообщения коммита #

В верхней части Source Control панели находится поле для ввода сообщения коммита. Это стандартное сообщение коммита, но вы вводите его прямо в VS Code:

┌─────────────────────────────────────┐
│ Commit message: Fix login bug       │
│                                     │
│ [Commit] [Commit and Push]          │
│ [More Options ...]                  │
└─────────────────────────────────────┘

Базовые операции в UI #

Staging файлов (добавление в индекс) #

Есть несколько способов добавить файл в staging:

Способ 1: Клик на иконку плюса

  1. Наведите мышь на файл в панели Changes
  2. Нажмите на значок плюса

Способ 2: Context menu

  1. Щелкните правой кнопкой на файле
  2. Выберите “Stage Changes”

Способ 3: Стрелка рядом с “Changes”

  1. Нажмите стрелку “+” рядом с заголовком Changes
  2. Это добавит ВСЕ файлы в staging

Unstaging файлов (удаление из индекса) #

  1. Перейдите на вкладку STAGED CHANGES
  2. Нажмите на значок минуса рядом с файлом
  3. Или правый клик → “Unstage Changes”

Коммит #

1. Введите сообщение коммита в поле сверху
2. Нажмите Ctrl+Enter (или Cmd+Enter на macOS)
   Или нажмите кнопку [Commit]
3. Коммит создается и появляется в истории

Push #

После коммита нужно отправить изменения на сервер:

Способ 1: Кнопка Sync (самая удобная)
- В статус-баре внизу VS Code нажмите кнопку "Sync"
- Это выполняет pull + push

Способ 2: Source Control меню
- В панели Source Control нажмите три точки (...)
- Выберите "Push"

Способ 3: Терминал
- Ctrl+` для открытия терминала
- git push origin <branch>

Pull #

Способ 1: Кнопка Sync
- Нажмите кнопку Sync в статус-баре
- Это выполняет git pull (pull + push если есть что пушить)

Способ 2: Меню
- Нажмите три точки в Source Control
- Выберите "Pull"

Работа с ветками #

Создание новой ветки #

Способ 1: Через статус-бар
1. Нажмите на название ветки в статус-баре (внизу слева)
2. Выберите "Create new branch..."
3. Введите имя новой ветки
4. Выберите откуда ответвляться (обычно main)

Способ 2: Через командную палитру
1. Nажмите Ctrl+Shift+P (Cmd+Shift+P на macOS)
2. Введите "Git: Create Branch"
3. Введите имя ветки

Переключение между ветками #

Способ 1: Клик на статус-бар
1. Нажмите на название текущей ветки в статус-баре
2. Выберите целевую ветку из списка
3. VS Code переключится на эту ветку

Способ 2: Командная палитра
1. Ctrl+Shift+P
2. Введите "Git: Checkout to..."
3. Выберите ветку

Способ 3: Расширение Git Graph (удобнее)
- Вы видите граф всех веток
- Щелкните на ветку чтобы переключиться

Удаление ветки #

1. Нажмите на название ветки в статус-баре
2. Выберите ветку которую хотите удалить
3. Нажмите иконку трашки рядом с названием (или Ctrl+Shift+D)
4. Подтвердите удаление

Публикация ветки (push локальной ветки) #

Когда вы создали локальную ветку и хотите отправить её на GitHub:

Способ 1: Кнопка "Publish Branch"
- В Source Control нажмите кнопку "Publish Branch" (появляется для новых веток)

Способ 2: Через командную палитру
- Ctrl+Shift+P
- Введите "Git: Publish to..."
- Выберите remote

Способ 3: Терминал
- git push -u origin branch-name

Разрешение конфликтов слияния #

Когда вы делаете merge или pull и возникают конфликты, VS Code помогает их разрешить красивым интерфейсом.

Как VS Code показывает конфликты #

// Файл с конфликтом

<<<<<<< HEAD
const config = {
  port: 3000,
  host: 'localhost'
}
=======
const config = {
  port: 8080,
  host: '0.0.0.0'
}
>>>>>>> feature-branch

VS Code выделяет конфликты цветом и показывает кнопки для разрешения:

┌──────────────────────────────────────────┐
│ Accept Current | Accept Incoming | Both  │
│ Compare                                  │
└──────────────────────────────────────────┘

Разрешение конфликтов #

Способ 1: Клик на кнопку

  • Accept Current — сохранить ваш код (HEAD)
  • Accept Incoming — взять их код (feature-branch)
  • Both — оставить оба варианта

Способ 2: Редактирование вручную

  1. Удалите маркеры конфликта (<<<<<<<, =======, >>>>>>>)
  2. Оставьте нужный код
  3. Сохраните файл

Способ 3: Merge Editor (более удобно)

  1. Нажмите “Resolve in Merge Editor”
  2. VS Code откроет специальный интерфейс с двумя версиями
  3. Выбирайте какой код оставить в каждом конфликте
  4. Нажмите “Complete Merge”

После разрешения конфликтов #

1. Все файлы в конфликте должны быть отредактированы
2. В Source Control добавьте их (stage)
3. Введите сообщение коммита "Merge branch..." (автоматически)
4. Нажмите Commit
5. Push результат

Расширение GitLens: продвинутые возможности #

GitLens — это самое популярное расширение для работы с Git в VS Code. Оно добавляет множество полезных функций.

Установка #

1. Откройте Extensions (Ctrl+Shift+X)
2. Поищите "GitLens"
3. Нажмите Install на расширение от Eric Amodio
4. Перезагрузите VS Code

Основные функции GitLens #

1. Git Blame (аннотации авторства)

Нажмите иконку авторства (обычно рядом с номером строки)
или используйте Toggle File Blame через командную палитру

Вы увидите:
    const port = 3000;  // John Smith 5 days ago | Refactor: move config
    // Нажмите на это - откроется коммит с деталями

2. Git History (история файла)

Ctrl+Shift+P → "GitLens: Show File History"
Вы видите все коммиты, которые изменили этот файл

3. Branch comparison (сравнение веток)

Ctrl+Shift+P → "GitLens: Compare Branch with..."
Выбирите две ветки
Видите все различия между ними

4. Interactive Rebase Editor

Когда вы выполняете interactive rebase
(git rebase -i)

GitLens показывает красивый интерфейс
вместо текстового редактора

5. Commit Graph (граф коммитов)

Ctrl+Shift+P → "GitLens: Show Commit Graph"
Видите полный граф истории всех веток
Можете кликать на коммиты чтобы посмотреть детали

Настройки GitLens #

Ctrl+, → Extensions → GitLens
Некоторые полезные настройки:

- Gitlens › Blame › Line: Always Show Author
  (всегда показывать автора каждой строки)

- Gitlens › Strings › Commit › Format
  (как форматировать вывод информации о коммите)

- Gitlens › Integrations › GitHub › Enabled
  (интеграция с GitHub для PR информации)

Расширение Git Graph: визуализация истории #

Git Graph — ещё одно полезное расширение для визуализации истории коммитов.

Установка #

1. Extensions (Ctrl+Shift+X)
2. Поищите "Git Graph"
3. Install от mhutchie

Использование #

1. В Source Control нажмите иконку графа (Git Graph icon)
2. Откроется вкладка с визуальным графом всех коммитов и веток
3. Вы можете:
   - Щелкнуть на коммит чтобы посмотреть детали
   - Щелкнуть на ветку чтобы переключиться
   - Правый клик на коммит для дополнительных операций

Terminal интеграция (Ctrl+`) #

VS Code имеет встроенный терминал, который удобен для выполнения команд Git когда нужно что-то более сложное:

# Откройте терминал
Ctrl+` (обратный апостроф)

# Работайте с Git как обычно
git log --oneline --graph --all
git rebase -i HEAD~5
git reset --hard origin/main
git stash
# и т.д.

Преимущество встроенного терминала:

  • Находится в VS Code, не нужно отвлекаться
  • Путь уже установлен на проект
  • Git credentials обычно уже настроены

Настройки Git в VS Code #

Откройте Settings (Ctrl+,) и поищите “git”:

Важные настройки:

1. Git: Auto Fetch
   - Автоматически fetch с удаленного репозитория
   - Полезно чтобы быть в курсе изменений

2. Git: Auto Refresh
   - Автоматически обновлять Source Control
   - Когда файлы меняются в терминале

3. Git: Confirm Sync
   - Показывать подтверждение перед sync
   - Может помочь избежать случайного push

4. Git: Default Clone Directory
   - Куда клонировать репозитории по умолчанию

5. Files: Auto Save
   - Автосохранение файлов перед коммитом
   - Удобно чтобы не забыть сохранить

Практический workflow #

Вот как выглядит типичный день с Git в VS Code:

# 1. Утром: синхронизируйтесь с main
- Откройте VS Code
- Нажмите на название ветки в статус-баре
- Выберите main
- Нажмите кнопку Sync

# 2. Создайте новую feature ветку
- Нажмите на название ветки
- Выберите "Create new branch..."
- Введите "feature/new-awesome-thing"

# 3. Работайте и делайте коммиты
- Вносите изменения в файлы
- В Source Control видите Changed files
- Нажимаете + чтобы stage файлы
- Введите сообщение коммита
- Ctrl+Enter чтобы коммитить

# 4. Несколько раз в день: commit + push
- Ctrl+Enter для коммита
- Sync в статус-баре для push

# 5. Когда готово: создайте Pull Request
- git push -u origin feature/new-awesome-thing (уже сделано)
- На GitHub создайте PR
- Попросите review у коллег

# 6. После одобрения: merge
- На GitHub нажмите "Merge pull request"
- В VS Code переключитесь на main
- Нажмите Sync чтобы pull новые изменения

FAQ #

В: Почему VS Code не видит мой Git репозиторий? О: Убедитесь что:

  1. Git установлен (git --version)
  2. Вы открыли папку с .git директорией
  3. VS Code перезагружена (Ctrl+Shift+P → Reload Window)

В: Как добавить другой Git account в VS Code? О: Обычно VS Code использует системные credentials. Если нужен другой account:

  1. Используйте GitHub Personal Access Token вместо пароля
  2. Или настройте SSH ключи: ssh-keygen -t ed25519

В: Могу ли я делать interactive rebase в VS Code? О: Да! Открройте терминал (Ctrl+`) и используйте:

git rebase -i HEAD~5
# GitLens покажет красивый интерфейс

В: Как посмотреть diff перед коммитом? О: Нажмите на файл в Source Control, откроется diff вьювер:

Слева: старая версия
Справа: новая версия
Цветовое выделение изменений

В: Почему push заставляет меня вводить пароль каждый раз? О: Используйте SSH вместо HTTPS:

  1. Сгенерируйте SSH ключ: ssh-keygen -t ed25519
  2. Добавьте публичный ключ на GitHub
  3. Используйте [email protected]:user/repo.git вместо https://

Заключение #

VS Code предоставляет мощную встроенную интеграцию с Git, которая работает для 95% повседневных операций. Для быстрого start:

  1. Базовые операции: используйте Source Control панель
  2. Продвинутое: установите GitLens и Git Graph
  3. Сложное: используйте встроенный терминал (Ctrl+`)

Комбинация VS Code UI + GitLens + терминал дает вам всю мощь Git без необходимости работать исключительно в командной строке.

Читайте также:

  • /ru/git/interfejs-git/ — обзор Git интерфейсов
  • /ru/git/konflikty-git-merge/ — как разрешать конфликты
  • /ru/git/github-desktop/ — альтернатива: GitHub Desktop

По теме #