Hbulider快捷键

Posted humility

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hbulider快捷键相关的知识,希望对你有一定的参考价值。

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\'

以上是关于Hbulider快捷键的主要内容,如果未能解决你的问题,请参考以下文章

第一更 Hbulider和SublimeText3

hbuilder怎么设置快捷键

8.20

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

Hbulider 支持less保存自动编译

Vue webapp项目通过HBulider打包原生APP