詳解Sublime插件Emmet的安裝及Tab補全程式碼問題的解決方法

Emmet是一款Web前端開發工具Sublime非常有用的插件，使用仿CSS選擇器的語法來產生程式碼，大大提高了HTML和CSS程式碼編寫的速度。只要按住Tab鍵即可把一個簡寫展開成HTML和CSS的程式碼區塊，如下圖所示，大部分標籤都可自動產生。以下由sublime教學專欄為大家介紹一種使用線上安裝的方式來安裝Emmet外掛程式。

方法步驟：

在安裝Emmet外掛程式之前我們首先需要在Sublime Text3上安裝Package Control外掛程式管理器，具體操作可參考如下的文章。

按住快速鍵Ctrl Shift P或在選單列選擇Perferences-->Package Control即可開啟指令面板，如若沒有反應稍等一下便會彈出，介面如下圖所示。

開啟指令面板找到package control install package，或是在指令面板輸入"pcip"即這四個單字的首字母，便會出現新的安裝package的面板，搜尋emmet找到後點選回車鍵，稍後便會自動安裝。

安裝完成後可透過Perferences-->Package Settings-->Emmet查看是否成功，如果Emmet在說明安裝成功了。

安裝完成後我們利用Emmet外掛程式去快速產生HTML程式碼，例如輸入html:5按住Tab鍵即可產生HTML檔完整的結構，但很多人在安裝完成後輸入html:5然後按住Tab鍵並沒有反應，這是什麼原因導致的呢？原來Emmet預設的快速鍵是Ctrl E，我們需要設定成常用的Tab鍵。

在選單列選擇Preferences-->PackageSettings-->Emmet-->KeyBindings-->User，將以下資訊貼進去即可。

[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

重啟Sublime Text3此時我們便可以進行程式碼補全操作了，在新建立的檔案上輸入html:5，按住Tab鍵即可看到如下的程式碼。

注意事項

Emmet外掛Tab鍵不起作用的原因多是因為快速鍵衝突導致的，另外需檢查是否安裝成功。

以上是詳解Sublime插件Emmet的安裝及Tab補全程式碼問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！