HBuilder学习与使用

设计理念及常用功能

设计理念

HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎

HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本语言如php/jsp也可以适用,还有前端的预编译语言如less及markdown都可以良好的编辑

常用功能

代码块:一个代码块少敲20下键盘

代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id);在HTML中输入i,回车,可以得到input button标签

查看/编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑;也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看

代码块激活字符原则1:连续单词的首字母;比如:dg激活document.getElementById(""),vari激活var i=0,dn激活display: none

代码块激活字符原则2:整段HTML一般使用tag的名称;比如script/style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车/st回车,即可完成script/style标签的输入

代码块激活字符原则3:同一个tag有多个代码块输出,则在最后加后缀,比如meta输出,但metau则输出,metag同理

代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写;比如input button,缩写为inbutton,同理intext是输入框

代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母;比如if直接敲会提示if关键字,但iff回车,则出现if代码块;类似的有forr/withh等;由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包

全时提示

HBuilder不仅提示全面的语法,非语法的各种候选输入也都能提示;包括图片/链接/颜色/字体/脚本/样式/URI/ID/class/自定义JS对象/方法;举例:在img src=后激活代码助手,可看到本工程所有图片列表:输入<sc可以看到本工程所有js列表,在js的document.getElementById(id)中提示本工程已经定义的ID列表,在css的color:后可以列出本工程所有使用过的颜色。

Emmet支持

HBuilder内嵌了emmet(即zencoding)插件;输入div#id1,按下tab,可以自动生成<div id="id1"></div>Emmet的详细语法请查阅其官方网站emmet.io

框架语法支持

HBuilder内嵌了jquery/bootstrap/angular/mui等常用框架的语法提示库,并且这些框架语法一样可以享受到HBuilder的全时提示机制,提示图片/颜色/id/class...;如果要使用框架语法,需要在工具菜单/项目的右键菜单中,点击引入框架语法提示的子项,为该项目选择框架语法提示;提示效果如下:

JSDoc+

HBuilder扩展了jsdoc,并改良用途用于酷酷的语法提示,让动态的js有了静态的感觉;具体参考：http://ask.dcloud.net.cn/article/129

边看边改

想一边写代码一边看效果,按下Ctrl P进入边看边改视图,左边保存右边立即刷新,
调试的玩法还有很多,参考http://ask.dcloud.net.cn/article/483

最全语法库和浏览器兼容数据

HBuilder的语法库包括W3C的HTML/JAVASCRIPT/CSS的正式标准和推荐标准...,ECMAScript中浏览器支持的部分,还有各大浏览器的扩展语法,webkit/moz/ms,均实时更新到各浏览器的最新版本;
信息栏中的浏览器品牌图标,全亮表示无障碍支持该语法,全灰表示不支持,而半亮则表示该浏览器部分支持该语法;半亮时会下图标下方显示出来详细的支持情况,比如video标签,从IE9才开始支持

手机App开发

HTML5一大用途就是App开发,HBuilder良好的支持手机App开发;包括新建移动App项目/run in device真机调试/本地及云端打包;HBuilder开发的HTML5+ App,比普通的web App功能更强,性能更高

less/sass的支持和预编译器

HBuilder支持less/sass文档

1.着色:正常使用

2.代码提示:只能提示其中的css部分,less/sass仅支持对已编写的代码的单词提示

3.编译:对less/sass文件右键点击编译即可正常编译

HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less/sass甚至coffeescript等文件的预编译器,保存即可触发

Less文件配置说明,其他文件可参照操作

1.npm全局安装less:npm install less -g

2.hbuilder菜单"工具"->"选项"->"预编译器",修改.less中的命令路径和命令参数,也可以直接使用"智能完成"

3.如果"智能完成"失败,请在"命令触发地址"中填写less全局安装后的命