在Eclipse中在線安裝Emmet和圖文使用教程

                                           Emmet是一個強大的代碼快速編寫工具，使用emmet能夠提升代碼輸入效率，特別是前端工程師在編寫HTML和CSS代碼時，是一個前端開發的利器！

                                           廢話少說，直接上圖！

在前端開發所用的編輯器，好比sublime text,editplus,webstorm中，使用emmet很方便，可是在eclipse中怎樣使用這個插件來提升開發效率呢？

各位看官往下看！

ZenCoding 升級爲 Emmet 以後，基於 Eclipse 的插件安裝地址也發生了變化，下面是在基於 Eclipse 的 IDE 中安裝和使用 Emmet 的圖文示例。

1、打開 Eclipse 的插件安裝界面

啓動 Eclipse，選擇 Help>Install New Software ...

2、輸入插件安裝地址：

單擊彈出的對話框中的 Add... 按鈕，彈出輸入插件安裝地址及插件名稱的對話框：

在彈出的對話框的 Location 一欄輸入 http://emmet.io/eclipse/updates/ ，在 Name 一欄隨便輸入一個名字，好比 Emmet，單擊 OK：

3、下載 Emmet：

當 Install 對話框中顯示出了 Emmet 選擇項後，選擇 Emmet，一路 Next，到最後一步，選擇 I accept the terms of th license agreements，單擊 Finish，彈出下載對話框，開始下載必要的組件：

 

 

4、安裝 Emmet：

下載完畢後，會彈出要求確認安裝的對話框，點擊 OK，安裝過程很快就完成了。

5、使用 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，就能夠了