Emmet是一個強大的代碼快速編寫工具,使用emmet可以提高代碼輸入效率,特別是前端工程師在編寫HTML和CSS代碼時,是一個前端開發的利器!
廢話少說,直接上圖!
在前端開發所用的編輯器,比如sublime text,editplus,webstorm中,使用emmet很方便,但是在eclipse中怎樣使用這個插件來提高開發效率呢?
各位看官往下看!
ZenCoding 升級為 Emmet 之后,基於 Eclipse 的插件安裝地址也發生了變化,下面是在基於 Eclipse 的 IDE 中安裝和使用 Emmet 的圖文示例。
一、打開 Eclipse 的插件安裝界面
啟動 Eclipse,選擇 Help>Install New Software ...
二、輸入插件安裝地址:
單擊彈出的對話框中的 Add... 按鈕,彈出輸入插件安裝地址及插件名稱的對話框:
在彈出的對話框的 Location 一欄輸入 http://emmet.io/eclipse/updates/ ,在 Name 一欄隨便輸入一個名字,比如 Emmet,單擊 OK:
三、下載 Emmet:
當 Install 對話框中顯示出了 Emmet 選擇項后,選擇 Emmet,一路 Next,到最后一步,選擇 I accept the terms of th license agreements,單擊 Finish,彈出下載對話框,開始下載必要的組件:
四、安裝 Emmet:
下載完畢后,會彈出要求確認安裝的對話框,點擊 OK,安裝過程很快就完成了。
五、使用 Emmet:
單擊上一步中的 Yes,重啟 Eclipse,就可以使用 Emmet 了。
輸入 Emmet 指令(例如“table>tr*3>td*5”),再按下 Tab 鍵,就可以了。
但是在默認配置下, HTML, XML, HAML, CSS, SASS/SCSS, LESS, JavaScript, Python, Ruby 文件可以直接使用“Tab”鍵,而在其他類型文件中使用“ctrl+e”作為快捷鍵。
所以,在JSP頁面中,可以輸入Emmet 指令(例如“table>tr*3>td*5”),再按下ctrl+e,就可以了