VS Code 中 Git 的使用：从零到一保姆级菜鸟教程
VS Code 中 Git 的使用：从零到一保姆级菜鸟教程
前言
在现代软件开发中，版本控制是必不可少的技能。VS Code 作为目前最流行的代码编辑器，其内置的 Git 可视化工具让代码管理变得极其直观和简单。
本文将带你从零开始，跑通“下载安装 -> 环境配置 -> GitHub 关联 -> 提交推送 -> 冲突解决”的全流程。告别繁琐的命令行，用可视化的方式优雅地管理代码！
1. 软件下载与基础配置
1.1 下载地址
- VS Code 官方下载：https://code.visualstudio.com/Download
- Git 官方下载 (Windows 版)：https://git-scm.cn/install/windows
💡 避坑提示：安装 Git 时，直接无脑点击 Next 直到安装完成即可。安装后，按 Win + R 输入 cmd 打开终端，输入 git --version，若能看到版本号说明安装成功。
1.2 配置全局用户名和邮箱
告诉 Git 你是谁（这会显示在你的每一次代码提交记录中，方便团队认领代码）。在电脑终端或 VS Code 的终端中运行以下命令：
git config --global user.name "你的英文昵称"git config --global user.email "你的邮箱@example.com"2. 核心配置：免密连接 GitHub 远程仓库
为了以后每次推送代码不用频繁输密码，我们强烈建议配置 SSH 密钥。
2.1 生成本地 SSH 密钥
打开终端，输入以下命令（注意替换成你自己的邮箱）：
ssh-keygen -t ed25519 -C"你的邮箱@example.com"(注：输入命令后连续按三次回车键即可，不需要额外设置密码。)
2.2 🌟【关键步骤】查看并复制生成的公钥
刚刚的命令在你的电脑上生成了一对密钥。我们需要把公钥的内容复制下来，你可以根据自己的习惯选择以下任意一种方法：
方法一：从文件夹中手动查看（最直观，推荐纯新手）
- 打开电脑的文件管理器。
- Windows 用户：进入
C:\Users\你的用户名\.ssh\文件夹。
Mac 用户：进入/Users/你的用户名/.ssh/文件夹。 - 找到名为
id_ed25519.pub的文件，右键选择用记事本或 VS Code 打开它。 - 全选里面的所有内容并复制（这是一长串以
ssh-ed25519开头的文本）。
⚠️ 高危警告：同目录下还有一个没有 .pub 后缀的 id_ed25519 文件，那是你的私钥。私钥就相当于你的银行卡密码，打死也不能发给别人或填到网页上！我们只需要复制带 .pub（Public 公共的）后缀的公钥文件！方法二：终端快捷复制（最快）
如果你觉得找文件夹麻烦，可以直接在刚才的终端里输入以下命令，它会悄悄把公钥内容直接复制到你的鼠标剪贴板里：
- Windows 用户：
clip < ~/.ssh/id_ed25519.pub - Mac 用户：
pbcopy < ~/.ssh/id_ed25519.pub
方法三：终端命令查看
也可以在终端输入cat ~/.ssh/id_ed25519.pub并回车。终端会直接输出那一长串文本，用鼠标选中这一整段并按Ctrl+C（或右键）复制即可。
2.3 将公钥添加到 GitHub
- 登录 GitHub，点击右上角头像 -> Settings。
- 左侧菜单找到 SSH and GPG keys，点击 New SSH key。
- Title 随便填（用来标记这台电脑，如
My Laptop或公司电脑）。 - 在 Key 输入框中，粘贴你刚刚在 2.2 步复制好的那一长段公钥内容。
- 点击 Add SSH key 完成添加。
3. 在 VS Code 中初始化项目
准备工作完成，开始写代码！这里分为两种常见场景：
场景一：本地新建项目（从无到有）
- 在 VS Code 中打开你新建的项目文件夹。
- 点击左侧菜单栏的 “源代码管理” 图标（或按
Ctrl + Shift + G）。 - 点击 “初始化存储库 (Initialize Repository)”。
场景二：克隆已有项目（接手代码）
- 按下
F1或Ctrl + Shift + P打开命令面板。 - 输入
Git: Clone并回车。 - 粘贴你在 GitHub 上复制的仓库链接，然后选择一个本地文件夹保存即可。
💡 链接选择提示（新手必看）：推荐使用 HTTPS 链接（以 https://github.com… 开头）：首次克隆或推送时，VS Code 右下角会弹窗提示“允许登录 GitHub”，点击去浏览器授权一下就能一直免密使用了，极度推荐新手使用这种方式！进阶使用 SSH 链接（以 [email protected]… 开头）：如果你按照前文 第2步 配置好了 SSH 密钥，可以使用这种链接，这是企业开发中最常用的标准方式。
4. 必备：配置 .gitignore 忽略文件
写代码时，很多文件是不需要传到 GitHub 上的（比如依赖包、编译产生的临时文件等）。
在项目根目录新建一个名为 .gitignore 的文件，填入你需要忽略的目录或文件，例如：
node_modules/ dist/ .vscode/ .DS_Store 💡 提示：配置好后，Git 就会自动当这些文件不存在，左侧的变动提示里也不会再出现它们，保持代码库的纯净。
5. 核心操作：暂存与提交 (Add & Commit)
在 VS Code 中，代码的状态流转非常直观：工作区 (更改) -> 暂存区 (暂存的更改) -> 本地仓库。
🖱️ VS Code 界面操作：
- 修改代码：只要代码有变动，左侧“源代码管理”图标就会出现数字提示。
- 暂存 (Add)：鼠标悬停在变动的文件上，点击右侧的
+号，文件就会进入“暂存的更改”列表。 - 提交 (Commit)：在面板顶部的输入框内，写上本次修改的说明（如：
feat: 完成登录页面布局），然后点击下方的 “提交” 按钮。
💻 对应的纯命令行操作（装 X 必备）：
在 VS Code 中按 Ctrl + ~ 打开集成终端，你可以用以下命令实现完全相同的效果：
# 1. 查看当前哪些文件被修改了（相当于看左侧面板）git status # 2. 将所有修改过的文件加入暂存区（相当于点全部的 + 号）gitadd.# 或者只暂存指定文件： git add index.html# 3. 提交到本地仓库并备注信息（相当于在输入框打字并点提交）git commit -m"feat: 完成登录页面布局"6. 远程同步：推送与拉取 (Push & Pull)
6.1 推送 (Push)
如果你是场景一（本地新建），首次推送需要先关联 GitHub：
git remote add origin 你的GitHub仓库链接 git push -u origin main # 首次推送并绑定分支日常开发中，提交代码后：
只需点击左下角的同步循环图标，或点击 “…” -> 推送（命令行等效于 git push）。
6.2 拉取 (Pull)
如果是团队协作，或者你在另一台电脑上修改了代码，修改本地代码前必须先拉取云端最新代码。
- 界面操作：点击 “…” -> 拉取。
- 命令行操作：
git pull
7. 分支与冲突管理
7.1 分支操作 (Branch)
# 查看所有分支git branch # 创建并直接切换到新分支 (极常用)git checkout -b feature-login # 切换回主分支git checkout main 7.2 解决冲突 (Conflict)
当两个人同时修改了同一行代码并提交时，就会触发冲突。别慌，VS Code 提供了极好的冲突对比高亮界面，代码上方会出现四个选项：
- 采用当前更改：保留你写的代码。
- 采用传入更改：保留对方写的代码。
- 保留双方更改：两段代码都留下，你自己手动微调。
- 比较变更：左右分屏对比两者的不同。
💡 提示：点击选项解决完毕后，无论是用界面还是命令行，都需要重新暂存并提交一次（git add . 然后 git commit -m “解决冲突”）。
8. 进阶必学：Git 的“后悔药”（撤销与回退）
写错代码或者提交错了怎么办？记住以下几个最常用的回退场景：
场景一：代码写崩了，想恢复到上一次提交的状态
还没执行 git add，想直接丢弃工作区的修改。
- 界面操作：在“源代码管理”中找到那个文件，点击右侧的 “撤销更改” (弯曲的返回箭头)。
- 命令行操作：
git restore <文件名>（丢弃所有修改用git restore .，慎用！）
场景二：不小心点了 + 号暂存，想撤回
执行了 git add，但还没 commit。
- 界面操作：在“暂存的更改”列表中，点击文件右侧的 - 号（取消暂存）。
- 命令行操作：
git restore --staged <文件名>
场景三：提交完了，发现漏了东西或写错备注
已经 commit 了，代码不想丢，只是想撤销这条 commit 记录。
- 界面操作：点击 “…” -> 提交 -> 撤销上次提交 (Undo Last Commit)。你的代码会原封不动地回到暂存区。
- 命令行操作：
git reset --soft HEAD^
场景四：彻底不要上次的提交了（核弹级命令⚠️）
连提交记录带修改的代码全部清空，彻底回到上一个版本。
- 命令行操作：
git reset --hard HEAD^
场景五：强行用本地覆盖云端（核弹级命令⚠️）
你的本地代码是正确的，但云端乱了，需要强行同步。
- 命令行操作：
git push origin main -f
💡 -f 即 --force（强制）。团队协作绝对不要用（会被同事追杀）；个人项目用起来很爽。
9. 神级插件推荐（进阶必备）
为了让你的 Git 体验直接起飞，强烈推荐在 VS Code 扩展市场安装以下三款插件：
- GitLens：绝对的神器。光标移到任意一行代码，就能在行尾隐隐约约显示这行代码是谁在什么时候写的，甚至还能看到当时的提交备注，堪称团队协作中的“甩锅/请教必备”利器。
- Git Graph：为你提供一个极其美观的底层分支演变路线图。当项目分支变多时，它可以帮你把复杂的合并历史梳理得一目了然。
- Git History：极佳的文件历史查阅工具！如果你想单独查看某个特定文件的“前世今生”，直接右键选择
Git: View File History，它会给你展示一个非常清爽直观的时间线界面。
结语
VS Code 将原本枯燥的 Git 命令行变成了优雅的点按操作。对于初学者来说，掌握 暂存 (+) -> 提交 (Commit) -> 推送 (Push) 这“三板斧”，就已经能应付 80% 的日常开发需求了。
如果这篇教程对你有帮助，欢迎点赞、收藏，并在评论区交流你遇到的问题！
