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 原生支持基础历史查看。更推荐安装扩展 GitLensGit 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

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

场景:你有一个个人的独立项目,暂不需要推送到 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