VS Code 集成 Git 全流程可视化操作指南

1. 准备工作

• 安装 Git 并配置用户名邮箱：

  git config --global user.name "YourName"
  git config --global user.email "email@example.com"
  

• VS Code 安装插件：
  GitLens（增强功能） + Git Graph（可视化分支）

2. 克隆仓库

1. 操作路径：左侧活动栏 → 源代码管理图标（▽）→ 克隆存储库
2. 流程：
   • 输入远程仓库 URL（GitHub/GitLab 等）
   • 选择本地存储路径
   • 自动打开克隆后的项目

💡 提示：按 Ctrl+Shift+P → 输入 Git: Clone 可快速调用命令面板

3. 修改与提交

1. 修改文件：
   直接编辑项目文件，VS Code 自动检测变更（文件在「源代码管理」视图显示为 M 修改状态）
2. 暂存更改：
   • 点击文件右侧 + 图标（或全选 暂存所有更改）
   • 未暂存的更改显示在 更改 区域
3. 提交到本地：
   • 输入提交信息（Commit Message）
   • 点击顶部 √ 提交图标（或按 Ctrl+Enter）

⚠️ 提交前务必描述清晰变更内容！

4. 推送与拉取

• 推送（Push）：
  提交后点击状态栏 ↓↑ 图标 → 选择 推送（或 Ctrl+Shift+P → Git: Push）
• 拉取（Pull）：
  点击状态栏 ↓ 图标 → 选择 拉取（同步远程最新代码）

5. 冲突解决（关键步骤）

当多人修改同一文件时，推送会提示冲突：

1. 识别冲突：
   • 冲突文件显示 ⚠️ 警告图标
   • 文件内标记冲突区域：

     <<<<<<< HEAD
     你的修改内容
     =======
     他人修改内容
     >>>>>>> commit-id
     

2. 解决流程：
   • 打开冲突文件，点击 接受当前更改 / 接受传入更改 / 保留双方更改
   • 手动删除 <<<<<<< 等标记
   • 保存文件 → 暂存更改 → 重新提交
3. 工具辅助：
   使用 GitLens 的合并编辑器（三栏对比视图）直观处理冲突

6. 分支管理（可视化）

1. 查看分支：
   点击状态栏分支名（如 main）→ 显示所有分支
2. 创建分支：
   • 选择 + 创建新分支 → 输入分支名
   • 自动切换到新分支
3. 合并分支：
   • 切回目标分支（如 main）
   • 右键待合并分支 → 合并分支

🌟 推荐：安装 Git Graph 插件，通过图形界面拖拽操作分支

7. 高级操作

• 撤销更改：
  右键文件 → 放弃更改（恢复至上个提交版本）
• 查看历史：
  右键文件 → 打开时间线（查看所有提交记录）
• 储藏更改（Stash）：
  临时保存未提交的修改 → 点击 ··· → 储藏

总结流程图

graph LR
A[克隆仓库] --> B[修改文件]
B --> C[暂存更改]
C --> D[提交到本地]
D --> E{远程有更新？}
E -- 是 --> F[拉取并解决冲突]
E -- 否 --> G[推送更改]
F --> G
G --> H[分支合并/切换]

✅ 最佳实践：

• 频繁拉取（避免大规模冲突）
• 提交前运行测试（如有）
• 使用 .gitignore 排除临时文件
  通过可视化操作，95% 的 Git 场景无需命令行！