Git diff в VS Code: как смотреть изменения (аналог IntelliJ IDEA)

Переходите с IntelliJ IDEA на VS Code и не можете найти привычный Ctrl+D для просмотра diff’ов? Спешу вас успокоить — в VS Code есть несколько способов смотреть изменения, и некоторые из них даже удобнее, чем в IDEA. В этой статье разберём все варианты.

Различие подходов: IDEA vs VS Code #

В IntelliJ IDEA всё просто и логично: вы открываете список изменений (Change List), выбираете файл и нажимаете Ctrl+D — видите side-by-side diff. В VS Code подход немного другой. Здесь нет одного универсального сочетания клавиш, но есть несколько специализированных способов в зависимости от того, где вы находитесь и что именно хотите увидеть.

Хорошая новость: все способы просты, и вскоре вы втянетесь. Давайте рассмотрим их по порядку.

Способ 1: Source Control панель (встроенный, без расширений) #

Это самый простой и рекомендуемый способ для новичков в VS Code.

Открыть панель:

• Ctrl+Shift+G (Windows/Linux) или Cmd+Shift+G (Mac)
• Или кликните на иконку “Source Control” в левой панели (выглядит как ветка)

Вы видите список файлов, разделённые на “Changes”, “Staged Changes” и “Untracked Files”.

Для просмотра diff:

1. Просто кликните на любой файл в списке — справа откроется side-by-side diff editor
2. Слева старая версия, справа новая
3. Цветовая разметка: красные строки удалены, зелёные добавлены, оранжевые изменены

┌─────────────────────────────────────┐
│ Source Control (Ctrl+Shift+G)       │
├─────────────────────────────────────┤
│ CHANGES                             │
│  📄 index.js                    👈 клик сюда
│  📄 package.json                    │
│ STAGED CHANGES                      │
│  📄 README.md                       │
└─────────────────────────────────────┘
                     ↓
        ╔═══════════════════════╗
        ║   Side-by-side diff   ║
        ║  слева ← → справа     ║
        ╚═══════════════════════╝

Для мас-операций можно использовать встроенный терминал и команду git diff, но это уже для более опытных.

Способ 2: Inline diff в редакторе #

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

Что это:

• Синие/зелёные/красные полоски появляются слева от номеров строк (в “gutter”)
• Каждый цвет значит своё: красный — удаления, зелёный — добавления, оранжевый — изменения

Для просмотра diff:

1. Кликните на цветную полоску в gutter
2. Откроется inline diff — показ удалённых/новых строк прямо в месте изменения
3. Вы увидите две кнопки: Revert (откатить) и Stage (добавить в индекс)

Дополнительно:

• Наведите мышь на полоску и видите preview изменения
• Это прямой аналог IDEA’s “Show diff in editor gutter”

Способ 3: Команда “Open Changes” — аналог Ctrl+D #

Если вам нужен классический side-by-side diff, как в IDEA, используйте эту команду.

Способ 1 (через палитру команд):

Ctrl+Shift+P (или Cmd+Shift+P на Mac)
Введите: Git: Open Changes
Нажмите Enter

Способ 2 (контекстное меню):

1. Кликните правой кнопкой на файл в Source Control панели
2. Выберите Open Changes (или Open File)

Результат:

• Откроется полноэкранный side-by-side diff
• Можно быстро прыгать между изменениями
• Очень похоже на IDEA, честно сказать

Это самый близкий аналог Ctrl+D из IntelliJ IDEA. Если вы помните, что есть команда “Open Changes”, этого обычно достаточно для повседневной работы.

Способ 4: GitLens Commit Graph (Community Edition) #

GitLens — это мощное расширение, которое отвечает на популярный поисковый запрос “gitlens commit graph community edition”. Хорошая новость: Commit Graph полностью бесплатен даже в Community Edition (начиная с версии 14).

Установка:

1. Откройте Extensions (Ctrl+Shift+X)
2. Найдите “GitLens” от Eric Amodio
3. Нажмите Install (обычно это пара килобайт)

Открыть Commit Graph:

Ctrl+Shift+P
GitLens: Show Commit Graph

Или найдите иконку графа в Source Control панели.

Что вы получаете:

• Полное дерево коммитов с ветками
• Информация об авторах, датах, сообщениях
• Список всех файлов, изменённых в каждом коммите

Для просмотра diff конкретного коммита:

1. Кликните на коммит в графе
2. Справа откроется список изменённых файлов
3. Кликните на файл → откроется side-by-side diff

Community vs Pro:

• Community Edition включает Commit Graph со всеми базовыми функциями
• Pro-версия добавляет продвинутые фильтры, сортировку и облачную синхронизацию
• Для большинства разработчиков Community вполне достаточно

Способ 5: Git Graph extension #

Если Commit Graph от GitLens вам не нравится, есть альтернатива — Git Graph, минималистичный и быстрый граф коммитов.

Установка:

Extensions (Ctrl+Shift+X) → поиск "Git Graph"
Установить

Открыть:

• В Source Control панели найдите иконку графа
• Или используйте команду: Git Graph: View Git Graph

Использование для diff:

1. Откройте граф
2. Кликните на коммит (видите список файлов)
3. Кликните на файл → откроется diff в отдельном окне

По функциям примерно аналогично Commit Graph от GitLens, но минималистичнее.

Сравнение с IntelliJ IDEA — быстрая шпаргалка #

Полезные горячие клавиши для работы с diff #

Когда вы уже находитесь в diff-редакторе:

Полный список можно посмотреть в File → Preferences → Keyboard Shortcuts и поискать “diff”.

FAQ: ответы на частые вопросы #

Как включить side-by-side diff по умолчанию?

VS Code уже показывает side-by-side diff по умолчанию. Если хотите изменить на inline, откройте:

Settings (Ctrl+,) → поиск "diff.renderSideBySide"

Убедитесь, что чекбокс отмечен.

Как сравнить два произвольных файла (не текущие изменения)?

1. Откройте первый файл
2. Откройте палитру команд: Ctrl+Shift+P
3. Введите: File: Compare with…
4. Выберите второй файл для сравнения

Откроется diff с обоими файлами.

Как смотреть diff конкретного коммита?

1. Откройте GitLens Commit Graph (Ctrl+Shift+P → GitLens: Show Commit Graph)
2. Найдите нужный коммит
3. Кликните на него, справа откроется список файлов
4. Кликните на файл для просмотра diff

Или используйте встроенный терминал:

git show <commit-hash>:path/to/file

Что если я хочу быстро откатить изменение, не открывая diff?

В Source Control панели кликните правой кнопкой на файл и выберите Revert Changes или наведите мышь на файл и нажмите кнопку “Revert” (выглядит как стрелка влево).

Заключение #

VS Code может быть не менее удобен для работы с git, чем IntelliJ IDEA, если вы знаете, где искать функции. Вот краткая инструкция для миграции:

1. Для быстрого diff: Ctrl+Shift+G → клик на файл
2. Для command-style как в IDEA: Ctrl+Shift+P → “Git: Open Changes”
3. Для полного графа коммитов: установите GitLens и используйте Commit Graph
4. Для inline diff: смотрите цветные полоски в gutter слева от номеров строк

Дальше — дело привычки. Через неделю вы забудете, что когда-то помнили Ctrl+D, потому что Source Control панель станет вашей второй натурой.

Если вы уже работаете с git в VS Code и знаете удобные приёмы, которых нет в этой статье, делитесь в комментариях. А если хотите разобраться в других аспектах работы с git, смотрите наши статьи о базовых командах git и различиях интеграции git между VS Code и IntelliJ IDEA.

По теме #

• Git в VS Code
• git diff
• Git в IntelliJ IDEA
• Как посмотреть изменения в Git