【GitHub 代码仓 04】Visual Studio Code Git 新手使用指南

前言

Visual Studio Code (VS Code) 内置了强大的 Git 版本控制功能，无需安装额外插件即可完成日常代码管理。对于新手来说，这意味着：

图形化操作：无需记忆复杂的命令行指令
实时反馈：代码修改、冲突解决一目了然
无缝集成：编辑、提交、推送都在同一个窗口完成

本指南将带你从零开始，掌握 VS Code 中 Git 的核心用法。

一、环境准备

1、安装 Git

VS Code 本身不包含 Git 引擎，需先安装：

Windows/macOS : 访问 git-scm.com 下载安装包

Linux: 使用包管理器安装（如 sudo apt install git）
验证安装：打开终端输入 git --version，显示版本号即成功

2、配置用户信息（仅需一次）

复制代码

git config --global user.name "你的名字"
git config --global user.email "your.email@example.com"

3、启动 VS Code

打开项目文件夹后，VS Code 会自动检测 Git 并启用版本控制功能。

二、核心工作流

场景 1：初始化新项目

打开项目文件夹

点击左侧活动栏的源代码管理图标（分支形状，快捷键 Ctrl+Shift+G）

点击初始化仓库 (Initialize Repository) 按钮

所有文件出现在"更改"列表，表示 Git 已开始追踪

场景 2：提交第一次代码

1、暂存文件：

单个文件：点击文件名旁的 + 号

全部文件：点击"更改"标题旁的 + 号

2、输入提交信息：在顶部输入框写描述（如 "Initial commit"）

3、提交：按 Ctrl+Enter 或点击 ✔ 按钮

如果git没有配置所有仓库

git config --global

可以配置当前仓库

git config

区别对比

例如

复制代码

git config user.name "你的名字"
git config user.email "your.email@example.com"

配置完再次提交

4、发布，可以选择私有或者公开

5、登录GitHub 查看是否提交成功

场景 3：查看修改差异

在"源代码管理"面板点击任意文件
编辑器分屏显示：左侧原始代码 vs 右侧当前代码

绿色=新增，红色=删除，蓝色=修改

三、分支管理

创建新分支

点击左下角状态栏的分支名（如 main）

选择 + Create new branch...

输入分支名（如 feature/login），回车自动切换

切换分支

直接点击左下角分支名，从列表选择目标分支

合并分支

切换到目标分支（如 main）
选择要合并的分支（如 feature/login）

删除分支

可以选择删除本地或者远程的分支

四、连接远程仓库

克隆现有项目

Ctrl+Shift+P 打开命令面板

输入 Git: Clone

粘贴仓库 URL（如 https://github.com/user/repo.git）

选择本地保存路径

克隆完成

发布本地项目到远程

点击左下角同步按钮（圆形箭头）或源代码面板的 ... → Publish Branch
选择远程服务（如 GitHub）
VS Code 自动创建远程仓库并推送代码

日常同步

拉取最新代码：点击同步按钮或 ... → Pull
推送本地提交：点击同步按钮或 ... → Push
一键同步：点击同步按钮（默认先 Pull 再 Push）

五、解决合并冲突

当多人修改同一行代码时，VS Code 会高亮冲突区域：

复制代码

<<<<<<< HEAD
你的代码
=======
别人的代码
>>>>>>> feature-branch

打开冲突文件，看到 3 个操作按钮：
- Accept Current Change：保留你的代码
- Accept Incoming Change：采用别人的代码
- Accept Both Changes：两段都保留
点击合适的按钮，冲突标记自动清除
保存文件 → 暂存 → 提交，冲突解决完成

六、忽略不需要追踪的文件

右键文件/文件夹 → Add to .gitignore

常用忽略项：node_modules/, .env, *.log

七、VS Code的Git界面

1、源代码管理面板

VS Code的Git功能主要集中在左侧活动栏的源代码管理面板中。

界面组成：

更改列表：显示所有被修改、新增或删除的文件
- M 标记：已修改的文件
- U 标记：未跟踪的新增文件
- D 标记：已删除的文件
暂存的更改：准备提交的文件会移到这里
提交消息输入框：面板顶部的输入框，用于填写提交说明
更多操作菜单：右上角的 ... 图标，包含推送、拉取等高级命令

2 、状态栏信息

VS Code底部状态栏左侧会显示：

当前分支名称（如 main 或 master）
同步状态图标（表示有未推送/拉取的提交）

八、参考

官方文档 ：VS Code Version Control

Git 基础教程 ：Git Official Documentation