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')

Untitled

 

這樣就簡單裝完了

安裝套件

安裝好Package Control之後，重新啟動Sublime Text，按下組合鍵「並按下Command(Ctrl)+shift+p」之後，輸入「Install …」就會出現如下圖：
Untitled

 

接下來只要輸入想要裝的關鍵字如「Emmet」就可以找到特定的Plugin可以安裝：
Untitled

 

前端開發利器

在網頁應用程式開發的過程當中，不管是前端或是後端程式碼都修正，都需要重新整理頁面來重新讀取程式碼來顯示最新的狀態，「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也會陸續與大家分享。

 

程式碼重新整理

我們從這個地方打開「Key Bindings」
Untitled

然後將全文取代成：

[
	{ "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

補充：這位大大的系列文章相當豐富，可以挖到很多寶物，迫不及待的各位就點過去看看吧！