Sublime Text 是一套Open source 的Text editor,可以透過Package Control來新增喜歡的Plugin來使用,Plugin種類包含不同程式語言的Color highlight 、snippet…等等
安裝Package Control
將Sublime Text打開之後,按下「ctrl+`」按鍵(Tab按鍵上面的那一個),並把下面的code貼進Console,並按下Enter
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://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')
這樣就簡單裝完了
安裝套件
安裝好Package Control之後,重新啟動Sublime Text,按下組合鍵「並按下Command(Ctrl)+shift+p」之後,輸入「Install …」就會出現如下圖:
接下來只要輸入想要裝的關鍵字如「Emmet」就可以找到特定的Plugin可以安裝:
前端開發利器
在網頁應用程式開發的過程當中,不管是前端或是後端程式碼都修正,都需要重新整理頁面來重新讀取程式碼來顯示最新的狀態,「LiveReload」這個Plugin就可以在程式修改過後,自動的與瀏覽器連結並重新整理,瀏覽器端則需要另外加裝LiveReload的瀏覽器插件。
而「Emmet」這個插件則可以快速地產生大量的HTML程式碼,來加速開發的速度,像是快速產生HTML5標籤:
html:5 (+Tab按鍵) 產生下面HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
另外「Color Picker」這個Plugin可以快速地選擇喜歡的顏色,在CSS當中快速產生色碼。
這三個Plugin幫助我在開發中節省了很多時間,若以後有方便的Plugin也會陸續與大家分享。
程式碼重新整理
然後將全文取代成:
[ { "keys": ["super+shift+r"], "command": "reindent", "args": { "single_line": false } } ]
如此一來就可以使用Commad+shift+r來整理凌亂的程式碼,讓他們排排站對齊好哦!
後記
這陣子因為開發網頁程式得關係,多碰到了關於前端與後關的相關資訊,選擇一個好用的Text Editor是可以有效幫助開發的,Sublime算是所有使用過的文字編輯器當中,靈活度夠高的,希望大家若有更多更好的選擇可以分享的話,也可以告訴我XD
參考資料
Sass教學 (25) – 如何透過Sublime text 3 plugin打造Sass開發環境 – http://ithelp.ithome.com.tw/question/10159247
補充:這位大大的系列文章相當豐富,可以挖到很多寶物,迫不及待的各位就點過去看看吧!