HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。基于Eclipse,兼容Eclipse的插件,还包括最全面的语法库和浏览器兼容性数据。目前主流的前端开发工具有Sublime为代表的文本编辑器,以及Webstorm、Brackets、Dreamweaver、vs等IDE。但说道为HTML5设计或做了特殊优化的,只有HBuilder、Webstorm和Brackets。
HBuilder编辑器软件特色
在HBuilder里预置了一个hello HBuilder的工程,用户敲这几十行代码后会发现,HBuilder比其他开发工具至少快5倍。
快,是HBuilder的最大特色,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
HBuilder的生态系统可能是最丰富的Web IDE生态系统,因为它同时兼容eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各种技术都有Eclipse插件。
HBuilder编辑器使用教程
一、使用HBuilder创建新项目
1、依次选择文件→新建→点击Web项目(可使用快捷键Ctrl+N,W快速启动新建流程,MacOS系统请使用Command+N,然后鼠标左键选择Web项目)
2、在A处填写项目名称,B处填写或选择项目存储位置(修改后的路径将被记录,后续将默认使用此路径),C处可挑选所需模板(如需自定义模板,可点击自定义模板选项,并参照打开目录中的readme.txt文件进行设置)
二、使用HBuilder创建HTML页面
在项目资源管理器内选中刚创建的项目,依次选择文件→新建→点击HTML文件(可使用快捷键Ctrl+N,W快速新建,MacOS系统请使用Command+N然后左键选择HTML文件),选择空白文件模板即可继续操作
HBuilderX编辑器使用技巧
1、免拖动选择
使用鼠标拖拽选择文本内容容易导致手指疲劳,尤其在触摸板上操作更为不便。
然而记忆大量相关快捷键同样令人困扰。
HBuilderX提供了更便捷的操作方式:智能双击与Ctrl+=扩展选区。
2、智能双击
以下是智能双击选择标签及包围父标签的示例:
双击div标签的首部或尾部可选中整个标签。此外,双击if语句、缩进符号、括号或引号内部等位置均可通过智能双击选中。具体可参考HBuilder的选择菜单。
按下Ctrl+]可实现包围操作,在选区首尾添加父标签同时光标闪烁。需要注意的是,在js文件中按下Ctrl+]不会包围标签,而是包围if、for等函数块。
输入div即可在选区首尾自动添加包围标签
3、扩展选区Ctrl+=
(注:=键与+号键位共享,因此Ctrl+=实际是Ctrl键与+号组合键)
在HBuilderX中可智能判断选区范围,持续扩展选区,实现无需鼠标快速精准选择目标区域。
HBuilder编辑器更新日志
1、修复问题
解决某些情况下Android手机真机运行无法连接到手机的问题