[文字編輯器]Sublime Text好用套件-Emmet

手動安裝可參考 ：https://www.minwt.com/webdesign-dev/html/11624.html




這邊使用的是sublime2


安裝步驟

1.下載Sublime Text https://www.sublimetext.com/3

2.安裝Package Control

2-1開啟sublime 並開啟Console (位置在最上方的view > Show Console

 可以看到下方出現console

2-2 輸入相對版本的指令 https://sublime.wbond.net/installation

Sublime Text 2

import urllib2,os,hashlib; h = '261dd1222b4693ce6d4f85f9c827ac06' + '6d5ab8ebdd020086947172a8a1356bb6'; 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://packagecontrol.io/' + 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-3 重開

3.安裝Emmet

3-1 開啟package controller  (Sublime Text2 > perferences >Package Control) 

或快捷鍵(command+shift+p)

3-2 選擇 Package Control:Install Package

3-3 Package Control 視窗會消失，請再開啟一次 (command+shift+p)，並輸入emmet
選擇第一個( 並非我途中所顯示的那個，因為我已經安裝所以不會顯示)

這個才是正確的Emmet (youtube 截圖 from :https://www.youtube.com/watch?v=8n923UBjV9w)

3-4重開 ！！完成




再來是操作 ，在sublime 開啟 html檔案，以下是簡易的教學影片

輸入 .[class name] 後，按鍵盤的Tab鍵 即可變成
<div class="[class name]"></div>
幫你省下許多時間






更多外掛介紹及教學

http://www.slideshare.net/banPrint/sublime-text-51689543