HBuilder-强悍的编码工具软件

时间 2019-11-12

标签 hbuilder 强悍编码工具软件栏目字符编码繁體版

原文原文链接

优势：（总结：快！）

1，解决了DW目前不支持H5属性标签和css3的属性，这个编辑器都支持！应该是我最大的痛点解决了。css

（虽然网上也有DW下插件解决的，可是我尝试了比较麻烦。）html

2，更快的编写方式，提升编写效率。前端

① 如 li*5 而后tab键；惊喜发现... css3

② 如<div>，只用敲div ，而后tab键；惊喜发现... windows

③ 如html，敲完，生成代码块，一次性生成以下代码：浏览器

<html>
   <head>
       <title></title>
   </head>
   <body>

   </body>
</html>闭包

④ 如在js里，敲dg能够一次性生成：编辑器

document.getElementById("")等等。这里有不少匹配到的代码候选项，能够按下主键盘的数字键选择代码助手候选项。函数

3，更快的查找关联方式；如 <div class="content">内容</div>，按住alt键盘，放在content样式上，点击后自动跳到该样式编写的地方；官方说明是：移动鼠标到样式或变量的引用处，会出现了可点击的下划线，点下去吧，这就是转到定义。很是方便！工具

4，边改边看视图，比F12调试更方便。

,5，调试工具集成了IETester，

目前来说不足：

1，目前还不支持取色器，官方是这样解释的：http://ask.dcloud.net.cn/article/53

其余暂时未发现....后续了解后再来更新。

官方汇总TIPS

/*注：本教程针对HBuilder5.0.0，制做日期2014-12-31*/
建立HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter）
中途换行： 'Ctrl+Enter'
设置charset： m e 6 Enter
引用外部js： s 2 Enter 'Ctrl+Enter'
建立js区块： s Enter
建立函数： f u n 3 （或者 f u n n Enter）
为函数命名：W h o i s E
跳转到函数末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思）
建立style节点： s t Enter ↓ 'Ctrl+Enter'
引用外部css： l Enter Enter
跳转到下一个可编辑区： 'Alt+↓'
建立img标签： i m Enter Enter 'Ctrl+Enter'
插入换行符： 'Shift+Enter' Enter
建立div并设id和class： d i Enter d 1 → Space c Enter Enter （这里提示的class列表是在test.css里定义的）
转到class的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也能够）
关闭标签页：'Ctrl+w' （切换标签页则能够用Ctrl+e）
添加自定义属性data-test并赋值1： → Space d 7 t e s t Tab 1
合并下行：'Ctrl+Alt+j' 'Ctrl+Enter'
建立超连接并设id： a Enter Enter → Space i Enter a 1
使用选择助手选中#d1：'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (若是快捷键冲突,可以使用Alt+S U，或者鼠标双击引号)
从新修改连接指向新建立的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter'
建立ul： u Enter
折叠代码：'Ctrl+Alt+-'
向上插入空行：'Ctrl+Shift+Enter' Tab （通常Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多表明相反意义）
没有代码块时，使用emmet语法建立标签：n a v Tab （若是不知道emmet技术，请搜索学习，前端必学）
使用shift转码输入空格：'Shift+Space' （若是与输入法快捷键冲突，也可输入& n 2）
建立按钮：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →
添加点击事件： Space o n c k Enter w h o Enter → （onck是模糊匹配，不用输入完整单词也会模糊匹配，除代码块外全部语法提示都支持模糊匹配）
使用转到定义到js函数：'Ctrl+Alt+D' ↓

------如下为js部分
定义一个变量e： v a r Space e ; Enter
为e赋值：e Space = Space d o Enter . g 6 " Enter （可提示样式列表）
使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：Enter ; Enter
为e赋值2：e Space = Space d o Enter . g 8 " d 8 Enter ; Enter （可提示标签列表）
为e赋值3(这个代码块很经常使用)：e Space = Space $ (或者dg) Enter 2 Enter ; Enter （可提示id列表，注意选择d1）
为e设置algin属性： e . s e 2 " a l Enter → , " c Enter Enter ; Enter
设置自定义属性：e . s e 2 " d Enter → , " 2 Enter ; Enter
提示字体列表： e . s t Enter . f o 2 = " Enter Enter ; Enter
提示图片列表： e . s t Enter . b 7 = " h b Enter Enter ; Enter
还能这么写css： e . s t Enter . c s 2 = " b 7 h b Enter → ; Enter
写switch对e判断：s w 2 e . s t Enter . d i s Enter Tab
case处提示display的值域：" - w e Enter
跳转到switch结尾（有绿色竖线）：Enter Enter
写if代码块：i f f Enter (或者使用i f 2)
为if添加条件判断属性里的样式：e . g e t a t Enter " c Enter Enter ! = " Enter ↓
设置e的样式：e . c l 2 (此处也能够用c l n Enter) = " Enter Enter ; ↓ Enter
js里能够提示html： e . i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter
e赋值改成超连接：e Space = Space $ Enter Enter Enter ; Enter
给a1加连接地址：e . h r Enter = " Enter Enter ; Enter
给a1加target：e . t 5 = " Enter Enter ; Enter
e赋值改成image对象：e Space = Space n e w Space i m 6 Enter ; Enter
为img增长图片： e . s r Enter = " Enter Enter ; Enter
e赋值改成indexedDB对象：e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 ; Enter
确认e可被浏览器识别：i f f Enter (也能够使用i f 2) t y 4 e Enter ↓
执行indexdb的方法：e . o p Enter " t e s t Enter ; ↓ Enter
------如下为删除又添加上外部css引用
定义head变量：v a r Space h e a d Space = Space d o Enter . g 8 " h e Enter Enter [ 0 → ; Enter
with里也能够提示： w i t h h (或者w i t 2) Enter h Enter ↓
获取head的最后一个子节点：v a r Space l Space = Space l e c Enter ; Enter （with里的head可直接识别子对象）
去掉该子节点：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）
动态生成一个css文件引用：e Space = Space d c Enter l 5 Enter ; Enter
添加属性：e . r 3 = " s t y Enter Enter ; Enter
设置type： e . t y Enter = " c Enter Enter ; Enter
设置href：e . h r Enter = " . c Enter Enter ; Enter
将e加入head中：h Enter . a p Enter e Enter Enter ; Enter
------演示重构，即重命名变量
用代码块定义一个变量s：v a r s Enter Tab e Space i s Space 'Ctrl+Enter'
判断e的属性：i f e（或i f 3） Enter e . g 2 " d Enter Enter = = n u 2 ↓
为s赋值：s = s + e . o u Enter ; 'Alt+↓'
为s赋值：s = s + " u n k n o w → ; ↓ Enter
将s打印出来：a l Enter s
选择s并转到定义：'Shift+←' 'Ctrl+Alt+D'（按Alt点击鼠标也能够）
重构s的命名为ss：'Ctrl+F2' Enter s s Enter Enter (弹出对话框可预览重构结果)
跳转到函数末尾：'Alt+↓' 'Alt+↓' Enter

添加一个启动事件： a d Enter " d o m l o Enter → , f u n a Enter (此处也能够是f u 6) ↓
提示自定义函数的jsdoc： f i n i Enter 1

------css部分
跳转到CSS：'Alt+↓'
给body加样式：b o Enter { Enter
emmet方式增长textalign：t c Tab Enter
模糊匹配增长user-select：u s e r s 4 5
写下一个样式：↓ Enter
为input增长样式：i n Enter [ t y Enter = Enter → { Enter
使用代码块设置宽度：w 9 9 0 ↓ Enter
为ul加样式：u l { d n Enter 'Ctrl+Enter'
ID也能够提示：# 2 { Enter
提示字体列表：f f Enter Enter Enter
回车自动补行尾分号：Enter
增长background-image：b i Enter h b Enter
大功告成，保存并运行起来看看：'Ctrl+s' 'Ctrl+r'
若是你屏幕够宽，也能够点击右上角视图切换，换到边改边看视图Ctrl+P，左边保存右边自动刷新

#后记：
往后若需查阅全部代码块，点击菜单视图-显示视图-其余-HBuilder-代码块。
若须要自定义代码块，点击菜单工具-扩展代码块。
若需修改或搜索快捷键，点击菜单工具-选项-常规-快捷键。
若浏览快捷键，点击菜单帮助-快捷键。

##快捷键语法：
不少软件有几百个快捷键但没人记的住。为了解决这个问题，HBuilder引入了快捷键语法。
HBuilder的快捷键是有规律的，虽然与其余软件不一样。但记忆几条快捷键语法，就能记住大多数快捷键。
1. Alt是跳转，Shift是转义，Ctrl是操做。
   好比Alt+括号、引号，即转到对应的符号。
   Shift+回车是<br/>，shift+空格是 。
   Ctrl+D是删除行，Ctrl+F2是重构命名。
2. Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多表明相反意义
   好比Ctrl+p和Ctrl+Shift+p，分别是开启和关闭边看边改模式。
3. HBuilder继承windows全部标准快捷键。
   好比Tab和Shift+Tab的缩进与反缩进，Ctrl+左右是光标跳转一个单词
4. 全部菜单命令都有&快捷键
   按下Alt+F等字母就能够激活菜单，菜单里每一个项目文字后面括号里的字母都是&快捷键，敲下字母就激活那个菜单项。
虽然你可能习惯了原来使用的工具的快捷键，但能够忘掉它了，这套快捷键语法才是值得记忆的。

##代码块激活字符原则 1. 连续单词的首字母。好比js中：dg激活document.getElementById(""); vari激活var i=0; 而css中，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，分别输出匿名函数和闭包。