1. 程式人生 > >Sublime text3外掛Emmet的安裝及Tab補全程式碼問題解決

Sublime text3外掛Emmet的安裝及Tab補全程式碼問題解決

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

1.開啟Package Control(Ctrl+Shift+p)

2.開啟外掛控制器後輸入package control install package,或者在命令面板輸入"pcip"即這四個單詞的首字母,便會出現新的安裝package的面板,搜尋emmet找到後點擊回車鍵,稍後便會自動安裝。

3.安裝完成後可通過Perferences(首選項)-->Package Settings-->Emmet檢視是否成功,如果Emmet在說明安裝成功了。

寫(fuzhi)到這裡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鍵即可看到如下的程式碼。