Git结合Visual Studio Code高效团队开发入门教程

概述

Git 是一个开源的分布式版本控制系统，用于高效管理任何大小型项目源代码。Visual Studio Code是一款轻量级但是开发功能齐全的代码编辑器，可以通过各种插件的加持变身成为接近IDE的开发工具。本博客是入门教程，向初学者介绍如何结合Git和VS Code这两个强大的工具高效地进行日常团队协作开发。

• Git与代码管理

• 并行开发

Git与VS Code的安装

Git的下载与安装：Git (git-scm.com) => 下载 Git-2.45.2-64-bit.exe 双击安装即可。

参考教程：Git 详细安装教程（详解 Git 安装过程的每一个步骤）_git安装-CSDN博客

当在windows文件夹空白处右键菜单中出现 “Git GUI Here”和”Git Bash Here”的字样说明安装成功：

VS code的下载与安装：Download Visual Studio Code - Mac, Linux, Windows 。

参考教程：VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了_vscode使用教程-CSDN博客

Git 基本操作

Git代码管理系统图解：

• Local work space：本地工作区
• Index/Stage area: 暂存区
• Local repository：本地仓库
• Remote repository：远程仓库

1、本地代码库的初始化与配置

// 在本地空文件夹中创建local work space
git init

// 配置用户名与邮件地址
git config --global user.name Bob
git config --global user.email Bob@126.com

// 查看配置
git config --list     (或者git config -l)

2、本地代码库的文件基本操作：Local work space <-> Stage area <-> Local repository

// 检查当前状态
git status

// 检查历史提交信息
git log

// 本地工作区 -> 暂存区
git add [1.txt] [2.txt]         (添加单个/多个文件)
git add .                       (添加所有文件)

// 暂存区 -> 本地仓库
git commit -m "your commit info"   (必须添加-m信息，概括当前提交的内容)

// 撤销add：reset命令：相当于暂存区 -> 本地工作区
git reset [1.txt] [2.txt]    (撤销add 1个/多个文件)
git reset                    (撤销add 所有文件)

// 撤销提交：reset命令：重置HEAD指针到某个指定的commit版本(HEAD~1表示当前HEAD的上一个版本，也可以用hash值指定版本)
// --mixed 参数(默认)：重置暂存区，不重置工作区，两个版本的差异不会丢失，有差异的文件状态是"changed"(未暂存)
git reset -mixed HEAD~1             (或者git reset HEAD~1 )
// --soft 参数：不重置暂存区，不重置工作区，两个版本的差异不会丢失，有差异的文件状态是"modified" (已暂存)
git reset -soft HEAD~1              
// --hard 参数：重置暂存区和工作区，两个版本的差异会丢失(慎用！)
git reset -hard HEAD~1              

// 删除文件
git rm [1.txt]

// 比较: 本地工作区 vs 暂存区
git diff

// 比较: 暂存区 vs 本地仓库
git diff --cached .

// 比较: 本地工作区 vs 本地仓库
git diff HEAD

reset命令详解：Git - git-reset Documentation (git-scm.com)

3、分支

// 查看所有分支信息
git branch

// 新建分支
git branch [new-branch]

// 切换到分支
git checkout [branch-name]

// 删除分支
git branch -d [branch-name]

Git连接GitHub代码托管平台

登录GitHub，新建一个名为”GitTest01.git”的远程仓库。将其与本地仓库进行连接：

// 查看当前远程状态
git remote -v

// 添加远程仓库到本地git链接，其中"origin"是远程仓库在本地的别名，可以换成别的string
git remote add origin https://github.com/HelloPhyJack/GitTest01.git

将本地仓库已经存在的代码推送到远程仓库：（注意：GitHub上默认分支名是main，本地默认分支是master，为了与远程保持一致，我们在本地新建名为”main”的分支并切换到main）

// 本地新建main分支并切换到main
git branch main
git checkout main

// 将本地main分支的内容推送到远程：(origin是远端仓库名，main是本地分支名)
git push -u origin main

注意：首次push可能会有弹窗，提示需要登录Github账号和密码，输入即可（之后会存储在windows密码管理器中无需重复输入）。当然也可以选择token的方式登录（建议使用前者，tokens好像会过期）。

GitHub设置tokens： 点击头像->settings->Developer settings->Personal access tokens (classic)->Generate new token

在每一次进行push之前，一定要先pull以确定本地代码是基于最新的远程代码进行的开发。

git pull origin main

VS Code中使用Git

VS code 自带Git功能：可以在左侧的导航栏中切换文件视图与Git视图：

Git在VS code中的操作十分简单，可以与bash命令一一对应，因为VS code的轻量级+拥有图形化的操作界面+强大的插件支持倍受开发者好评。

案例演示：使用VS Code和Git，从0创建一个团队合作开发的GitHub项目

• 项目创建者Bob登录 GitHub，创建一个空的repository启动项目，名为GitStudy01（图中部分截图为GitTest001，一律视为同一仓库（制作教程时换了名字）)。

  

• Bob获取到远程仓库的http链接：

  

• Bob在本地某个folder下面打开git bash，clone刚才创建的远程项目，然后进入project文件夹：

  // 从远程仓库拷贝到本地（免去本地新建项目的步骤）
  git clone https://github.com/HelloPhyJack/GitStudy01.git
  cd GitStudy01
  
  // 配置个人信息和远程仓库连接
  git config --global user.name Bob
  git config --global user.email Bob@163.com
  git remote add RemoteRep01 https://github.com/HelloPhyJack/GitStudy01.git
  
  // 查看状态
  git status
  git log
  git remote -v

• Bob使用vs code打开”GitStudy01”这个文件夹，并新建/修改/删除源文件，以完成项目的初始形态：（V1版本）

  

• Bob使用git bash或者vs code，将代码上传到远程仓库：（V1版本）

  git add .
  git commit -m "Bob initialized project - V1"
  git push -u RemoteRep01 main

• 之后，另一个团队成员Eric也要加入项目开发，他在自己的电脑上的某个文件夹直接进行clone就可以把源代码copy到本地，同时需要配置用户名、邮箱、remote仓库连接，然后修改其中的文件，并push到远程仓库：（V2版本）

  // Eric从Bob的远程仓库中clone代码到自己的本地仓库：（本地原来没有项目，clone以后自动生成项目文件夹GitTest01）
  git config --global user.name Eric
  git config --global user.email Eric@163.com
  git clone https://github.com/HelloPhyJack/GitStudy01.git
  cd GitStudy01.git
  git status
  git log
  git branch
  
  // Eric配置本地仓库与远程仓库相连接：
  git remote add RemoteHub01 https://github.com/HelloPhyJack/GitTest01.git
  git remote -v
  
  // Eric修改了一部分文件 例如readme等
  // ...
  
  // Eric提交修改(需要自己的电脑上已经存储了GitHub账号和密码，否则在push时弹窗输入)
  git add .
  git commit -m "Eric join project - V2"
  git push -u RemoteHub01 main

• 在Eric加入项目的同时，Bob也正在同步进行对项目的修改，Bob是基于自己当时的版本V1开发的（V3’），但是Eric抢先提交了V2版本，因此Bob的基于V1开发的V3’不能提交到Remote Rep，（Git要求必须基于最新的版本的开发才能提交），因此Bob必须要先接收Eric的改动，并且处理可能的冲突以后，才能向Remote Rep提交自己的修改：（merged V3）

  git pull RemoteRep01 main

  通常新增和删除文件不会有冲突，但是如果两个人修改了同一个文件，则可能产生冲突，这时Git不知道怎么处理（保留哪个版本），因此需要开发者自行确认。例如：Bob和Eric都修改了readme.md文件，但是Eric抢先在Bob之前提交到了远程仓库中，这时Bob直接进行push操作会失败，git会提示他需要先pull，并且手动处理完冲突后才能push：(直接编辑文件变成想要的样子即可，也可以尝试vs code上的快捷菜单)

  

  Bob 处理完冲突以后，就可以提交代码到Github了

  git push -u RemoteRep01 main

• 后面Bob和Eric又先后对项目进行了修改(Bob先提交V3.1，Eric后提交V3.2，当然Eric需要处理冲突，然后一次性提交两个commit)。整个项目的多人开发历史流程为：

  

  这时在GitHub上的history可以看到多个人对远程仓库的的更改历史：

  

  而每个开发者的本地仓库只要拉取了最新代码，使用git log也能看到所有人对项目的开发历史：

  

参考链接

文档

• Git - git Documentation (git-scm.com)
• Git - Book (git-scm.com)
• Git 常用命令大全 (runoob.com)
• 高质量的Git中文教程 (selierlin.github.io)
• 常用 Git 命令清单 - 阮一峰的网络日志 (ruanyifeng.com)
• Git 图解、常用命令-配置管理-火龙果软件 (uml.org.cn)

入门教程

• Git工作流和核心原理 | GitHub基本操作 | VS Code里使用Git和关联GitHub_哔哩哔哩_bilibili

插件

• 【VSCode ☆ Git 】代码管理进阶 ➔ Git Graph 插件_哔哩哔哩_bilibili
• 【VSCode ☆ Git 】代码管理进阶 ➔ Git History 插件_哔哩哔哩_bilibili