VS Code 集成 Git 操作指南：从环境配置到分支管理

方法三：终端命令查看

也可以在终端输入 cat ~/.ssh/id_ed25519.pub 并回车。终端会直接输出那一长串文本，用鼠标选中这一整段并按 Ctrl+C 复制即可。

2.3 将公钥添加到 GitHub

1. 登录 GitHub，点击右上角头像 -> Settings。
2. 左侧菜单找到 SSH and GPG keys，点击 New SSH key。
3. Title 随便填（用来标记这台电脑，如 My Laptop）。
4. 在 Key 输入框中，粘贴你刚刚在 2.2 步复制好的那一长段公钥内容。
5. 点击 Add SSH key 完成添加。

3. 在 VS Code 中初始化项目

准备工作完成，开始写代码！这里分为两种常见场景：

场景一：本地新建项目（从无到有）

1. 在 VS Code 中打开你新建的项目文件夹。
2. 点击左侧菜单栏的 '源代码管理' 图标（或按 Ctrl + Shift + G）。
3. 点击 '初始化存储库 (Initialize Repository)'。

场景二：克隆已有项目（接手代码）

1. 按下 F1 或 Ctrl + Shift + P 打开命令面板。
2. 输入 Git: Clone 并回车。
3. 粘贴你在 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 界面操作：

1. 修改代码：只要代码有变动，左侧'源代码管理'图标就会出现数字提示。
2. 暂存 (Add)：鼠标悬停在变动的文件上，点击右侧的 + 号，文件就会进入'暂存的更改'列表。
3. 提交 (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 扩展市场安装以下三款插件：

1. GitLens：功能强大。光标移到任意一行代码，就能在行尾显示这行代码是谁在什么时候写的，甚至还能看到当时的提交备注，堪称团队协作中的利器。
2. Git Graph：提供一个美观的底层分支演变路线图。当项目分支变多时，它可以帮你把复杂的合并历史梳理得一目了然。
3. Git History：极佳的文件历史查阅工具！如果你想单独查看某个特定文件的'前世今生'，直接右键选择 Git: View File History，它会给你展示一个非常清爽直观的时间线界面。

结语

VS Code 将原本枯燥的 Git 命令行变成了优雅的点按操作。对于初学者来说，掌握 暂存 (+) -> 提交 (Commit) -> 推送 (Push) 这'三板斧'，就已经能应付 80% 的日常开发需求了。