HBuilder入门-设计理念及常用功能

设计理念

\n

HBuilder是一个极客工具,追求无鼠标的极速操作。
不管是敲代码的快捷设定,还是操作功能的快捷设定,都融入了效率第一的设计思想。
程序员究竟是coder,还是builder,我们坚持后者。
不为敲字母而花费时间,不为大小写拼错而调错半天,把精力花在思考上,想清楚后落笔如飞。
支撑这个理念,除了体验上的精细设计,还要求我们突破很多世界级技术难题,包括语法库、语法结构模型、AST语法分析引擎。
我们的语法引擎很强大也很吃硬件,这导致我们对HBuilder的启动和资源消耗略有遗憾,但我们追求提升电脑硬件来搭配HBuilder,而不是裁剪功能。
另一个需要强调的理念是H。
HBuilder顾名思义是为HTML设计的。
相对于java、.net、object-c这些主流编程语言,HTML开发者以往总感觉低人一等。
但时代在变,前端代码越来越复杂,前端工程师的身价也持续攀高,我们认为HTML5需要一款配得上它的地位的高级IDE,而不再是刀耕火种时代的文本编辑器。
所以HBuilder主要用于开发html、js、css,同时配合HTML的后端脚本语言如php、jsp也可以适用,还有前端的预编译语言如less以及我们钟爱的markdown都可以良好的编辑。
从2013年夏天发布至今,HBuilder已经成为业内主流的开发工具,拥有几十万开发者。
欢迎你使用HBuilder,成为HBuilder。

以下为常用功能简介。

代码助手,飞一样的编码

\n

代码输入法:一个数字,少敲10下键盘。

\n

按下候选列表前的数字,自动把该候选项输入到编辑区,你将不用把所有字都敲一遍了。当然除了数字选择,跳字输入也是支持的。
codeassist

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

\n

图标为codeblock的候选项为代码块。
代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。
再举例,在HTML中输入i,回车,可以得到input button标签。
codeblock_input
查看、编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

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

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

代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如meta输出<meta name="" content=""/>但metau则输出<meta charset="UTF-8"/>,metag同理。

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

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

全时提示

\n

HBuilder不仅仅提示全面的语法,非语法的各种候选输入也都能提示。包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

举例,在img src=后激活代码助手,可以看到本工程所有图片列表;输入<sc可以看到本工程所有js列表;在js的document.getElementById(id)中提示本工程已经定义的ID列表;在css的color:后可以列出本工程所有使用过的颜色。

Emmet支持

\n

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

框架语法支持

\n

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

JSDoc+

\n

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

边看边改

\n

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

绿柔保护你的眼睛

\n

绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码,感受要比对着太亮或太暗的界面舒服很多。
绿柔是一个严谨的设计过程,包含色彩心理学和色彩生理学的很多知识,而且在北京国奥心理医院做过严谨的医学测试,形成大量脑电波数据。
我们安排工程师在不同的配色主题下写代码,检测他们的脑疲劳程度,最终调校出了这套配色方案。
实验过程在官网下方也有介绍http://dcloud.io/
这是HBuilder发布会时设计师的演讲实录,表达了我们的设计理念:
最近有部电影叫盲探,其中刘德华盯了4天嫌疑犯眼睛就瞎了,眼睛很重要但也很脆弱。
我们现在的生活中到处是电子屏,电脑屏、手机屏、平板、电视,无论上班下班,我们都对着这些屏幕。这个时代保护眼睛更重要。一定不能程序员让在写代码时受更多罪。所以我们很重视配色方案。
我们调研了所有主流配色方案。没有满意的。有的很漂亮,但长时间看不舒服。所以我们决定自己调,但我们的设计目的不是为了好看,而是为了更健康。
色彩方面有色彩生理学和色彩心理学。我们先来看色彩生理学,当一个人眼睛长期看暗色系事物时,大脑会分泌激素强迫眼睛增强视力,比如我们在一个黑屋子待一会就能看清东西,但回到阳光下时又会晕眩,这叫做暗适应。暗适应会让程序员很不舒服,所以我们不能选暗色系。
再看色彩心理学,不同的色彩给人以不同的心理感受。红色让人感到刺激,绿色让人感到舒适,因为人们会联想到不同的事物从而引发心理的变化。
基于这些分析,调了上百次后,我们得出这样的方案,我们叫它绿柔。它的特点是柔和,自然,低对比度,并且强化了绿色的感觉。我们把各种颜色中的RGB中G,就是绿的数值调的更高。
我们做了样本测试,结果不错,程序员们在使用了一天绿柔界面后都表示比看一天其他软件更舒服。
最后衷心祝愿大家在满是电子屏的世界中,活的更健康!_

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

\n

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

手机App开发

\n

HTML5一大用途就是App开发。HBuilder良好的支持手机App开发。
包括新建移动App项目、run in device真机调试、本地及云端打包。
HBuilder开发的HTML5+ App,比普通的web App功能更强、性能更高,具体参考文档 5+ App章节。

更多挖宝

\n
  • 跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。

  • 更多精彩功能:语法校验 | 转到定义 | 重构 | 大纲 | 任务TODO | 版本历史 | 内置webserver | 预编译less、sass等文件

  • 还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。

\n
377 分享
多串君 yjsong 蔡JHoo 潘智勇 skyzero keke007 Payzulla 酱油瓶子 worldiscrazy whiskyfeng 梦幻雪冰 殊麒 南安 Rofer 毒气 小奔奔 bober 蓼兰贝洛斯 Amamatthew 水墨轻烟 小林子 aisky 欢歌 风之无霜 zkwap sir_znp 某斌要做技术宅 eafrfq Bob_Top tobevan 明峰 西德尼娅的骑士 奋斗吧 Popeye marco001 Eleven0220 一夕夕 Jonah 大漠野狼 阿星 Yvictory 烟雨梦霄云 timofan wang_ 蕾蕾 牛津大字典 卡布奇诺 Qnewey 古风 顾小北
zbzrzhx@163.com

zbzrzhx@163.com

提一个问题:希望你们能解决,就是js代码在注释时候,为什么每次都是在这行代码的最前端?而其他的IDE就是在代码的最前端进行注释。希望你们能解决!
0 赞 1 天前
太阳

太阳

去年偶尔看到的IDE,推荐个几个朋友,用过的都很喜欢,能帮助到程序开发效率,为国产软件点赞!
0 赞 5 天前
hnflash@qq.com

hnflash@qq.com

还不能自动识别页面编码
0 赞 5 天前
806365766@qq.com

806365766@qq.com

还处于初级学习阶段,看到这个软件,感觉很强大,只是不太了解H5+ app和专门搞软件开发的写的app有什么区别,利弊都是什么呢。
0 赞 2017-04-26 09:38
蓝鲸

蓝鲸

国产软件 真的不错嘛!给32个赞
1 赞 2017-04-13 19:06
CarsonChen

CarsonChen

为什么不弄个 Sublime Text 的 Ctrl + d 快速选中选择的内容,并批量修改呢?
0 赞 2017-03-29 12:00
548890571@qq.com

548890571@qq.com

我跟着教程走,到创建Hello muihtml5文件模板时,没有list.html
0 赞 2017-03-05 12:23
lgdxx@tom.com

lgdxx@tom.com

非常好,今天学了一天,收获很多
1 赞 2017-02-26 23:03
大城小爱

大城小爱

刚接触,还在学习
0 赞 2017-02-10 11:30
yjph83@163.com

yjph83@163.com

是不错!我想请教下各位大侠,这个ide可以开发 reactJs 吗? 相关的插件这些有吗?
0 赞 2016-11-17 13:53
zhuxinyue@qq.com

zhuxinyue@qq.com 回复 hrj

回收站呗
0 赞 2016-11-07 00:14
768692163@qq.com

768692163@qq.com

真心不错
0 赞 2016-11-03 17:31
youduoyuanne@163.com

youduoyuanne@163.com 回复 酱油瓶子

哪些不足的地方,可以说下吗?
0 赞 2016-10-27 11:26
920302913@qq.com

920302913@qq.com

开发这个软件的人是怎么想的?
0 赞 2016-10-23 16:47
平凡

平凡

可惜就是有时候启动太慢。
0 赞 2016-09-25 21:05
包卉

包卉

就这几天写了主页侧菜单->滚动试图->列表->视图滚动,打开列表详情页再返回主页,代码才100多行,没有oc的mvc概念,哈哈
0 赞 2016-09-03 17:36
350458783@qq.com

350458783@qq.com 回复 包卉

我也是做ios的 加个好友吧 一起学习
0 赞 2016-08-29 13:37
包卉

包卉

初来乍到,之前学的XCODE,开发起来好难写,现在信心大涨啦,继续努力~~~
0 赞 2016-08-21 11:34
天空夂城

天空夂城

个人建议可以把DW好的功能拿过来
0 赞 2016-08-19 10:48
475216037@qq.com

475216037@qq.com

很好的HTML开发工具!!!
0 赞 2016-08-16 10:33
MartyZane

MartyZane

非常棒的IDE,终于在茫茫软件中找到一款优秀的前端IDE,感谢HBuilder的开发团队!
0 赞 2016-08-06 18:06
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 f_x_x_f

www.dcloud.io
0 赞 2016-07-20 23:47
f_x_x_f

f_x_x_f

去哪里下载HBuilder啊
0 赞 2016-07-20 11:03
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 我的一沓

HBuilder里,快捷键语法是Ctrl组合键通常指操作,alt组合键通常指跳转,shift组合键通常指转义,所以跳转到声明处用alt+点击
0 赞 2016-07-11 14:51
我的一沓

我的一沓 回复 DCloud_HB_深井冰

原来如此,谢谢啊
0 赞 2016-07-11 12:27
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 我的一沓

ctrl+点击在HBuilder里为alt+点击,鼠标放上后,按F2显示某个函数的author或者description
0 赞 2016-07-11 12:15
我的一沓

我的一沓

跟全副武装的eclipse比起来,这内存占用貌似还可以啊,不算多。不过有一点不明白,就是快速定位和鼠标悬浮提示,快速定位就是类似eclipse的,在鼠标指向变量或者函数时,按下ctrl并点击,就跳到声明;而鼠标悬浮,就是有时候想快速第看一下某个函数的author或者description之类的信息。请问这两个功能是没有呢,还是默认没开启,反正找了很久没找到。
0 赞 2016-07-11 10:49
171026556@qq.com

171026556@qq.com

我的macbookair ,4g内存,表示很快啊 如果早知道这么好的工具,我学编程的兴趣也会更高涨啊
0 赞 2016-07-04 09:28
建东

建东 回复 echosong

你笔记本啥配置啊,我的5年前的机器还用着。。。
0 赞 2016-06-30 11:26
642626517@qq.com

642626517@qq.com

HBuiler一定要做下去!
0 赞 2016-06-24 15:17
书痕

书痕 回复 陌上花开ois

文章里已经明确表态了:提高硬件配置来获得爽到爆的体验
0 赞 2016-06-21 15:19
qingsuccess@163.com

qingsuccess@163.com

谢谢,我只是还是用NET开发的思路,比如数据库访问,怎么赋值,我再研究研究,感觉没有开发思路
0 赞 2016-06-20 15:46
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 qingsuccess@163.com

http://ask.dcloud.net.cn/article/89这文章看下,如有问题,请加我qq 248590311
0 赞 2016-06-20 12:13
qingsuccess@163.com

qingsuccess@163.com

高手请指点,我研究了半月一直没有入门,我搞NET开发的,对HTML4很熟悉,对JS基本开发没有问题,数据库也没有问题,对CSS基本知识都没有没有问题,整体情况是这样,可是用HB开发APP感觉很吃力,也找了几个代码例子,都看不大懂,头疼中,麻烦高手指点一二,我应该从那方面入手学习
0 赞 2016-06-20 11:18
xiaohan

xiaohan 回复 hrj

还在你的保存目录啊,如果是没有改过在‘工具’-》‘变更默认代码存放目录里查看和修改路径’
0 赞 2016-05-30 12:25
Gemini_617

Gemini_617

实在是太棒了
0 赞 2016-05-17 21:24
523722956@qq.com

523722956@qq.com

非常的赞!
0 赞 2016-05-15 08:09
lingchengzhao@126.com

lingchengzhao@126.com

非常不错,给一万个赞哦
0 赞 2016-04-28 16:05
酷暑

酷暑

看着不错,亲自感受一下,很舒服
0 赞 2016-04-19 18:19
yanxiaojun617@163.com

yanxiaojun617@163.com

好给力啊。支持支持支持。。。
0 赞 2016-04-14 14:58
精灵少华

精灵少华

这是用过最顺手的工具,赞一个
0 赞 2016-04-01 09:22
吴贵明

吴贵明

我给13分 多一分骄傲、多一分自豪、还有一分表达我对HBuilder浓浓的爱
0 赞 2016-03-30 13:13
DCloud_heavensoft

DCloud_heavensoft 回复 corgi

不需要插件,可能出问题了,点HBuilder帮助菜单里的还原环境或者重新下载一个。另外问问题请单独发帖
0 赞 2016-03-17 02:01
corgi

corgi 回复 酱油瓶子

你好,为什么我的代码助手里 没有浏览器提示图标啊? 是还需要下载插件么
0 赞 2016-03-10 22:13
corgi

corgi

为什么我的代码助手里没有浏览器提示啊, 哪位大神能解答下?
0 赞 2016-03-10 22:12
金满斗

金满斗

支持国产,可惜就是太占内存了,建议开发人员在2G内存双核的机器上试下。启动的时候有些慢,刚打开时。我是个菜鸟PHP程序员。经常用你们这个,前端语法提示蛮好。但估计对我还有点不适合。关键是占资源。卡,慢。
在我看来,Sublime 暂时就是你们的一座山峰,看能不能翻过去了。
0 赞 2016-02-26 08:35
yangphp

yangphp

怎么没找到捐助按钮,我一定要支持。。快加上。。
0 赞 2016-02-19 15:59
白羽

白羽

太TM变态了,HB竟然好用到这种程度,而且还是国产!一万个支持。
0 赞 2016-02-03 09:09
Rainbar

Rainbar

看很多人都在反应内存占太多。话说现在标配都4G内存了,这点内存根本不算回事吧?
0 赞 2016-01-30 15:30
海光之剑

海光之剑

听同事说这个不错,从原生转到H5,希望这一步没有走错!! Hbuilder 一定要给力啊!
0 赞 2016-01-19 00:04
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 echosong

你笔记本啥配置啊,我的5年前的机器还用着。。。
0 赞 2016-01-18 19:41
echosong

echosong

工具可以,就是太占内存,笔记本基本上没法用户,急需要改进
0 赞 2016-01-18 16:53
潘永青

潘永青

有这个工具,H5学习快。。。
0 赞 2016-01-12 14:49
木子水吉

木子水吉

狂炫酷拽吊炸天!佩服佩服
0 赞 2015-12-13 23:29
胡爷

胡爷

什么都好,就是吃内存无敌了~~~!
0 赞 2015-12-09 16:19
鲁伊

鲁伊

非常牛的软件!就是有点吃内存
0 赞 2015-11-17 11:29
x_net

x_net

非常牛呗。。
0 赞 2015-11-11 15:03
疯狂的背后

疯狂的背后

习惯的已经脱不开手了 ,svn插件也很好用。顶
0 赞 2015-11-08 13:39
gaiai

gaiai

我现在习惯用HB了,慢慢会变成依赖,所以你们的千万不能关门倒闭,要持续永恒经营下去,风头要缺钱,我可以捐点给你们,但不多,先要让我用HB敲代码赚到钱。
3 赞 2015-11-07 18:46
qmit

qmit

挺不错的,大家一起支持的dclound吧!
希望官方能把mui.js的所有方法都能写个文档说明一下哦,这对我们提高工作效率至关重要哦!
0 赞 2015-11-05 21:38
fqt2004

fqt2004

确实挺好用的工具,手机APP开发。超赞!!
1 赞 2015-11-05 10:59
缘宅萌莱

缘宅萌莱

反正我电脑16g内存的,管他用多大也不怕……
0 赞 2015-10-26 19:12
AC米兰的小铁匠

AC米兰的小铁匠

为了使用这个编辑器我特意给我的笔记本加了4G内存,这下无压力了。哈哈~
0 赞 2015-10-10 15:04
liemery

liemery

真的很不错,以后开发app方便多了
0 赞 2015-10-10 09:49
飞屋设计

飞屋设计

所有我开发需要的功能都有,牛B
0 赞 2015-09-12 19:27
上交国家

上交国家 回复 亮晶晶

notepad++
1 赞 2015-08-25 11:00
亮晶晶

亮晶晶 回复 上交国家

搞开发的能用很差的电脑吗,还以为是原先的记事本模式啊,效率多低啊。
0 赞 2015-08-21 10:12
上交国家

上交国家

确实很大的内存,比运行Photoshop CC都要大。也是醉了。基于eclipse的就是坑
0 赞 2015-08-19 14:08
飞一扬

飞一扬

太强大了,无意中从CSDN加入,介绍同事一直用,这块反向都不错
0 赞 2015-08-19 08:53
DCloud_HB_深井冰

DCloud_HB_深井冰 回复 phoenix_ch

PC,大概 要占用300-500M内存
0 赞 2015-07-29 23:03
phoenix_ch

phoenix_ch

支持国产,大家说的耗内存,是PC内存,还是手机内存
0 赞 2015-07-29 20:03
fqt2004

fqt2004

非常强大的开发工具!
0 赞 2015-07-28 19:27
Colin_Liao

Colin_Liao

逆天了 感觉要
0 赞 2015-07-21 16:05
FAKE

FAKE

第一次用,简直爽飞了,原来写代码也可以这么爽!!
0 赞 2015-06-12 10:34
大漠野狼

大漠野狼

想使用linux 运行,希望能wine运行起来
0 赞 2015-05-15 22:27
小花

小花

非常方便
0 赞 2015-05-13 18:13
一夕夕

一夕夕

非常给力,就是太耗内存了,配置要求高啊
0 赞 2015-05-05 16:42
水墨轻烟

水墨轻烟

非常好的工具!
0 赞 2015-03-11 11:37
紫宸

紫宸

这简直是太牛了啊!!!
0 赞 2015-02-28 18:02
bober

bober

好工具!!!!
0 赞 2015-02-28 11:37
erroringldh

erroringldh

不错,可惜最早同事推荐时,我没关注~~~
0 赞 2015-02-03 14:44
偶左眼跳

偶左眼跳

太棒了, 有捐助按钮吗? 一定要支持作者。。
1 赞 2015-01-29 17:51
偶左眼跳

偶左眼跳

体验了一下。。从未感觉如此美妙过。这软件非常的符合我的需求。。非常非常的赞赞。。。
1 赞 2015-01-29 17:07
殊麒

殊麒

这个牛叉了,看下效果如何
0 赞 2015-01-26 01:54
梦幻雪冰

梦幻雪冰

还不错,就是内存消耗大
0 赞 2015-01-22 23:46
那年匆匆

那年匆匆

非常喜欢
0 赞 2015-01-10 11:44
酱油瓶子

酱油瓶子

不得不说在浏览器提示这一块做的非常棒
0 赞 2015-01-09 18:24
酱油瓶子

酱油瓶子

和sublime来比起来,有一些好的地方,但还是有一些不足的地方
1 赞 2015-01-09 18:23
Cover

Cover

写代码真的很快啊
0 赞 2015-01-09 11:40
陌上花开ois

陌上花开ois

工具还好,但是太耗内存了 希望得到很好的优化
2 赞 2014-12-27 09:52
Monkey

Monkey

OMG,这编辑器兼职屌爆了啊!!
4 赞 2014-12-07 02:22
hrj

hrj

我只想问一下右击删除的文件在哪里能找到
1 赞 2014-12-01 14:38
MUSICKING

MUSICKING

非常不错,支持~ 喜欢做WebApp 可以加我微信交流:MusicJKing
1 赞 2014-11-25 22:17
战地记者

战地记者

非常人性化的设计。满满的赞!
1 赞 2014-11-20 10:35

要回复文章请先登录注册