利用WebStorm来管理你的Github

灰太狼 2022-06-18 04:10 489阅读 0赞

本篇主要介绍的博主最近一直在玩的Github，和WebStorm的一些相关联用法。

## 什么是Github ##

Github是一个共享虚拟主机服务，用于存放使用Git版本控制的软件代码和内容项目，以最简单的方式来说，其实就是一个代码库，上面有全世界无数优秀的码农上传自己的作品和大家共享（当然，Github本身有免费账户和收费账户，收费账户才能使用私人管理，也就是你的项目将不会被公开）。

仅仅是个代码库，当然是没有办法火起来的，Github除了可以给用户自己管理项目外，还允许用户跟踪其他用户、组织、软件库的动态，对软件代码的改动和 bug 提出评论，然后作者视情况来合成热心用户的修改到自己的代码中，这其实就是一种很棒的互联网精神，开放的思想让大家可以在Github社区找到自己感兴趣的代码库，并下载下来形成自己的代码分支，和原作者一起互动和交流，提高彼此的代码水平和代码库的质量。

Github地址：[https://github.com/][https_github.com]

## 什么是Webstorm ##

前端神器不解释，基本上集成了前端的所有了，最新版本的还可以支持Grunt（虽然博主还没用过囧rz），软件的地址是：http://www.jetbrains.com/webstorm/，需要软件的破解请评论，我会单发给你们，原因你们懂的。

下面简要介绍一下webstorm，首先看看界面，全英文版，这个对码农们应该没啥压力，是不是有种高大上的感觉，左边是你的项目列表，右侧是你的代码预览

[![763360136939505864][]][763360136939505864]

单单看一下官网的功能介绍截图，你就知道它是多么强大，基本上能满足所有前端的要求，其中要注意的是，因为虽然支持那么多，可是下载下来的Webstorm不是本身就支持那么多种类型的，需要去下载对应的插件，这些可以在Webstorm的官网中了解到，或者直接搜索一下就行

[![3019382075275440708][]][3019382075275440708]

因为webstorm实在太多功能和玩法，找时间会汇总一些技巧分享给大家，这里就不做专门分享

> 个人不大推荐前端初学者使用，就像学Java刚开始不推荐人用Eclipse一样，这种集成软件带来的只是无限的方便，可是对个人的代码认识成长度却没有什么很大作用

## 在Webstorm中配置Github ##

Webstorm也可以强大到去管理Github，而且非常方便，不需要总是去输入Git命令行来同步自己的项目到本地，那么Webstorm是如何潇洒地做到的呢？

1.  首先你得有一个Github的账号，怎么注册我就不说了
2.  点击Webstorm的设置按钮[![2109654950546929448][]][2109654950546929448]
3.  进入设置面板后，直接在左上角搜索github（这个也算是Webstorm方便功能之一，很快速定位设置项），然后填入你github的账户名和密码，然后按一下Test看看是否连接成功  
    [![6599316068912391812][]][6599316068912391812]  
    如果出现这个提示，就证明连接成功（Github有时候会被墙，所以大家可能需要翻墙，不过一般应该都不用）  
    [![4871487422031475784][]][4871487422031475784]
4.  成功连接后，你就已经登录到Github账户了，但这还不够，你还得让Webstorm能够支持到Git操作，那么我们首先先去[https://code.google.com/p/msysgit/downloads/list][https_code.google.com_p_msysgit_downloads_list]下载Git，安装后，在Webstorm中查找Git，然后如下图配置好到Git的安装目录  
    [![850054429766380139][]][850054429766380139]
5.  配置好后还不够，因为运行Git需要本机的SSH，SSH的作用是让本地版本库与远程版本库通信，也就是你在本地修改好的代码，需要同步到服务器上的时候，就需要这个SSH密钥来通讯，那么我们先找到Git的安装目录中的“Git Bash.vbs”  
    [![1683783310783409294][]][1683783310783409294]
6.  运行后，输入

如下图，如果出现以下句子，则表明生成成功  
[![1405123083839907206][]][1405123083839907206]

如果出现““No such file or directory”或类似的语句，说明缺少ssh的key。那么我们就得创建一个新的SSH，输入

<table style="font-size:12px; margin-left:0px; border:none!important; padding:0px!important; margin-right:0px!important; margin-bottom:0px!important; margin-top:0px!important; background:none!important; width:auto!important; border-spacing:0px!important; border-collapse:collapse!important"> 
 <tbody style=""> 
  <tr style="background:0px center; padding:0px!important; border:none!important; vertical-align:top!important; margin:0px!important"> 
   <td style="font-family:Monaco,MonacoRegular,&quot;Courier New&quot;,monospace!important; vertical-align:top!important; border:0px; padding:0px!important; margin:0px!important; background-color:rgb(238,238,238)!important"> 
    <div style="background:0px center; border:0px; padding-right:0px; padding-left:0px; margin:0px; white-space:nowrap; padding-top:5px!important; padding-bottom:3px!important; line-height:15px!important"> 
     <div style="font-family:inherit; background:0px center; border-top:0px; border-right:1px solid rgb(222,222,222)!important; border-bottom:0px; border-left:0px; padding:0px 5px; margin:0px; text-align:right!important; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; min-width:1.2em!important; color:rgb(170,170,170)!important">
       1 
     </div> 
    </div> </td> 
   <td style="font-family:Monaco,MonacoRegular,&quot;Courier New&quot;,monospace!important; vertical-align:top!important; border:0px; padding:0px!important; margin:0px!important; background:0px center; width:639px"> 
    <div style="padding:0px; margin:0px; white-space:pre; overflow:visible; background:none!important; border:none!important; line-height:15px!important"> 
     <div style="font-family:inherit; background:0px center; border:0px; padding:0px 5px; margin:0px; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important"> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(51,51,51)!important">$</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important"> </span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,45,122)!important">ssh</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important">-</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,45,122)!important">keygen</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important"> </span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important">-</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important">t</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important"> </span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,45,122)!important">rsa</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important"> </span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important">-</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important">C</span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(0,111,224)!important"> </span> 
      <span style="font-family:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; color:rgb(221,17,68)!important">"your_email@youremail.com"</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

会出现类似下图的提示： [![4800555727900571148][]][4800555727900571148]  
直接按下“enter”键即可，然后输入密码。  
[![4926937992443550540][]][4926937992443550540]

成功后，找到你的用户目录下的C:\\Users\\你的计算机用户名.ssh\\id\_rsa.pub，用记事本打开，并复制里面的SSH码  
[![836825105860973142][]][836825105860973142]

进入Github，如下图进入SSH添加页面，然后Title输入任意，下面的Key输入你刚才复制的SSH key就没问题了  
[![3299168202125888835][]][3299168202125888835]

## 在Webstorm中使用Github ##

1.  那么现在你可以随意访问你的一个Repositories，也就是你的代码库，比如博主的https://github.com/fangge/fks，然后如下图点击相关选项，并填写好自己的git地址：  
    [![3313804900914876899][]][3313804900914876899]  
    如果你要保存项目的目录中，已经存在了同名目录，是不能拷贝你的Github项目下来的哦，如下图  
    [![2874703937246249077][]][2874703937246249077]
2.  点击Clone后，你的项目就会同步到你的本地中去，然后如果大家是第一次装Webstorm，应该会提示你安装Markdown插件，按照它的步骤来安装就行，目的是为了可以去编写Github项目特有的介绍项目文README.md，每一个项目都应该有一个这样的文件，来介绍自己的代码库到底有什么作用或者用法是怎么样的，插件可以直接支持md文件的编写，关于Markdown的语法也属于本文讨论范围之外，大家可以去了解一下，反正是一个不错的文本操作语言，语法很简单也很实用  
    [![未命名][E6_9C_AA_E5_91_BD_E5_90_8D.jpg]][E6_9C_AA_E5_91_BD_E5_90_8D.jpg]
3.  然后你就可以开始愉快地进行你的github库管理了  
    （1）首先，如果当你在文件夹中添加文件时，文件会在左侧的项目管理面板中显示为红色，说明这个文件是在原有的Github项目中没有的  
    [![4821947826130399485][]][4821947826130399485]  
    那么你就得将这个文件先add到本地github库中，如下图操作（或者直接Ctrl+Alt+A）  
    [![800514833865312331][]][800514833865312331]  
    （2）然后你会发现文件变成绿色，就证明添加成功了，接着你随意改库中的文件，你会发现文件变成了蓝色，而且在相应的修改代码段还有一个蓝色标记，证明你的修改位置，这里不得不感叹实在太贴心  
    [![4928345367327091947][]][4928345367327091947]  
    （3）然后修改后，你需要上传你的修改了，你可以有多种方法，一种是在上面的面板中直接commit（提交）你的修改[![4886968545750625325][]][4886968545750625325]，另一种是如下图找到commit的选项来添加快捷键，以后就可以快乐地同步你的代码到github了  
    [![844706405208885517][]][844706405208885517]  
    （4）提交后，我们发现如下面板，我们发现已经有我们刚才的两个修改了，一个是绿色的文件添加，一个是蓝色的原有文件修改，然后确认无误后，请务必填写这次修改的一些观点，也就是你为什么要更新它，这样利于管理我们自己的代码库，也是一个良好的习惯，不填是无法上传的哦 [![809522033120078335][]][809522033120078335]  
    （5）填完所有信息后，我们把鼠标移动到Commit的地方，有一个Commit and Push，这就是为了将我们的修改同步到github上，如英文所示，直接Commit，就是单纯提交你的修改，可是push，就是把你的修改提交到Github上的代码库中。  
    [![4790422628738985032][]][4790422628738985032]  
    （6）Push页面中，你还可以将你现在的修改，重新增加到一个新的branch中，也就是你的代码库分支，每个代码库都允许有很多个分支，每个分支可以是不同的代码，点击Push后，你的代码就正式同步到你的代码库了，你可以随时查看同步的状态  
    [![3183200511721016615][]][3183200511721016615]  
    [![803329583632419607][]][803329583632419607]  
    [![6608216615538766398][]][6608216615538766398]  
    （7）提示成功后，过几分钟刷新你的页面，就可以看到你刚才的修改了  
    [![3320560300355932647][]][3320560300355932647]  
    （8）你还可以在下面的面板中，看到整个github库的操作过程，非常方便  
    [![3300294102032765451][]][3300294102032765451]  
    （9）你还可以在右下角看你的项目分支，并同步到本地，项目分支有时候不一定是你自己写的，你可以去看其他人在你代码库中的更改哦，很方便吧！！  
    [![57139420372919619][]][57139420372919619]

[https_github.com]: https://github.com/
[763360136939505864]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/763360136939505864.jpg
[3019382075275440708]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3019382075275440708.jpg
[2109654950546929448]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/2109654950546929448.jpg
[6599316068912391812]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/6599316068912391812.jpg
[4871487422031475784]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4871487422031475784.jpg
[https_code.google.com_p_msysgit_downloads_list]: https://code.google.com/p/msysgit/downloads/list
[850054429766380139]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/850054429766380139.jpg
[1683783310783409294]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/1683783310783409294.jpg
[1405123083839907206]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/1405123083839907206.jpg
[4800555727900571148]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4800555727900571148.png
[4926937992443550540]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4926937992443550540.png
[836825105860973142]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/836825105860973142.jpg
[3299168202125888835]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3299168202125888835.jpg
[3313804900914876899]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3313804900914876899.png
[2874703937246249077]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/2874703937246249077.png
[E6_9C_AA_E5_91_BD_E5_90_8D.jpg]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/%E6%9C%AA%E5%91%BD%E5%90%8D.jpg
[4821947826130399485]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4821947826130399485.png
[800514833865312331]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/800514833865312331.png
[4928345367327091947]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4928345367327091947.png
[4886968545750625325]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4886968545750625325.png
[844706405208885517]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/844706405208885517.png
[809522033120078335]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/809522033120078335.png
[4790422628738985032]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/4790422628738985032.png
[3183200511721016615]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3183200511721016615.png
[803329583632419607]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/803329583632419607.png
[6608216615538766398]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/6608216615538766398.png
[3320560300355932647]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3320560300355932647.png
[3300294102032765451]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/3300294102032765451.png
[57139420372919619]: http://mrfangge.qiniudn.com/wp-content/uploads/2014/05/57139420372919619.png