VS Code Git 极速入门手册

对照学习: GUI 操作 vs 命令行

初始化与克隆仓库

VS Code 操作

通过侧边栏的 “源代码管理” (Source Control) 视图，你可以轻松初始化或克隆项目。

源代码管理

Git Bash 命令

使用命令行进行项目的初始化或将远程仓库下载到本地。

# 在当前目录初始化一个新的 Git 仓库
git init
# 克隆远程仓库到本地
git clone https://github.com/user/repo.git

暂存与提交更改

VS Code 操作

点击文件旁边的 + 号进行暂存，在输入框填写信息后点击 提交 (Commit)。

源代码管理
更改 (Changes) - 1
index.html M

Git Bash 命令

分为两步：先 `add` 暂存（对应 VS Code 的 + 号），后 `commit` 提交。

# 暂存当前目录下的所有更改 (对应点击所有的 + 号)
git add .
# 提交暂存区的更改，并附带提交信息
git commit -m "feat: add index page"
# 快捷命令：将所有已跟踪文件的修改直接暂存并提交 (针对非新建文件)
git commit -am "update"

分支管理

VS Code 操作

点击 VS Code 窗口**左下角**的状态栏上的当前分支名（例如 `main` 或 `master`），会在顶部弹出分支列表和创建选项。

main
0↓ 2↑
创建新分支...
feature/login

Git Bash 命令

使用 `branch` 查看或创建，使用 `checkout` 或 `switch` 切换分支。

# 查看本地所有分支
git branch
# 创建并立刻切换到新分支 (等同于 VS Code 中创建新分支)
git checkout -b feature/login
// 推荐新版 Git 使用: git switch -c feature/login
# 切换回已有分支 main
git checkout main

拉取与推送 (Pull & Push)

VS Code 操作

完成 Commit 后，点击源代码管理面板的 **"同步更改" (Sync Changes)** 按钮，VS Code 会自动先 Pull 后 Push。

源代码管理
点击此按钮将向 "origin/main" 推送 1 个提交，并拉取远程可能存在的新提交。
展开菜单可以单独选 Pull 或 Push

Git Bash 命令

如果多人协作，推送前应该养成先拉取 (pull) 最新代码的好习惯。

# 拉取远程仓库的最新代码并与本地合并
git pull origin main
# 将本地提交推送到远程仓库
git push origin main
# (如果是刚创建的新分支第一次推送) 建立上游关联并推送
git push -u origin feature/login
对应 VS Code 中的 "发布 Branch (Publish Branch)"

储藏更改 (Stash)

VS Code 操作

当你正在开发一半，突然需要切换分支修 Bug，但不去提交这半成品代码，可使用储藏。点击面板顶部的 `...` (更多) -> 储藏 (Stash)。

源代码管理
拉取、推送 (Pull, Push) >
分支 (Branch) >
储藏 (Stash) >
储藏
弹出储藏 (Pop)
应用储藏 (Apply)

Git Bash 命令

Stash 可以理解为“草稿箱”，把当前未完成的改动打包放起来，工作区变干净。

# 储藏当前工作区未提交的更改
git stash
# 查看所有的储藏记录
git stash list
# 恢复最近一次储藏的更改，并从草稿箱中删除记录 (对应 弹出储藏)
git stash pop

解决冲突 (Merge Conflict)

VS Code 操作

合并分支或拉取代码产生冲突时，VS Code 会在源代码管理面板高亮显示有冲突的文件（标记为 C）。点击文件可进入直观的三向合并视图。

合并更改 (Merge Changes)
config.js C
<<<<<<< 当前更改 (Current Change)
采用当前更改 | 采用传入更改 | 保留双方更改
const apiUrl = "https://api.dev.example.com";
=======
const apiUrl = "https://api.prod.example.com";
>>>>>>> 传入更改 (Incoming Change)

解决冲突后，保存文件，点击 + 号暂存，然后正常提交即可完成合并。

Git Bash 命令

命令行解决冲突需要手动编辑文件，删除合并标记（`<<<<<<<` 等），保留需要的代码，然后提交。

# 冲突发生后，使用 status 查看哪些文件存在冲突 (both modified)
git status
# 手动修改完文件后，暂存已解决冲突的文件
git add config.js
# 继续合并提交 (通常不需要加 -m，Git 会自动生成合并信息)
git commit
# 发现冲突太复杂，想取消合并回到合并前的状态
git merge --abort

标签管理 (Tags)

VS Code 操作

通过点击源代码管理面板顶部的 `...` (更多) -> 标签 (Tags) -> 创建标记 (Create Tag)。

源代码管理
分支 (Branch) >
储藏 (Stash) >
标签 (Tags) >
创建标记...
删除标记...

Git Bash 命令

常用于发布版本（如 v1.0.0）。注意：默认的 `git push` 不会推送标签。

# 在当前提交打上轻量标签
git tag v1.0.0
# 打上附注标签（推荐，包含作者、日期和信息）
git tag -a v1.0.0 -m "Release version 1.0.0"
# 推送单个标签到远程仓库
git push origin v1.0.0
// 推送所有标签: git push origin --tags

远程仓库管理 (Remote)

VS Code 操作

通过点击 `...` -> 远程 (Remote) -> 添加远程存储库... (Add Remote) 或删除远程。

源代码管理
命令面板 (Ctrl+Shift+P) 搜索：
> Git: Add Remote...

Git Bash 命令

查看、添加或修改关联的 GitHub/GitLab 仓库地址。

# 查看已配置的远程仓库地址（详细列表）
git remote -v
# 添加一个新的远程仓库，命名为 origin
git remote add origin https://github.com/user/repo.git
# 修改现有远程仓库的 URL (常用于从 HTTPS 切换到 SSH)
git remote set-url origin git@github.com:user/repo.git

查看历史与撤销

VS Code 操作

VS Code 原生支持基础历史查看。更推荐安装扩展 GitLens 或 Git Graph 获得强大的时间线和可视化树状图。

时间线 (Timeline)
Update header UI
刚刚 · You
Initial commit
2 小时前 · You

放弃更改：在源代码管理区，点击文件旁的 (放弃更改/Discard Changes)。

Git Bash 命令

查看历史及硬/软回退（危险操作请谨慎）。

# 查看简洁的历史提交记录
git log --oneline
# 放弃工作区的所有未暂存修改 (对应 VS Code 中点击撤销箭头)
git restore .
# 安全撤销：创建一个新的提交，用来抵消某次提交的修改（适合已推送到远程的提交）
git revert HEAD
# 【危险】彻底撤销最近一次提交，工作区代码也会退回到上个版本
git reset --hard HEAD~1
// 提示: 如果只想撤销提交状态但保留代码修改，请使用 git reset --soft HEAD~1

版本回退 (Reset & Revert)

VS Code 操作

在“时间线”或使用 GitLens 插件的历史记录中，右键点击特定的提交记录，可以选择回退或撤销。

提交历史 (Commits)
Add payment gateway
10 分钟前 · You

💡 重置 (Reset): 改变时间线，像没发生过一样（分软重置保留代码，硬重置删代码）。
💡 还原 (Revert): 新增一个反向提交，用来抵消之前的修改（最安全，推荐）。

Git Bash 命令

根据是否已经推送到远程，选择安全的撤销方式。

# 【推荐】安全撤销：创建一个新提交来抵消指定提交的修改（适合已推送到云端的代码）
git revert 1a2b3c4
# 软回退：时光倒流到某个版本，但【保留】你后来写的代码在暂存区
git reset --soft 1a2b3c4
# 【危险】硬回退：彻底时光倒流到某个版本，之后的代码全部【丢失】
git reset --hard 1a2b3c4

挑选提交到其他分支 (Cherry-pick)

VS Code 操作

场景：你在 feature-A 分支修复了一个 Bug，现在想把这个修复单独拉取到 main 分支，但不想合并整个 feature-A。这叫“摘樱桃 (Cherry-pick)”。

源代码管理 (配合 GitLens)
  1. 先切换到目标分支 (例如 main)。
  2. 在侧边栏找到包含目标提交的源分支 (例如 feature-A)。
  3. 展开分支找到那个特定的提交记录。
  4. 右键点击该提交，选择 "挑选提交 (Cherry Pick Commit...)"。
[右键 Cherry Pick 菜单示例]

Git Bash 命令

通过命令行操作非常快捷，只需要知道那个提交的 Hash 值（前几位即可）。

# 1. 找到需要转移的提交的 hash 值（例如 8f2a1b9）
git log --oneline
# 2. 切换到需要接收这个提交的【目标分支】
git checkout main
# 3. 把指定的提交“挑选”过来，应用到当前分支
git cherry-pick 8f2a1b9
// 如果产生冲突，解决冲突后执行 git cherry-pick --continue

案例一：本地单机开发标准流程

场景：你有一个个人的独立项目，暂不需要推送到 GitHub，只需在本地进行版本控制防丢失。

1

项目初始化

打开新文件夹，将其转化为 Git 仓库。

💻 VS Code: 点击侧边栏“源代码管理” -> “初始化仓库”
❯ git init
2

编写代码

在编辑器中新建文件、敲代码并保存 (Ctrl+S)。

文件会被标记为 U (未跟踪) 或 M (已修改)。
3

暂存更改

将确定要保存的修改放入“候车室”。

💻 VS Code: 点击“更改”列表上方的 + 号
❯ git add .
4

提交版本

为这次修改打上标签，正式存入本地仓库历史。

💻 VS Code: 输入提交信息，点击 提交 (Commit)
❯ git commit -m "完成首页布局"
5

查看记录/循环开发

确认提交成功，然后继续进行下一轮的“写代码 -> 暂存 -> 提交”。

💻 VS Code: 查看底部“时间线”或使用 GitLens 插件
❯ git log --oneline

案例二：云端团队协作标准流程

场景：入职新公司或参与开源，你需要把别人的代码拉下来，开发自己的功能，最后安全地合并回去。

1

克隆远端代码

第一天上班：把公司云端（GitHub/GitLab）的项目下载到电脑。

❯ git clone <项目链接>
2

创建特性分支

不要直接在 main 分支改！为你负责的功能创建一个新分支。

💻 VS Code: 点击左下角分支名 -> “创建新分支”
❯ git checkout -b feature/login
3

开发并本地提交

进行开发，并像“单机流程”一样完成 add 和 commit 操作。

❯ git add .
❯ git commit -m "完成登录接口对接"
4

拉取最新代码 (关键)

在推送前，必须先拉取云端别人可能已经更新的代码，如果有冲突在本地解决。

💻 VS Code: 菜单 `...` -> 拉取 (Pull)
❯ git pull origin main
5

推送分支到云端

将你开发好的 feature 分支推送到远程仓库。

💻 VS Code: 点击“发布 Branch (Publish Branch)”
❯ git push -u origin feature/login
6

发起合并请求 (PR / MR)

登录 GitHub/GitLab 网页端，向主干分支发起 Pull Request，让同事帮你 Review 代码后合并。

此步主要在网页端进行操作。
Generated Guide