Windows环境，VS Code 中 Git 配置指南

本文介绍了在VSCode中配置和使用Git的完整指南。

主要内容包括：

基础配置（验证Git集成、设置用户信息）

三种操作方式（源代码管理面板、终端命令行、编辑器快捷操作）

常用操作演示（初始化仓库、连接远程仓库、分支操作、解决冲突）

推荐插件（GitLens、GitGraph）

常用快捷键

常见问题解决方案

文章提供了从基础到进阶的详细操作步骤，帮助开发者高效管理代码版本，特别适合Web前端开发者在VSCode环境中使用Git进行项目管理。

一文读懂：Git、Github、GitLab、SVN（附：快速上手 Git，用 VSCode 操作 Git ）

2026 前端开发 Windows 安装 Git 配置指南（有实际安装过程参考：适配版本 the latest 2.53.0(2) x64 ）

＜操作指南＞ GitHub新建项目 vsCode本地代码提交

Windows环境，VS Code 中 Git 配置指南

在VS Code中配置和使用Git非常方便，这是目前最流行的Git操作方式之一。

一、VS Code中的Git基础配置

1. 确认Git已正确集成

VS Code会自动检测系统安装的Git，无需额外配置。

打开VS Code终端（```Ctrl + `````），输入以下命令验证：

bash 复制代码

git --version

如果显示版本号，说明集成成功。

2. 设置Git用户信息（如果还没配置）

在VS Code终端中执行：

bash 复制代码

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱@example.com"

二、VS Code中操作Git的三种方式

方式1：源代码管理面板（最直观）

这是VS Code中最常用的Git操作界面，位于左侧活动栏的第三个图标（分支形状）。

打开方式：

点击左侧活动栏的源代码管理图标
快捷键：Ctrl + Shift + G

主要功能：

操作	操作方法
查看更改	在"更改"区域看到所有修改的文件
暂存文件	点击文件旁边的`+`号，或hover后点击暂存按钮
提交	输入提交信息，点击`✓`按钮（或`Ctrl+Enter`）
撤销修改	点击文件旁边的`↶`按钮
推送/拉取	点击底部状态栏的`↻`（同步）按钮
查看历史	点击右上角的时钟图标（或安装GitLens插件）

方式2：内置终端命令行（最灵活）

使用```Ctrl + ````` 打开终端，直接输入Git命令。这种方式适合熟悉命令行操作的开发者。

bash 复制代码

git add .
git commit -m "feat: 添加新功能"
git push origin main

方式3：编辑器内快捷操作（最高效）

行内暂存：在编辑器中，点击行号左侧的空心圆圈，可以暂存当前行的更改
悬停查看：鼠标悬停在代码行上，可以看到该行的Git修改信息（需要安装GitLens插件）

三、常用操作详细演示

1. 初始化仓库并首次提交

bash 复制代码

# 方式A：使用命令行
cd your-project
git init
git add .
git commit -m "first commit"

# 方式B：使用源代码管理面板
# 1. 打开源代码管理面板
# 2. 点击"初始化仓库"按钮
# 3. 输入提交信息，点击提交

2. 连接远程仓库（GitHub/Gitee）

bash 复制代码

# 在终端中执行
git remote add origin https://github.com/用户名/仓库名.git
git branch -M main
git push -u origin main

3. 分支操作

创建并切换分支：

bash 复制代码

# 命令行方式
git checkout -b feature/new-feature

# 源代码管理方式
# 1. 点击底部状态栏的分支名称（通常是main）
# 2. 选择"创建新分支"
# 3. 输入分支名

合并分支：

bash 复制代码

# 先切换到目标分支
git checkout main
# 合并
git merge feature/new-feature

4. 解决冲突

当出现合并冲突时，VS Code会：

在文件中标记冲突区域（<<<<<<< HEAD 和 >>>>>>>）
提供可视化按钮："Accept Current Change"、"Accept Incoming Change"等
冲突文件在源代码管理面板中会显示为红色

操作步骤：

打开有冲突的文件
点击编辑器上方的"Accept"按钮选择保留哪个版本
手动合并代码
保存文件
暂存并提交

四、推荐插件增强Git体验

1. GitLens（必装）

这是VS Code最强大的Git插件，功能包括：

行内责备：显示每行代码的最近提交信息、作者、时间
文件历史：查看文件的完整修改历史
仓库地图：可视化显示分支结构
代码搜索：快速跳转到任意提交的代码

安装：在扩展商店搜索"GitLens"

2. Git Graph

可视化显示Git提交历史图，类似SourceTree的界面。

3. Git History

查看和浏览Git历史记录，支持查看文件历史、分支历史等。

五、常用快捷键汇总

操作	快捷键
打开源代码管理面板	`Ctrl + Shift + G`
打开终端	```Ctrl + `````
提交暂存的更改	`Ctrl + Enter`
打开命令面板	`Ctrl + Shift + P`
查看Git操作命令	在命令面板中输入"Git:"

六、工作流示例：日常开发流程

bash 复制代码

# 1. 开始新功能前，先拉取最新代码
# 方式：点击底部状态栏的同步按钮，或终端执行 git pull

# 2. 创建新分支
# 方式：点击底部状态栏分支名 → 创建新分支 → 输入 feature/new-feature

# 3. 编写代码，多次提交
# 方式：源代码管理面板 → 暂存文件 → 输入提交信息 → 提交

# 4. 推送到远程
# 方式：点击同步按钮，或 git push origin feature/new-feature

# 5. 创建合并请求（在GitHub/GitLab网页操作）

# 6. 切换回主分支并拉取最新代码
git checkout main
git pull

七、常见问题解决

问题1：VS Code找不到Git

解决方案：

javascript 复制代码

// 在设置中手动指定Git路径
{
  "git.path": "C:\\Program Files\\Git\\bin\\git.exe"
}

问题2：中文乱码

解决方案：

javascript 复制代码

{
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.shellArgs.windows": ["--login", "-i"]
}

问题3：提交时显示"未找到Git"

解决方案：

确认Git已安装
重启VS Code
检查系统环境变量PATH中是否包含Git路径

八、最佳实践建议

频繁提交：每次完成一个小功能就提交，提交信息要清晰
使用.gitignore ：创建.gitignore文件，忽略node_modules、.env等文件
提交前检查更改：在源代码管理面板仔细查看每个文件的改动
善用快捷键 ：熟悉Ctrl+Shift+G和Ctrl+Enter提升效率
安装GitLens：这个插件会让代码审查和追溯变得非常方便

VS Code的Git集成非常强大，熟练掌握后可以完全不依赖命令行完成日常的Git操作。

建议先从源代码管理面板开始熟悉，然后慢慢过渡到混合使用命令行的方式，找到最适合自己的工作流。

bash 复制代码

86178@MuJinqiu MINGW64 ~/Desktop
$ git --version
git version 2.53.0.windows.2

git --version git version 2.53.0.windows.2

已完成的内容

Git版本确认 ：你安装的是 2.53.0.windows.2，这是一个比较稳定的版本
用户信息配置：已成功设置用户名和邮箱
环境正常：Git Bash可以正常运行

📋 下一步可以做什么

1. 验证配置是否生效

bash 复制代码

# 查看所有Git配置
git config --list

# 或者单独查看用户信息
git config --global user.name
git config --global user.email

2. 创建一个测试项目

在桌面上创建一个测试文件夹，练习Git操作：

bash 复制代码

# 进入桌面
cd ~/Desktop

# 创建测试文件夹
mkdir git-test

# 进入测试文件夹
cd git-test

# 初始化Git仓库
git init

# 创建一个测试文件
echo "# Git测试项目" > README.md

# 查看状态
git status

# 添加文件到暂存区
git add README.md

# 提交
git commit -m "第一次提交：添加README文件"

3. 查看提交历史

bash 复制代码

# 查看简洁版提交记录
git log --oneline

# 查看详细的提交历史
git log

4. 连接GitHub（可选）

如果你想将代码推送到GitHub：

bash 复制代码

# 先在GitHub创建仓库，然后执行
git remote add origin https://github.com/你的用户名/仓库名.git

# 推送到远程
git push -u origin main

⚠️ 一个小建议

你的Git版本是 2.53.0（2021年发布），而最新版本是 2.4x.x。如果后续遇到问题或想体验新功能，可以考虑升级到最新版：

访问 https://git-scm.com/download/win
下载最新版本重新安装（配置可以直接覆盖安装，已有配置会保留）

💡 后续学习建议

在VS Code中练习 ：打开VS Code，打开刚才创建的 git-test 文件夹，尝试使用源代码管理面板操作Git
学习常用Git命令：
- git status - 查看状态
- git add - 暂存文件
- git commit - 提交
- git log - 查看历史
- git branch - 分支管理
- git push/pull - 远程同步
创建.gitignore文件 ：对于前端项目，创建 .gitignore 文件并添加：
bash 复制代码
```
node_modules/
.env
.DS_Store
dist/
.vscode/
```

现在你已经完成了Git的基础配置，可以开始使用Git管理你的Web前端项目了！