GitGitHubVS Code

Git — полный
учебник для новичков

От установки до командной работы на GitHub. Понятно, с примерами и скриншотами. Читай по порядку или сразу переходи к нужному разделу.

Прогресс чтения: 0%

📚 Содержание

1

Что такое Git и зачем он нужен

Git — это система контроля версий. Представь, что ты пишешь книгу и каждый день сохраняешь её как книга_v1.docx, книга_v2_финал.docx, книга_ТОЧНО_ФИНАЛ.docx… Git делает то же самое, но умно: он сохраняет только изменения, а не весь файл целиком, и позволяет вернуться к любому моменту в истории.

📸 Снимки истории

Каждый сохранённый момент называется «коммитом». Ты можешь вернуться к любому из них.

🌿 Ветки

Можно работать над разными фичами одновременно, не мешая основному коду.

👥 Командная работа

Несколько человек редактируют один проект — Git следит, чтобы никто не затёр чужое.

☁️ Облако (GitHub)

Код хранится не только на твоём компьютере, но и в интернете — всегда есть резервная копия.

Git vs GitHub — в чём разница?

  ╔══════════════════════╗          ╔══════════════════════╗
  ║         GIT          ║          ║        GITHUB        ║
  ║   (программа на ПК)  ║  ─────▶  ║  (сайт в интернете)  ║
  ╠══════════════════════╣          ╠══════════════════════╣
  ║ • Хранит историю     ║          ║ • Облачное хранилище ║
  ║ • Создаёт ветки      ║          ║ • Совместная работа  ║
  ║ • Работает офлайн    ║          ║ • Pull Requests      ║
  ║ • Установлен на ПК   ║          ║ • Issues, wiki       ║
  ╚══════════════════════╝          ╚══════════════════════╝
        ↑ бесплатно                       ↑ бесплатно
💡 Аналогия

Git — это как программа Word с функцией «История версий», установленная на твоём компьютере.
GitHub — это Google Drive, где ты хранишь все эти документы и можешь ими делиться.

2

Установка Git

🪟 Windows

  1. Перейди на официальный сайт: git-scm.com/download/win

    Скачивание начнётся автоматически (64-bit Git for Windows Setup)

  2. Запусти установщик Git-2.xx.x-64-bit.exe

    Git 2.43.0 Setup
    [✓] Windows Explorer integration
    [✓] Git Bash Here
    [✓] Git GUI Here
    [✓] Git LFS (Large File Support)
    [✓] Associate .git* configuration files with text editor
    [важно] Default editor: выбери VS Code
  3. На шаге "Adjusting your PATH environment" выбери "Git from the command line and also from 3rd-party software"

  4. Нажимай Next до конца, затем Install. Все остальные настройки — по умолчанию.

  5. Проверь установку: открой Win+R → напечатай cmd → Enter

    cmd
    git --version
    git version 2.43.0.windows.1  # ✓ значит всё ок

🍎 macOS

На macOS Git обычно уже есть. Проверь в Терминале:

Terminal
git --version

Если не установлен — появится окно с предложением установить Xcode Command Line Tools. Нажми «Установить». Или через Homebrew:

Terminal
# Сначала установи Homebrew (если нет): https://brew.sh
brew install git

🐧 Linux (Ubuntu / Debian)

Terminal
sudo apt update
sudo apt install git
git --version
git version 2.43.0
✅ Готово

Если команда git --version вернула номер версии — Git успешно установлен. Переходим к настройке!

3

Первичная настройка Git

Перед началом работы Git нужно сказать, кто ты. Эта информация будет добавляться к каждому коммиту, чтобы было видно, кто сделал изменение.

Terminal / Git Bash
# Укажи своё имя (будет видно в истории коммитов)
git config --global user.name "Твоё Имя"

# Укажи email (тот же, что при регистрации на GitHub)
git config --global user.email "tvoypochta@example.com"

# Проверить настройки:
git config --list
user.name=Твоё Имя
user.email=tvoypochta@example.com

Настройка редактора (опционально)

Terminal
# Установить VS Code как редактор Git по умолчанию
git config --global core.editor "code --wait"

# Установить main как имя ветки по умолчанию (рекомендуется)
git config --global init.defaultBranch main
ℹ️ Флаг --global

Флаг --global означает, что настройка применяется ко всем проектам на этом компьютере. Без него — только к текущему репозиторию.

Где хранятся настройки?

ФайлОбластьПуть
.gitconfigГлобальная (весь ПК)~/.gitconfig или C:\Users\Имя\.gitconfig
configЛокальная (1 проект).git/config внутри проекта
4

Создание репозитория

Репозиторий (или «репо») — это папка проекта, за которой следит Git. Внутри создаётся скрытая папка .git/ где хранится вся история.

Вариант A — создать новый репозиторий

Terminal
# 1. Создай папку проекта и зайди в неё
mkdir my-project
cd my-project

# 2. Инициализируй репозиторий Git
git init
Initialized empty Git repository in /Users/name/my-project/.git/

# 3. Проверь состояние
git status
On branch main
No commits yet
nothing to commit

Вариант B — клонировать существующий с GitHub

Terminal
git clone https://github.com/username/repository-name.git
Cloning into 'repository-name'...
remote: Enumerating objects: 100, done.
Resolving deltas: 100% (30/30), done.

cd repository-name

Структура репозитория

  my-project/
  ├── .git/                 ← папка Git (не трогай вручную!)
  │   ├── HEAD              ← указатель на текущую ветку
  │   ├── config            ← настройки репо
  │   ├── objects/          ← все версии файлов
  │   └── refs/             ← ветки и теги
  ├── src/
  │   └── index.js
  ├── README.md
  └── package.json
ℹ️ .gitignore

Файл .gitignore — список файлов, которые Git должен игнорировать (например, папка node_modules/, файлы с паролями .env). Создай его в корне проекта:

.gitignore
# Зависимости Node.js
node_modules/

# Переменные окружения (пароли, ключи)
.env
.env.local

# Сборки
dist/
build/

# Системные файлы
.DS_Store        # macOS
Thumbs.db        # Windows
5

Коммиты — сохранение истории

Коммит — это «снимок» твоего кода в определённый момент времени. Представь фотоальбом: каждое фото — отдельный момент, и ты можешь «прокрутить назад».

Три зоны Git

  ┌─────────────────┐    git add    ┌─────────────────┐    git commit   ┌─────────────────┐
  │  Рабочая папка  │ ─────────────▶│  Индекс (Stage) │ ───────────────▶│   Репозиторий   │
  │  (Working Dir)  │               │  «Зал ожидания» │                 │   (История)     │
  │                 │               │                 │                 │                 │
  │  Твои файлы     │               │  Файлы готовы   │                 │  Коммиты        │
  │  как они есть   │               │  к сохранению   │                 │  1, 2, 3...     │
  └─────────────────┘               └─────────────────┘                 └─────────────────┘

Основной цикл работы

Terminal
# 1. Посмотреть что изменилось
git status
Changes not staged for commit:
  modified:   index.html
  modified:   style.css
Untracked files:
  app.js

# 2. Добавить файлы в «зону ожидания»
git add index.html style.css   # конкретные файлы
# или добавить ВСЕ изменения:
git add .

# 3. Создать коммит с описанием
git commit -m "Добавил навигацию и стили"
[main 3f2a1b4] Добавил навигацию и стили
 2 files changed, 45 insertions(+), 3 deletions(-)

# 4. Посмотреть историю коммитов
git log --oneline
3f2a1b4 (HEAD → main) Добавил навигацию и стили
a1b2c3d Начальная версия проекта

Правила хорошего сообщения коммита

❌ Плохо✅ Хорошо
fixИсправил баг с авторизацией на странице входа
измененияДобавил валидацию формы регистрации
asdfghОбновил зависимости до актуальных версий
ааа помогитеРефакторинг: вынес логику в отдельный модуль

Полезные команды для работы с историей

Terminal
# Красивый лог с графом веток
git log --oneline --graph --all

# Что изменилось в файлах (ещё до добавления в Stage)
git diff

# Отменить последний коммит, сохранив изменения в файлах
git reset --soft HEAD~1

# Посмотреть конкретный коммит
git show 3f2a1b4

# Вернуть файл к состоянию последнего коммита
git checkout -- index.html
⚠️ Внимание

Команда git reset --hard безвозвратно удаляет изменения! Используй с осторожностью. Перед экспериментами создай ветку.

6

Ветки — параллельная разработка

Ветка — это независимая линия разработки. Представь дерево: основной ствол — это ветка main, а когда ты хочешь добавить новую функцию, ты «отламываешь» отдельную веточку, работаешь в ней, а потом «прикладываешь» её обратно.

                              feature/navbar
                            ╔═══╦═══╦═══╗
                   ┌────────╢ D ║ E ║ F ╟──────────┐
                   │        ╚═══╩═══╩═══╝           │
  ─── A ─── B ─── C ─────────────────────────────── G ───▶  main
                                                   merge

Основные команды для веток

Terminal
# Посмотреть все ветки (звёздочка = текущая)
git branch
* main
  feature/navbar
  bugfix/login

# Создать новую ветку
git branch feature/new-header

# Переключиться на ветку
git checkout feature/new-header
Switched to branch 'feature/new-header'

# Создать И переключиться (сокращение)
git checkout -b feature/new-header
# или современный способ:
git switch -c feature/new-header

# Удалить ветку (после слияния)
git branch -d feature/new-header

# Переименовать ветку
git branch -m старое-имя новое-имя

Соглашения по именованию веток

feature/

feature/user-auth
Для новых функций

bugfix/ или fix/

fix/cart-total-bug
Для исправления ошибок

hotfix/

hotfix/critical-crash
Срочные исправления

chore/

chore/update-deps
Обновления, технические задачи

7

Слияние веток (merge)

Когда работа на ветке закончена — её нужно «слить» в основную ветку. Это называется merge.

Terminal
# 1. Переключись на ветку, В которую сливаешь (обычно main)
git checkout main

# 2. Слей ветку feature
git merge feature/new-header
Updating 3f2a1b4..7d9e2f1
Fast-forward
 header.html | 25 ++++++++++
 1 file changed, 25 insertions(+)

# 3. Удали ветку (она больше не нужна)
git branch -d feature/new-header

Rebase — альтернатива merge

  Merge (сохраняет историю):          Rebase (линейная история):
  
  A --- B --- C --- M (merge)         A --- B --- C --- D' --- E' (rebase)
               \   /
                D-E
Terminal
# Rebase: "переставить" твои коммиты поверх main
git checkout feature/my-feature
git rebase main
⚠️ Совет

Для новичков — используй merge. Rebase меняет историю и может запутать. Освоишь merge — тогда изучи rebase.

8

GitHub — облачное хранилище кода

GitHub — это веб-платформа для хранения Git-репозиториев в облаке. Там же происходит командная работа, обсуждение кода и автоматизация деплоя.

Регистрация на GitHub

  1. Зайди на github.com и нажми Sign up

  2. Введи email, придумай пароль и username (это твоё публичное имя, будет в URL)

  3. Подтверди email — придёт письмо

  4. Выбери бесплатный план Free (его достаточно для большинства задач)

Ключевые элементы GitHub

github.com/username/my-project
📁 Code

Все файлы проекта, дерево папок, история коммитов

🐛 Issues

Задачи, баги, предложения. Как трекер задач

🔀 Pull Requests

Запросы на слияние кода с обсуждением и ревью

⚡ Actions

Автоматизация: тесты, деплой при каждом пуше

📊 Insights

Статистика: кто что делал, активность проекта

⚙️ Settings

Доступы, защита веток, интеграции

Настройка SSH-ключа (рекомендуется)

SSH-ключ позволяет пушить код без ввода пароля каждый раз.

Terminal
# 1. Генерируй SSH-ключ
ssh-keygen -t ed25519 -C "tvoypochta@example.com"
# Нажимай Enter (оставь всё по умолчанию)

# 2. Скопируй публичный ключ
# macOS:
cat ~/.ssh/id_ed25519.pub | pbcopy
# Windows (Git Bash):
cat ~/.ssh/id_ed25519.pub | clip
# Linux:
cat ~/.ssh/id_ed25519.pub  # скопируй руками

# 3. Добавь ключ на GitHub:
# Settings → SSH and GPG keys → New SSH key → вставь ключ

# 4. Проверь подключение
ssh -T git@github.com
Hi username! You've successfully authenticated.
9

Push и Pull — синхронизация с GitHub

  Локальный компьютер                    GitHub (облако)
  ┌─────────────────┐                   ┌─────────────────┐
  │   Репозиторий   │   ─── push ──▶    │   Репозиторий   │
  │   (локальный)   │   ◀── pull ───    │   (удалённый)   │
  └─────────────────┘                   └─────────────────┘

Подключить локальный репо к GitHub (remote)

Terminal
# Добавить удалённый репозиторий (origin — стандартное имя)
git remote add origin https://github.com/username/my-project.git
# или через SSH:
git remote add origin git@github.com:username/my-project.git

# Проверить подключённые remotes
git remote -v
origin  git@github.com:username/my-project.git (fetch)
origin  git@github.com:username/my-project.git (push)

Push — отправить коммиты на GitHub

Terminal
# Первый пуш (создаёт связь с удалённой веткой)
git push -u origin main
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Writing objects: 100% (5/5), 1.23 KiB | 1.23 MiB/s, done.
Branch 'main' set up to track remote branch 'main' from 'origin'.

# Все последующие пуши просто:
git push

# Запушить другую ветку:
git push origin feature/new-header

Pull — получить изменения с GitHub

Terminal
# Скачать последние изменения и слить с текущей веткой
git pull
remote: Enumerating objects: 4, done.
Updating 3f2a1b4..7d9e2f1
Fast-forward
 README.md | 3 +++

# Только скачать (без слияния)
git fetch

# Посмотреть что поменялось до слияния
git fetch && git log HEAD..origin/main --oneline
💡 Совет

Перед началом работы всегда делай git pull — чтобы иметь самую свежую версию кода. Особенно в команде.

10

Pull Request — код-ревью

Pull Request (PR) — это запрос на слияние твоей ветки в основную. Суть: "Эй, я сделал фичу, посмотрите пожалуйста, прежде чем добавлять в main". В PR можно оставлять комментарии, запрашивать правки, видеть все изменения построчно.

Создание Pull Request

  1. Сделай изменения в своей ветке и запуши:

    Terminal
    git checkout -b feature/add-auth
    # ... делаешь изменения ...
    git add .
    git commit -m "Добавил авторизацию через Google"
    git push origin feature/add-auth
  2. Зайди на GitHub. Появится жёлтый баннер "Compare & pull request" — нажми его

  3. Заполни форму PR: заголовок, описание что сделал и зачем, попроси коллег как Reviewers

  4. Нажми Create pull request

Жизненный цикл PR

  Создал PR ──▶ Ревью коллег ──▶ Правки (если нужно) ──▶ Одобрен ──▶ Merge ──▶ Удали ветку
                    │                                         ↑
                    └──── Comments, Change requests ──────────┘
💡 Хороший PR

Делай маленькие PR — не больше 300-400 строк. Большие PR никто не ревьюит внимательно. Лучше 5 маленьких PR, чем один огромный.

11

Fork и клонирование чужих проектов

Fork — копия чужого репозитория у тебя в аккаунте. После форка ты можешь свободно вносить изменения и при желании предлагать их оригинальному автору через PR.

Fork

  1. Зайди на страницу нужного репозитория на GitHub

  2. Нажми кнопку Fork (вверху справа) → Create Fork

  3. Теперь у тебя есть своя копия: github.com/твой-username/чужой-репо

  4. Клонируй СВОЙ форк:

    Terminal
    git clone git@github.com:твой-username/чужой-репо.git
    cd чужой-репо
    
    # Добавь ссылку на оригинал (upstream)
    git remote add upstream git@github.com:оригинальный-автор/чужой-репо.git
    
    # Синхронизируй с оригиналом:
    git fetch upstream
    git merge upstream/main
ДействиеКоманда / место
Скопировать чужой репо к себеКнопка Fork на GitHub
Скачать репо на компьютерgit clone <url>
Отправить правки оригинальному авторуPull Request из твоего форка
Получить свежие обновления оригиналаgit fetch upstream
12

Git в VS Code — настройка

VS Code имеет встроенную поддержку Git. Никаких дополнительных расширений не нужно — просто открой папку с проектом.

Убедись, что Git найден в VS Code

VS Code
  1. Открой VS Code
  2. Нажми Ctrl+Shift+P (или Cmd+Shift+P на Mac) — откроется палитра команд
  3. Напечатай: Git: Show Git Output — если видишь лог без ошибок, всё ок
  4. Либо: Ctrl+, → поиск git.path → убедись что путь к git верный

Открыть проект в VS Code

Terminal
# Открыть текущую папку в VS Code
code .

# Если команда 'code' не работает на macOS:
# VS Code → Cmd+Shift+P → "Shell Command: Install 'code' command in PATH"

Настройки VS Code для Git (settings.json)

settings.json
// Ctrl+Shift+P → "Open User Settings (JSON)"
{
  "git.autofetch": true,          // автоматически получать обновления
  "git.confirmSync": false,       // не спрашивать подтверждение sync
  "git.enableSmartCommit": true,  // автоматически добавлять файлы
  "git.postCommitCommand": "sync", // автопуш после коммита
  "editor.inlineSuggest.enabled": true
}
13

Source Control в VS Code

Левая панель VS Code — иконка с «ветками» (или Ctrl+Shift+G) — это Source Control. Здесь весь Git без терминала.

VS Code — Source Control
SOURCE CONTROL
↑ 2 ↓ 0 main
CHANGES (3)
M index.html
A style.css
D old-file.js
STAGED CHANGES (1)
M README.md
Что означают буквы:
M = Modified (изменён)
A = Added (добавлен)
D = Deleted (удалён)
R = Renamed (переименован)
U = Untracked (новый файл)
C = Conflict (конфликт)

Базовые операции без терминала

➕ Stage

Наведи на файл → нажми «+» рядом с ним. Или нажми «+» рядом с заголовком CHANGES для всех

💾 Commit

Введи сообщение в поле вверху панели → нажми ✓ или Ctrl+Enter

☁️ Push/Pull

Кнопка «⇅» в статус-баре внизу (показывает ↑N ↓N). Или меню «...» в Source Control

🔀 Ветки

Нажми на имя ветки в статус-баре внизу слева → выбери или создай ветку

Timeline — история файла

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

14

GitLens — расширение для VS Code

GitLens — самое популярное расширение Git для VS Code. Добавляет мощные инструменты прямо в редактор.

Установка

  1. Открой VS Code → Extensions (Ctrl+Shift+X)

  2. Поиск: GitLens — Git supercharged

  3. Нажми Install

Ключевые возможности GitLens

👁️ Blame (кто написал)

Прямо в коде, серым текстом рядом с каждой строкой — кто написал и когда. Наведи курсор — деталь коммита

📜 File History

Полная история изменений файла. Кликни → увидишь что было раньше

🔍 Compare branches

Сравни две ветки или коммита — что добавилось, что удалилось

📊 Graph

Визуальный граф веток и коммитов — как git log --graph, но красиво

15

Типичный рабочий процесс

Вот как выглядит работа над реальным проектом каждый день:

Полный рабочий цикл
══════════════ Начало рабочего дня ══════════════

# 1. Обнови main до последней версии
git checkout main
git pull

# 2. Создай ветку для новой задачи
git checkout -b feature/add-dark-mode

══════════════ Работаешь над задачей ══════════════

# 3. Периодически сохраняй прогресс коммитами
git add .
git commit -m "Добавил переключатель темы"

git add .
git commit -m "Добавил CSS переменные для тёмной темы"

══════════════ Задача готова ══════════════

# 4. Получи свежие изменения из main (если работаешь в команде)
git fetch origin
git rebase origin/main  # или: git merge origin/main

# 5. Запуши ветку на GitHub
git push origin feature/add-dark-mode

# 6. Создай Pull Request на GitHub (через браузер)

# 7. После одобрения и merge — удали ветку
git checkout main
git pull
git branch -d feature/add-dark-mode
  main:  ─── A ─── B ─────────────────────── M ───▶
                    \                        /
  feature:           ─── C ─── D ─── E ────
                         └──── Pull Request ──┘
16

Решение конфликтов

Конфликт возникает, когда два человека (или ты сам в двух ветках) изменили одну и ту же строку файла. Git не знает, какую версию оставить, и просит тебя решить.

Как выглядит конфликт в файле

index.html (с конфликтом)
<h1>
<<<<<<< HEAD          ← твоя версия (текущая ветка)
  Добро пожаловать!
=======              ← разделитель
  Welcome back!
>>>>>>> feature/i18n  ← их версия (входящая ветка)
</h1>

Решение конфликта в VS Code

VS Code Merge Editor

VS Code показывает конфликт с кнопками:

Accept Current Change
Accept Incoming Change
Accept Both Changes
Compare Changes

Или отредактируй файл вручную, удалив маркеры <<<, ===, >>>

Шаги после разрешения конфликта

Terminal
# 1. Убедись что конфликты решены (нет маркеров <<<)
git status
both modified:   index.html

# 2. Добавь решённый файл
git add index.html

# 3. Продолжи merge
git commit -m "Merge: объединил ветки, решил конфликт в заголовке"

# Если передумал и хочешь отменить merge:
git merge --abort
💡 Предотвращай конфликты

Чаще делай git pull и держи ветки короткими. Чем меньше времени прошло с момента ветвления — тем меньше конфликтов.

17

Шпаргалка по командам

Настройка

git config --global user.name "Имя"Установить имя
git config --global user.email "email"Установить email
git config --listПоказать все настройки

Репозиторий

git initСоздать новый репозиторий
git clone <url>Клонировать с GitHub
git statusСтатус изменений

Коммиты

git add .Добавить все файлы в Stage
git add <file>Добавить конкретный файл
git commit -m "Сообщение"Создать коммит
git commit --amendИзменить последний коммит
git log --onelineИстория коммитов (коротко)
git diffЧто изменилось (unstaged)
git diff --stagedЧто в Stage
git reset --soft HEAD~1Отменить последний коммит
git stashВременно спрятать изменения
git stash popВернуть спрятанные изменения

Ветки

git branchСписок веток
git branch <name>Создать ветку
git checkout <name>Переключиться на ветку
git checkout -b <name>Создать и переключиться
git merge <branch>Слить ветку в текущую
git branch -d <name>Удалить ветку
git log --oneline --graph --allГраф всех веток

GitHub (удалённый репозиторий)

git remote add origin <url>Подключить GitHub
git remote -vСписок remote
git push -u origin mainПервый пуш
git pushОтправить коммиты
git pullПолучить изменения
git fetchСкачать без слияния
git push origin --delete <branch>Удалить ветку на GitHub

🎉

Ты дошёл до конца!

Теперь ты знаешь основы Git. Лучший способ закрепить — создай свой первый репозиторий на GitHub и запуши туда хоть что-нибудь. Практика — лучший учитель.