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 输入以下命令验证git --version如果显示版本号说明集成成功。2. 设置Git用户信息如果还没配置在VS Code终端中执行git config --global user.name 你的用户名 git config --global user.email 你的邮箱example.com二、VS Code中操作Git的三种方式方式1源代码管理面板最直观这是VS Code中最常用的Git操作界面位于左侧活动栏的第三个图标分支形状。打开方式点击左侧活动栏的源代码管理图标快捷键Ctrl Shift G主要功能操作操作方法查看更改在更改区域看到所有修改的文件暂存文件点击文件旁边的号或hover后点击暂存按钮提交输入提交信息点击✓按钮或CtrlEnter撤销修改点击文件旁边的↶按钮推送/拉取点击底部状态栏的↻同步按钮查看历史点击右上角的时钟图标或安装GitLens插件方式2内置终端命令行最灵活使用Ctrl 打开终端直接输入Git命令。这种方式适合熟悉命令行操作的开发者。git add . git commit -m feat: 添加新功能 git push origin main方式3编辑器内快捷操作最高效行内暂存在编辑器中点击行号左侧的空心圆圈可以暂存当前行的更改悬停查看鼠标悬停在代码行上可以看到该行的Git修改信息需要安装GitLens插件三、常用操作详细演示1. 初始化仓库并首次提交# 方式A使用命令行 cd your-project git init git add . git commit -m first commit # 方式B使用源代码管理面板 # 1. 打开源代码管理面板 # 2. 点击初始化仓库按钮 # 3. 输入提交信息点击提交2. 连接远程仓库GitHub/Gitee# 在终端中执行 git remote add origin https://github.com/用户名/仓库名.git git branch -M main git push -u origin main3. 分支操作创建并切换分支# 命令行方式 git checkout -b feature/new-feature # 源代码管理方式 # 1. 点击底部状态栏的分支名称通常是main # 2. 选择创建新分支 # 3. 输入分支名合并分支# 先切换到目标分支 git checkout main # 合并 git merge feature/new-feature4. 解决冲突当出现合并冲突时VS Code会在文件中标记冲突区域 HEAD和提供可视化按钮Accept Current Change、Accept Incoming Change等冲突文件在源代码管理面板中会显示为红色操作步骤打开有冲突的文件点击编辑器上方的Accept按钮选择保留哪个版本手动合并代码保存文件暂存并提交四、推荐插件增强Git体验1.GitLens必装这是VS Code最强大的Git插件功能包括行内责备显示每行代码的最近提交信息、作者、时间文件历史查看文件的完整修改历史仓库地图可视化显示分支结构代码搜索快速跳转到任意提交的代码安装在扩展商店搜索GitLens2.Git Graph可视化显示Git提交历史图类似SourceTree的界面。3.Git History查看和浏览Git历史记录支持查看文件历史、分支历史等。五、常用快捷键汇总操作快捷键打开源代码管理面板Ctrl Shift G打开终端Ctrl 提交暂存的更改Ctrl Enter打开命令面板Ctrl Shift P查看Git操作命令在命令面板中输入Git:六、工作流示例日常开发流程# 1. 开始新功能前先拉取最新代码 # 方式点击底部状态栏的同步按钮或终端执行 git pull # 2. 创建新分支 # 方式点击底部状态栏分支名 → 创建新分支 → 输入 feature/new-feature # 3. 编写代码多次提交 # 方式源代码管理面板 → 暂存文件 → 输入提交信息 → 提交 # 4. 推送到远程 # 方式点击同步按钮或 git push origin feature/new-feature # 5. 创建合并请求在GitHub/GitLab网页操作 # 6. 切换回主分支并拉取最新代码 git checkout main git pull七、常见问题解决问题1VS Code找不到Git解决方案// 在设置中手动指定Git路径 { git.path: C:\\Program Files\\Git\\bin\\git.exe }问题2中文乱码解决方案{ terminal.integrated.defaultProfile.windows: Git Bash, terminal.integrated.shellArgs.windows: [--login, -i] }问题3提交时显示未找到Git解决方案确认Git已安装重启VS Code检查系统环境变量PATH中是否包含Git路径八、最佳实践建议频繁提交每次完成一个小功能就提交提交信息要清晰使用.gitignore创建.gitignore文件忽略node_modules、.env等文件提交前检查更改在源代码管理面板仔细查看每个文件的改动善用快捷键熟悉CtrlShiftG和CtrlEnter提升效率安装GitLens这个插件会让代码审查和追溯变得非常方便VS Code的Git集成非常强大熟练掌握后可以完全不依赖命令行完成日常的Git操作。建议先从源代码管理面板开始熟悉然后慢慢过渡到混合使用命令行的方式找到最适合自己的工作流。86178MuJinqiu MINGW64 ~/Desktop $ git --version git version 2.53.0.windows.2git --version git version 2.53.0.windows.2已完成的内容Git版本确认你安装的是2.53.0.windows.2这是一个比较稳定的版本用户信息配置已成功设置用户名和邮箱环境正常Git Bash可以正常运行 下一步可以做什么1. 验证配置是否生效# 查看所有Git配置 git config --list # 或者单独查看用户信息 git config --global user.name git config --global user.email2. 创建一个测试项目在桌面上创建一个测试文件夹练习Git操作# 进入桌面 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. 查看提交历史# 查看简洁版提交记录 git log --oneline # 查看详细的提交历史 git log4. 连接GitHub可选如果你想将代码推送到GitHub# 先在GitHub创建仓库然后执行 git remote add origin https://github.com/你的用户名/仓库名.git # 推送到远程 git push -u origin main⚠️ 一个小建议你的Git版本是2.53.02021年发布而最新版本是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文件并添加node_modules/ .env .DS_Store dist/ .vscode/现在你已经完成了Git的基础配置可以开始使用Git管理你的Web前端项目了