VSCode 代码管理插件GitLens使用指南

相信vsCode的强大功能深受开发人员的喜爱，作为前端开发的我，最近一直头疼于代码的管理与提交，这篇文章记录下vsCode好用的源代码管理插件GitLen，希望能帮助到那些和我有同样困扰的你们。❥(^_-)

第一步：在vsCode的扩展功能里搜索GitLens、Git History

[图片上传失败...(image-7d0f53-1631150187696)]

pic1.png

[图片上传失败...(image-cb616a-1631150187696)]

pic2.png

下载好插件后，会出现

[图片上传失败...(image-c48662-1631150187696)]

logo1.png

图标，点击查看当前项目的分支情况（假设当前你已从远程拉取项目至本地）

[图片上传失败...(image-4c0ccc-1631150187696)]

pic3.png

第二步：从远程拉取分支至本地操作

一、当你本地无项目文件时，从这看起，若有，则跳过一，直接看步骤二；

1. 新建一个空文件，文件名为proName（根据项目命名）；
   手动新建文件夹或命令 mkdir proName
2. 初始化项目 git init
3. 与远程分支建立关联（远程仓库链接在git上）git remote add origin [email protected]:xxx/xxx.git
4. 拉取远程分支至本地 git fetch origin dev（dev为远程仓库的分支名）
5. 创建本地分支并关联到远程分支 git checkout -b dev(本地分支名) origin/dev(远程分支名)

至此，本地分支dev已与远程分支建立关联，并拉取dev分支项目，git pull可拉取项目远程所有分支，可通过如下命名查看本地分支及远程分支情况。

git branch 查看本地分支
git branch -a 查看当前所在分支及远程分支
git branch -r 查看远程分支
git branch -vv 查看本地分支与远程分支的关联关系

二、本地已有项目时，点击 [图片上传失败...(image-16247d-1631150187696)] logo2.png

图标，就可查看当前项目的分支情况，一目了然。

[图片上传失败...(image-e9a6ad-1631150187696)]

pic4.png

当修改本地文件内容时，已修改文件可通过如下步骤查看，点击对应的文件可通过Working Tree查看已修改情况。

第三步：代码提交、分支切换、合并、历史分支查看

一、代码提交

点击

[图片上传失败...(image-b414b4-1631150187696)]

logo3.png

图标，可暂存已修改文件，在输入框中输入日志内容，ctrl+enter，然后点击vsCode编辑器左下角的图标，

[图片上传失败...(image-6e098a-1631150187696)]

logo4.png

即可提交至远程；

[图片上传失败...(image-a4cbd-1631150187696)]

pic5.png

以上提交代码至远程步骤等同于如下命令：

1. git add . 暂存当前分支所有本地修改的文件
2. git commit -m 'logs' 提交本次修改的日志logs
3. git push 将本地修改内容提交至远程

二、分支切换

点击当前项目所在分支， 显示该项目可切换的远程分支，选择要切换的分支，即可在本地创建与远程分支同名的分支并与之关联。

[图片上传失败...(image-2647b8-1631150187696)]

pic6.png

pic4.png中的Branches中会新增一个分支，也可通过如下命令查看；

git branch可查看本地会多一个分支
git branch -vv可查看本地新增的分支与远程分支关联

以上步骤等同于命令 git checkout -b dev(本地分支名) origin/dev(远程分支名)

三、分支合并

1、若协作开发，各分支之间无冲突，可提交代码至远程后，至git上merge分支到上线分支，无须本地合并操作。

[图片上传失败...(image-b4c63d-1631150187696)]

pic7.png

[图片上传失败...(image-99d6ee-1631150187696)]

pic8.png

2、若合并有冲突，则需拉取分支代码至本地，解决冲突，再push到线上。假设有冲突的分支是本地分支local与远程分支dev，步骤如下：

1. 切换本地分支至dev，git pull下；
2. git merge dev
3. 解决冲突-手动
4. 代码提交（参照一、代码提交）

四、历史分支查看

点击文件右侧图标，可查看git log 历史记录

[图片上传失败...(image-476676-1631150187696)]

pic9.png

[图片上传失败...(image-c3b58a-1631150187696)]

pic10.png

额外附上git常用命令，我们不可只会借用工具操作而不会常用的命令

git status 查看当前分支状态
git diff dev（本地分支） remote（远程分支） 比较本地分支与远程分支区别
git log 查看提交日志
如果嫌输出信息太多，看得眼花缭乱的，可以试试加上--pretty=oneline参数；

版本回退

版本回退需注意git revert和git reset的区别

• git revert
  git revert 撤销某次操作，此次操作之前和之后的 commit 和 history 都会保留，并且把这次撤销作为一次最新的提交。git revert是提交一个新的版本，将需要revert的版本的内容再反向修改回去，版本会递增，不影响之前提交的内容。

1. 当代码已经commit但没有push时，可使用如下命令操作：
   git revert HEAD //撤销倒数第一次提交
git revert HEAD^ //撤销倒数第二次提交
git-revert HEAD~2 //撤销倒数第三次提交
git revert commit //（比如：fa042ce57ebbe5bb9c8db709f719cec2c58ee7ff）撤销指定的版本，撤销也会作为一次提交进
2. 当代码已经commit并push时，可使用如下命令：
   git revert HEAD~1 //代码回退到前一个版本

当回退有冲突时，需手动合并冲突并进行修改，再 commit 和 push。这相当于增加了一次新的提交并且版本库中有记录。

• git reset
  git reset 是撤销某次提交，但是此次之后的修改都会被退回到暂存区。除了默认的 mixed 模式，还有 soft 和 hard 模式。

1. 如果我们的有两次 commit 但是没有 push 代码

git reset HEAD~1      //撤销前一次 commit，所有代码回到 Working Copy

1. 假如我们有几次代码修改，并且都已经 push 到了版本库中。

git reset --hard HEAD~2   //本地的Wroking Copy回退到2个版本之前。

1. 只回退某个指定文件到指定版本

git reset a4e215234aa4927c85693dca7b68e9976948a35e  xxx

4.回退到指定版本

git reset --hard commitId（通过git log可查看提交的commitId）

如果你使用的是webstorm，它也有很好用的git插件，比vsCode的GitLens好使，也有人说webstorm比较重，不喜欢；当然，个人选择，随意。仅附一图对比。

[图片上传失败...(image-f03fac-1631150187696)]

pic11.png

希望上面整理的操作可以帮助到你，后续也会持续更新git常用的命令及操作，如果觉得有用，请点个赞！

vsCode 源代码管理插件GitLens使用指南 你值得收藏 - (jianshu.com)