hbuilder工具快捷键

创建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,左边保存右边自动刷新

时间: 2024-11-07 01:48:39

hbuilder工具快捷键的相关文章

Hbuilder工具使用

现在用的版本是:HBuilder 9.1.19.201808300739 前段时间自动更新了下,也忘记了是更新后js代码不能正常代码提示,还是又发生了什么事情,导致了不能正常提示,也没时间去排查,卸载了,重新装的现在用的这个版本,不再更新先. 目前,安装了2个插件 ----------------------- HBuilder的快捷键是有规律的,虽然与其他软件不同.但记忆几条快捷键语法,就能记住大多数快捷键.1. Alt是跳转,Shift是转义,Ctrl是操作. 比如Alt+括号.引号,即转到

微信小程序开发工具快捷键

最近微信小程序已经开始公测了,鉴于开发的过程中更加便捷的编写代码,最近整理了一下<微信开发者工具>一些实用的快捷键分享给大家: 微信小程序开发工具快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行 Shift+Alt+F:代码格式化 Alt+Up,Alt+Down:上下移动一行 Shift+Alt+Up,Shift+Al

Hbuilder 常用快捷键汇总

朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华,每一个快捷键都要知道怎么用,而且会经常用. 那就几乎可以脱离鼠标来写前端代码了. 另外还有一些实用的组合键: Alt+T→V (检验语法文档) Alt+L→H (代码历史版本) Hbuilder也要吐槽一下: 1.打开相对慢. 2.新建文件,为什么不能存放到电脑的目录. 3.emmet输入 w100,

禁用Win10自带截图工具快捷键(Shift+Win+S)

由于在微信之前,多年使用QQ的缘故,已经习惯了使用Ctrl+Alt+A进行截图,虽然QQ后来还专门提供了TIM(Office-QQ),但仍然渐渐的以微信为主,TIM甚至已经很少登录,之前登录也仅仅是为了使用截图,所以当时觉得可以找个替代者,没必要因为个截图小工具每天登录它,便强迫自己使用Win10自带的截图工具(Snipping Tool),不足之处是没法截图后直接进行编辑做标记等操作,而且总感觉性能不是很好,每次打开都比较卡,最近在截图灰屏状态频繁出现卡顿,不像QQ.TIM.微信的截图只有初次

win7系统自带截图工具快捷键是什么?怎么设置快捷键

win7自带的截图工具很好,很强大,比从网上下载的截图工具好用多了,很少会出现问题.但是它能不能像QQ截图工具一样可以使用快捷键呢?今天小编和大家分享下心得,希望能够给你的工作带来快捷. 工具/原料 win7自带截图工具 方法/步骤 点击左下角的"开始"图标,点击"所有程序" 如何给win7自带的截图工具设置快捷键? 出现系统安装的所有程序的名字,找到"附件"--"截图工具" 如何给win7自带的截图工具设置快捷键? 右键单击

AndroidStudio开发工具快捷键

在这里,自己整理了下在使用AndroidStudio开发工具所使用到的一些快捷键提示,也出于在开发过程中节省时间提升效率,然而可能多数开发者之前使用的都是Eclipse开发工具,可能开始都不习惯,但是使用的时间长了就会习以为常了. 常用的快捷键如下: Ctrl+N:查找类Ctrl+Shift+N:查找文件Ctrl+Alt+L :格式化代码Ctrl+Alt+O:优化导入的类和包Ctrl+/:注释代码 格式://代码块Ctrl+Shift+/:注释多行代码 格式:/*代码块*/Ctrl+Alt+Sp

AndroidStudio开发工具快捷键整理分享

在这里,自己整理了在使用AndroidStudio开发工具所使用到的一些快捷键,也出于在开发过程中节省时间提升效率,然而可能多数开发者之前使用的都是Eclipse开发工具,可能开始都不习惯,但是使用的时间长了就会习以为常了. 常用的快捷键如下: Ctrl+N:查找类 Ctrl+Shift+N:查找文件 Ctrl+Alt+L :格式化代码 Ctrl+Alt+O:优化导入的类和包 Ctrl+/:注释代码 格式://代码块 Ctrl+Shift+/:注释多行代码 格式:/*代码块*/ Ctrl+Alt

Sublime text开发工具快捷键整理

作者:luuman链接:https://www.zhihu.com/question/37342465/answer/71529988来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 二. 界面 1.概况: 1.从上到下:标题栏Title.菜单栏Menu.标签栏Tab.编辑区Editing Area.控制台Console.状态栏Status Bar. 2.从做到右:侧边栏(可关闭.文件.文件夹视图).编辑区(代码编辑).MiniMap(缩略图). 2.菜单栏:各种命

HBuilder常用快捷键

1.文件 新建 Ctrl + N 关闭 Ctrl + F4 全部关闭 Ctrl + Shift + F4 属性 Alt + Enter 2.编辑 激活代码助手 Alt + / 激活快捷键视图 Ctrl + Shift + L 开启关闭注释整行 Ctrl + / 开启关闭注释已选内容 Ctrl + Shift + / 删除当前行 Ctrl + D 删除当前标签 Ctrl + Shift + T 删除至行首 Shift + Backspace 删除至行尾 Shift + del 合并下一行 Ctrl