vsCode 源代码管理插件GitLens使用指南 你值得收藏


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

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

pic1.png

pic2.png


下载好插件后，会出现

logo1.png

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


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 查看本地分支与远程分支的关联关系

二、本地已有项目时，点击

logo2.png

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


pic4.png

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

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

一、代码提交

点击

logo3.png

图标，可暂存已修改文件，在输入框中输入日志内容，ctrl+enter即可提交至远程；

pic5.png

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

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

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


pic6.png

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

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

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

三、分支合并

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


pic7.png

pic8.png

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

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

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


pic9.png

pic10.png

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

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

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


pic11.png

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