相信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
第二步：从远程拉取分支至本地操作
一、当你本地无项目文件时，从这看起，若有，则跳过一，直接看步骤二；
- 新建一个空文件，文件名为proName（根据项目命名）；
手动新建文件夹或命令mkdir proName - 初始化项目
git init - 与远程分支建立关联（远程仓库链接在git上）
git remote add origin [email protected]:xxx/xxx.git - 拉取远程分支至本地
git fetch origin dev（dev为远程仓库的分支名） - 创建本地分支并关联到远程分支
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
以上提交代码至远程步骤等同于如下命令：
-
git add .暂存当前分支所有本地修改的文件 -
git commit -m 'logs'提交本次修改的日志logs -
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，步骤如下：
- 切换本地分支至dev，
git pull下； git merge dev- 解决冲突-
手动 - 代码提交（参照一、代码提交）
四、历史分支查看
点击文件右侧图标，可查看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的版本的内容再反向修改回去，版本会递增，不影响之前提交的内容。
- 当代码已经commit但没有push时，可使用如下命令操作：
git revert HEAD //撤销倒数第一次提交
git revert HEAD^ //撤销倒数第二次提交
git-revert HEAD~2 //撤销倒数第三次提交
git revert commit //（比如：fa042ce57ebbe5bb9c8db709f719cec2c58ee7ff）撤销指定的版本，撤销也会作为一次提交进 - 当代码已经commit并push时，可使用如下命令：
git revert HEAD~1 //代码回退到前一个版本
当回退有冲突时，需手动合并冲突并进行修改，再 commit 和 push。这相当于增加了一次新的提交并且版本库中有记录。
-
git reset
git reset 是撤销某次提交，但是此次之后的修改都会被退回到暂存区。除了默认的 mixed 模式，还有 soft 和 hard 模式。
- 如果我们的有两次 commit 但是没有 push 代码
git reset HEAD~1 //撤销前一次 commit，所有代码回到 Working Copy
- 假如我们有几次代码修改，并且都已经 push 到了版本库中。
git reset --hard HEAD~2 //本地的Wroking Copy回退到2个版本之前。
- 只回退某个指定文件到指定版本
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)