Sublime插件Emmet的安裝及Tab補全代碼


Emmet是一款Web前端開發工具Sublime非常有用的插件,使用仿CSS選擇器的語法來生成代碼,大大提高了HTML和CSS代碼編寫的速度,只需按住Tab鍵即可把一個簡寫展開成HTML和CSS的代碼塊。

在安裝Emmet插件之前我們首先需要在Sublime Text3上安裝Package Control插件管理器。
安裝步驟:
  1.按Ctrl+`調出sublime text的console
  2.粘貼以下代碼到底部命令行並回車:

  import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else     None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

  3.重啟Sublime Text
  4.在Perferences->package settings中看到package control,則表示安裝成功

按住快捷鍵Ctrl+Shift+P或者在菜單欄選擇Perferences-->Package Control即可打開命令面板,如若沒有反應稍等一下便會彈出。

打開命令面板找到package control install package,或者在命令面板輸入"pcip"即這四個單詞的首字母,便會出現新的安裝package的面板,然后輸入emmet找到Emmet Css Snippets,點擊后便會自動安裝。
安裝完成后可通過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鍵即可看到如下的代碼。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM