HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程

对于项目较大的公司来说一般都用SVN或新起的Git来协作团队开发,后台开发用的VS基本都集成了SVN的插件。介绍如何配置之前我先说下为什么会选择这款编辑器。对于我来说从DW、 WebStorm 、sublime text一路走来,以及一款叫ATOM(没用过,只是有所了解)的新秀的编辑器。但我倾向一款国内团队打造的编辑器HBuilder。

官网地址:http://www.dcloud.io/

说说我对几款编辑器的看法吧:

DW: 不用多说早期可视化网页编辑器,早已淘汰。

webstorm :一款功能非常强大的IDE编辑器集成非常多的插件。其中也包括今天介绍的SVN GIT等版本控制插件。正因为它集成的东西太多显得过于臃肿 ,占用资源相当大所以我就没有继续用它。重要的它是一款付费软件,在我们公司声明都要用的正版啊。

sublime text:对于国内外来说现在最流利的文本编辑工具莫过于它了。强大的插件支持,极其轻量,占用资源极少。只不过它只是一个文本编辑器,不同于IDE。它也没有针对前端进行开发。当我要安装好SVN插件提交的时候竟然弹出一个“BUY IT NOW”提示来。

Atom:新兴起编辑器,官方的GitHub开源项目。有点稚嫩,插件不是很多。相信不过多久可以与sublime text 并驾齐驱。

HBuilder:国内团队打造的IDE编辑器。针对前端开发而开发的软件。部分开源。内置EMMT ;less,Sass编译;FTP上传;GIT, SVN等版本控制工具。兼容eclipse插件,这意味着你可以在eclipse市场安装相应的插件而且它更新的频率很高,平均一星期更新一次。不过它还有很多可以改善之处。我就不大喜欢他的主题色,占内存也有点大,毕竟是IDE。

说了些题外话,现在入正题

1、安装软件到官网下载。 http://www.dcloud.io/(安装方法大家可以参考这篇文章)

2、安装SVN插件:
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第1张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第2张图片
3、安装完了后,在项目管理右击点导入:
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第3张图片
4、这里会出现有个SVN检出项目选项
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第4张图片5、选择“创建新的资源库位置”。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第5张图片
6、来到这一步里面URL的地址应该是空的。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第6张图片7、如果你的项目是用SVN协助开发的,在项目的根目录下右击会找到SVN当前路径,把地址复制一下粘贴到刚才上一步说的地址栏。如果你不知道可以叫SVN管理人员给你地址。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第7张图片
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第8张图片
8、粘到URL后点下一步后选择根目录继续点下一步(如果SVN有权限问题可能要输入账号密码)。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第9张图片
9、选择作为工作空间检出,会自动把项目,下一步。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第10张图片
10、去掉默认选项,选择你要检出的位置。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第11张图片
11、检出后在项目管理器里就会出现你刚才检出的项目了。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第12张图片
12、右击项目文件就有了 版本管理的菜单选项了,这时候你就可以在这里提交 或者更新你的文件了。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第13张图片
以后修改完文件就不用翻几层目录去找你要提交的文件了。

至此SVN配置已经完成了。

但我觉得还不够爽~~ 每次点要找到这个菜单点一次有点麻烦。

我就为这个SVN配置一个快捷键。

先上图:

1、我们先调出视图:
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第14张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第15张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第16张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第17张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第18张图片
2、到这里视图已经调出到菜单栏,正常情况下会有SVN选项出现。现在开始设置快捷键。点“工具”–>选项,调出首选项界面。
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第19张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第20张图片
选择快捷键 在搜索 “SVN”在结果中找到 “提交”然后绑定快捷键我这里用的是CTRL + ALT+C; “更新”就是用CTRL + ALT +U。
这样当你打开当前文件按下你设置的快捷键就可以马上提交你的文件了。

顺便说一下在当前文件按下ALT+ENTER就可以调出它的属性,你把提交后的文件路径复制给研发人员就不用又去翻文件夹找路径了。

以上部分转载自脚本之家仅供学习知识备忘用,如有侵权请通知删除。

HBuilderX SVN使用教程

1. 安装svn插件
点击菜单【工具】–>【插件安装】, 安装svn插件
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第21张图片如果本机已经安装了TortoiseSVN,可以直接继续。如本机未安装TortoiseSVN,会提示下载该工具。该工具网站同时有中文语言包,不习惯英文则可以安装语言包。

2. Svn导出项目

方法1:. 点击菜单【文件】–>【导入】–>【从svn导入】

方法2: 如果您本地已存在svn项目,直接拖到HBuilderX 项目管理器中
HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第22张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第23张图片
3. Svn 提交更改

选中项目或选中要提交的代码
右键菜单,点击【SVN提交】

HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第24张图片HBuilder如何配置SVN的步骤详解及HBuilderX SVN使用教程_第25张图片
4. Svn 更新

选中项目
右键菜单,点击【SVN更新】

5. Svn快捷键设置

(1)、点击菜单【工具】-->【自定义快捷键】
(2)、在文件底部可以找到如下配置 
//svn更新  
//{"key":"","command":"ExternalCommand:SVN_UPDATE"},  
//svn提交  
//{"key":"","command":"ExternalCommand:SVN_COMMIT"},  
//svn比较差异  
//{"key":"","command":"ExternalCommand:SVN_DIFF"},  
//svn检查修改内容  
//{"key":"","command":"ExternalCommand:SVN_REPOSTATUS"},  
//svn查看日志  
//{"key":"","command":"ExternalCommand:SVN_LOG"},  
//svn删除当前文件(单个文件)  
//{"key":"","command":"ExternalCommand:SVN_REMOVE"},  
//svn增加文件(单个文件)  
//{"key":"","command":"ExternalCommand:SVN_ADD"},  
//svn还原(revert)  
//{"key":"","command":"ExternalCommand:SVN_REVERT"},  

(3)、把你需要配的快捷键,复制到右侧,取消注释,在key里填入你的快捷键即可
如下所示:

[  
{"key":"ctrl+alt+u","command":"ExternalCommand:SVN_UPDATE"},  
{"key":"ctrl+alt+i","command":"ExternalCommand:SVN_COMMIT"}  
]  
  1. 上传本地项目到svn服务器

注意HBuilderX里非svn项目点右键不会弹出svn菜单。所以你需要在外部处理这个需求。

你可以使用TortoiseSVN在资源管理器里操作。
7. 其它教程

3分钟学会SVN: https://segmentfault.com/a/1190000014245101

极客学院的SVN教程:http://wiki.jikexueyuan.com/project/svn/

mac版svn配置教程见:https://ask.dcloud.net.cn/article/35252

你可能感兴趣的:(SVN相关资料)