靈活的快捷鍵使得編程過(guò)程手不離鍵盤(pán)

靈活的快捷鍵使得編程過(guò)程手不離鍵盤(pán)

效果如下圖

• 新建html基本模板后,當(dāng)前光標(biāo)處于title標(biāo)簽內(nèi),此時(shí)我們給HTML設(shè)置title:hellohbuilder,完成后使用Ctrl+回車(chē)在當(dāng)前的下一行插入空行,并將光標(biāo)移動(dòng)到下一行

• 我們?cè)诖颂幨褂胹c代碼塊生成一個(gè)script塊來(lái)編寫(xiě)js代碼(輸入sc,回車(chē))如下圖

• 使用funn代碼塊編寫(xiě)一個(gè)JS方法helloworld(輸入funn,回車(chē))如下圖

• 此時(shí)生成的方法的方法名是選中狀態(tài),我們只需要直接輸入新的方法名helloworld即可,如下圖

• 上圖中的綠色豎線，是代碼塊中指定的下一個(gè)編輯位置,敲擊回車(chē)光標(biāo)會(huì)直接跳轉(zhuǎn)至豎線位置

• 此時(shí)按向下、向下,Ctrl+回車(chē),輸入style回車(chē),生成css代碼區(qū)域

• 定義一個(gè)Css類classA：輸入. c l a s s A { 回車(chē),f o n t 回車(chē) 回車(chē) 回車(chē)

• 然后按alt+下,alt+下跳轉(zhuǎn)至下一個(gè)編輯區(qū)域

• 依次輸入< d i v 也可輸入<dv回車(chē)、<iv回車(chē),語(yǔ)法助手可以通過(guò)模糊匹配獲知想要生成的標(biāo)簽)如下圖

• 如上圖所示,代碼助手左側(cè)包含數(shù)字，可以使用這些數(shù)字選擇對(duì)應(yīng)的條目,右側(cè)包含瀏覽器兼容性數(shù)據(jù)及示例

• 輸入i 回車(chē) d 1,右箭頭,空格,c 回車(chē) 回車(chē)

• 鼠標(biāo)在div標(biāo)簽的class屬性classA上懸浮,按下Alt和左鍵,點(diǎn)擊后可跳轉(zhuǎn)至classA定義處

• Ctrl+回車(chē)

• div也可以通過(guò)代碼塊生成如輸入divc回車(chē)回車(chē)回車(chē),輸入helloworld如下圖

• 向下,回車(chē)