Sublime Text安裝Zen Coding(Emmet)的方式

在Sublime Text安裝外掛Zen Coding(Emmet):

我們都知道在Sublime Text 2上面安裝Zen Coding的方式是:
  1. 快速鍵「control+`」,並貼入「import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
  2. 然後快速鍵「command+shift+p」鍵入「install」完成後按下「Enter」,然後貼入或是尋找「zencoding」,選定之後安裝即可。
但是以上的招式在Sublime Text 3上面就通通失效了,因為方式有變(連zencoding都改名為Emmet),在Sublime Text 3安裝外掛的方法如下:
  1. 快速鍵「control+`」,並貼入「import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  2. 同樣的快速鍵「command+shift+p」鍵入「install」完成後按下「Enter」,然後貼入或是尋找「Emmet」,選定之後安裝即可。

解說一下Zen Coding(Emmet):

Zen Coding(Emmet)是一個專屬的外掛程式,官網上的說明:Zen Coding(Emmet)目前可以使用在多達30套各類HTML與CSS編輯器中,像是Aptana、TextMate(Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio⋯⋯等常用的編輯器都有支援Zen Coding(Emmet)。

Zen Coding(Emmet)主要的作用是什麼呢?用過你就會知道,他利用了一些簡易文字碼的技術,高速的架構出HTML、CSS、XML、XSL或HAML。然後它能改變什麼?(以下有一段操作的影片,影片來自網友KingKong Bruce記事的Blog)


常常寫Code的朋友有沒有覺得很神?看完之後覺得是不是很快速呢?

Emmet的指令參考網頁如下:http://docs.emmet.io

看完官網上面秀的,你應該會更Hight~原來我們都被編輯器偷走許多年~XD(其實這些東西都是給看得懂語法的人玩的工具,看不懂的人還是請從Adobe Dreamweaver開始好了。)

沒有留言

技術提供:Blogger.