HBuilder 常用快捷键小结_编程开发

朋友推荐用hbuilder编辑器，看了下hbuilder官网和那视频，感觉牛逼哄哄的，
自己也就体验了一下，打开hbuilder的快捷键列表，每个快捷键都体验了一下，以下展示出来的，每一个都是精华，每一个快捷键都要知道怎么用，而且会经常用。

hbuilder是当前最快的html开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。
利用hbuilder快捷键可以代替鼠标做一些工作，可以利用键盘快捷键打开、关闭和导航“开始”菜单、桌面、菜单、对话框以及网页，word里面也可以用到快捷键。

那就几乎可以脱离鼠标来写前端代码了。

另外还有一些实用的组合键：

alt+t→v　　(检验语法文档)
alt+l→h　　(代码历史版本)

hbuilder也要吐槽一下：

1.打开相对慢。
2.新建文件，为什么不能存放到电脑的目录。
3.emmet输入 w100，变成了w1→white-space: ;，弄得每次都要w→tab→再输入100px，这个体验超级繁琐。
4.style，script标签默认就不要带'type=***'了，所有浏览器都支持。
5.图片不能自动获取宽高。

下面是其他网友的补充：

alt+[匹配括号
alt+↓跳转到下一个可编辑区
ctrl+alt+j合并下一行
ctrl+alt+←选择助手
shift+回车
shift+空格
ctrl+回车换行
strl+shift+回车向上换行
ctrl+d删除一行
ctrl+shift+d复制上一行

创建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快捷键：

中途换行： 'ctrl+enter'
向上插入空行：'ctrl+shift+enter' tab （一般ctrl+某字母的快捷键，变成ctrl+shift+相同字母，大多代表相反意义）
跳转到函数末尾： end 'alt+[' ↓ 'ctrl+enter' （alt+[是跳转到匹配括号的意思）
插入换行符： 'shift+enter'
转到class的定义处/转到function的定义处：'ctrl+alt+d' （按alt点击鼠标也可以）
合并下行：'ctrl+alt+j'
折叠代码：'ctrl+alt+-'
使用shift转码输入空格：'shift+space'