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 后缀的公钥文件。
方法二：终端快捷复制
如果你觉得找文件夹麻烦，可以直接在刚才的终端里输入以下命令，它会悄悄把公钥内容直接复制到你的鼠标剪贴板里：
- 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: 完成登录页面布局），然后点击下方的 '提交' 按钮。
💻 对应的纯命令行操作：
在 VS Code 中按 Ctrl + ~ 打开集成终端，你可以用以下命令实现完全相同的效果：
# 1. 查看当前哪些文件被修改了（相当于看左侧面板）
git status
# 2. 将所有修改过的文件加入暂存区（相当于点全部的 + 号）
git add .
# 或者只暂存指定文件：
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% 的日常开发需求了。