朋友推薦用Hbuilder編輯器，看了下Hbuilder官網(wǎng)和那視頻，感覺牛逼哄哄的，
自己也就體驗(yàn)了一下，打開Hbuilder的快捷鍵列表，每個快捷鍵都體驗(yàn)了一下，以下展示出來的，每一個都是精華，每一個快捷鍵都要知道怎么用，而且會經(jīng)常用。

HBuilder是當(dāng)前最快的HTML開發(fā)工具，強(qiáng)大的代碼助手幫你快速完成開發(fā)，最全的語法庫和瀏覽器兼容性數(shù)據(jù)讓瀏覽器碎片化不再頭痛。
利用HBuilder快捷鍵可以代替鼠標(biāo)做一些工作，可以利用鍵盤快捷鍵打開、關(guān)閉和導(dǎo)航“開始”菜單、桌面、菜單、對話框以及網(wǎng)頁，Word里面也可以用到快捷鍵。

那就幾乎可以脫離鼠標(biāo)來寫前端代碼了。

另外還有一些實(shí)用的組合鍵：

Alt+T→V　　(檢驗(yàn)語法文檔)
Alt+L→H　　(代碼歷史版本)

Hbuilder也要吐槽一下：

1.打開相對慢。
2.新建文件，為什么不能存放到電腦的目錄。
3.emmet輸入 w100，變成了w1→white-space: ;，弄得每次都要w→Tab→再輸入100px，這個體驗(yàn)超級繁瑣。
4.style，script標(biāo)簽?zāi)J(rèn)就不要帶'type=***'了，所有瀏覽器都支持。
5.圖片不能自動獲取寬高。

下面是其他網(wǎng)友的補(bǔ)充：

Alt+[匹配括號
Alt+↓跳轉(zhuǎn)到下一個可編輯區(qū)
Ctrl+Alt+j合并下一行
Ctrl+Alt+←選擇助手
Shift+回車
Shift+空格
Ctrl+回車換行
Strl+Shift+回車向上換行
Ctrl+d刪除一行
Ctrl+Shift+d復(fù)制上一行

創(chuàng)建HTML結(jié)構(gòu)： h 8 （敲h激活代碼塊列表，按8選擇第8個項(xiàng)目，即HTML代碼塊，或者敲h t Enter）
中途換行： 'Ctrl+Enter'
設(shè)置charset： m e 6 Enter
引用外部js： s 2 Enter 'Ctrl+Enter'
創(chuàng)建js區(qū)塊： s Enter
創(chuàng)建函數(shù)： f u n 3 （或者 f u n n Enter）
為函數(shù)命名：W h o i s E
跳轉(zhuǎn)到函數(shù)末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳轉(zhuǎn)到匹配括號的意思）
創(chuàng)建style節(jié)點(diǎn)： s t Enter ↓ 'Ctrl+Enter'
引用外部css： l Enter Enter
跳轉(zhuǎn)到下一個可編輯區(qū)： 'Alt+↓'
創(chuàng)建img標(biāo)簽： i m Enter Enter 'Ctrl+Enter'
插入換行符： 'Shift+Enter' Enter
創(chuàng)建div并設(shè)id和class： d i Enter d 1 → Space c Enter Enter （這里提示的class列表是在test.css里定義的）
轉(zhuǎn)到class的定義處：'Ctrl+Alt+D' （按Alt點(diǎn)擊鼠標(biāo)也可以）
關(guān)閉標(biāo)簽頁：'Ctrl+w' （切換標(biāo)簽頁則可以用Ctrl+e）
添加自定義屬性data-test并賦值1： → Space d 7 t e s t Tab 1
合并下行：'Ctrl+Alt+j' 'Ctrl+Enter'
創(chuàng)建超鏈接并設(shè)id： a Enter Enter → Space i Enter a 1
使用選擇助手選中#d1：'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷鍵沖突,可使用Alt+S U，或者鼠標(biāo)雙擊引號)
重新修改鏈接指向新創(chuàng)建的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter'
創(chuàng)建ul： u Enter
折疊代碼：'Ctrl+Alt+-'
向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷鍵，變成Ctrl+Shift+相同字母，大多代表相反意義）
沒有代碼塊時，使用emmet語法創(chuàng)建標(biāo)簽：n a v Tab （如果不知道emmet技術(shù)，請搜索學(xué)習(xí)，前端必學(xué)）
使用shift轉(zhuǎn)碼輸入空格：'Shift+Space' （如果與輸入法快捷鍵沖突，也可輸入& n 2）
創(chuàng)建按鈕：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →
添加點(diǎn)擊事件： Space o n c k Enter w h o Enter → （onck是模糊匹配，不用輸入完整單詞也會模糊匹配，除代碼塊外所有語法提示都支持模糊匹配）
使用轉(zhuǎn)到定義到j(luò)s函數(shù)：'Ctrl+Alt+D' ↓

------以下為js部分
定義一個變量e： v a r Space e ; Enter
為e賦值：e Space = Space d o Enter . g 6 " Enter （可提示樣式列表）
使用回車或Tab跳轉(zhuǎn)光標(biāo)到綠色豎線（若沒有綠色豎線請使用End到行尾）：Enter ; Enter
為e賦值2：e Space = Space d o Enter . g 8 " d 8 Enter ; Enter （可提示標(biāo)簽列表）
為e賦值3(這個代碼塊很常用)：e Space = Space $ (或者dg) Enter 2 Enter ; Enter （可提示id列表，注意選擇d1）
為e設(shè)置algin屬性： e . s e 2 " a l Enter → , " c Enter Enter ; Enter
設(shè)置自定義屬性：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
跳轉(zhuǎn)到switch結(jié)尾（有綠色豎線）：Enter Enter
寫if代碼塊：i f f Enter (或者使用i f 2)
為if添加條件判斷屬性里的樣式：e . g e t a t Enter " c Enter Enter ! = " Enter ↓
設(shè)置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
確認(rèn)e可被瀏覽器識別：i f f Enter (也可以使用i f 2) t y 4 e Enter ↓
執(zhí)行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的最后一個子節(jié)點(diǎn)：v a r Space l Space = Space l e c Enter ; Enter （with里的head可直接識別子對象）
去掉該子節(jié)點(diǎn)：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）
動態(tài)生成一個css文件引用：e Space = Space d c Enter l 5 Enter ; Enter
添加屬性：e . r 3 = " s t y Enter Enter ; Enter
設(shè)置type： e . t y Enter = " c Enter Enter ; Enter
設(shè)置href：e . h r Enter = " . c Enter Enter ; Enter
將e加入head中：h Enter . a p Enter e Enter Enter ; Enter
------演示重構(gòu)，即重命名變量
用代碼塊定義一個變量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并轉(zhuǎn)到定義：'Shift+←' 'Ctrl+Alt+D'（按Alt點(diǎn)擊鼠標(biāo)也可以）
重構(gòu)s的命名為ss：'Ctrl+F2' Enter s s Enter Enter (彈出對話框可預(yù)覽重構(gòu)結(jié)果)
跳轉(zhuǎn)到函數(shù)末尾：'Alt+↓' 'Alt+↓' Enter

添加一個啟動事件： a d Enter " d o m l o Enter → , f u n a Enter (此處也可以是f u 6) ↓
提示自定義函數(shù)的jsdoc： f i n i Enter 1

------css部分
跳轉(zhuǎn)到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
使用代碼塊設(shè)置寬度：w 9 9 0 ↓ Enter
為ul加樣式：u l { d n Enter 'Ctrl+Enter'
ID也可以提示：# 2 { Enter
提示字體列表：f f Enter Enter Enter
回車自動補(bǔ)行尾分號：Enter
增加background-image：b i Enter h b Enter
大功告成，保存并運(yùn)行起來看看：'Ctrl+s' 'Ctrl+r'
如果你屏幕夠?qū)?，也可以點(diǎn)擊右上角視圖切換，換到邊改邊看視圖Ctrl+P，左邊保存右邊自動刷新

HBuilder快捷鍵：

中途換行： 'Ctrl+Enter'
向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷鍵，變成Ctrl+Shift+相同字母，大多代表相反意義）
跳轉(zhuǎn)到函數(shù)末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳轉(zhuǎn)到匹配括號的意思）
插入換行符： 'Shift+Enter'
轉(zhuǎn)到class的定義處/轉(zhuǎn)到function的定義處：'Ctrl+Alt+D' （按Alt點(diǎn)擊鼠標(biāo)也可以）
合并下行：'Ctrl+Alt+j'
折疊代碼：'Ctrl+Alt+-'
使用shift轉(zhuǎn)碼輸入空格：'Shift+Space'

最新評論