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

藏色散人
發布: 2021-09-06 21:44:49
轉載
3623 人瀏覽過

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

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

方法步驟:

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

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

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

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

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

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

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

安裝完成後我們利用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鍵即可看到如下的程式碼。

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

注意事項

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

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

相關標籤:
來源:jingyan.baidu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板