[Sublime Text] 寫網站的神級編輯器 筆記

剛好趁換新的Mac pro記錄一下安裝Sublime的過程，
目前已用了一年多了，細節大家看網路應該就一堆介紹啦，
所以不再多對它介紹了XD

使用版本：

Sublime Text 3

安裝第一個pluging "Page Control"

View->Show Console

將以下的install code貼到Console

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)

如何使用Page Control安裝外掛

安裝page control要裝其他東西就簡單啦，步驟如下：

Step1:

Sublime Text->Preference->Page Control

 Step2: 

選擇Install Package，就會到package的資源庫去掃了

Step3:

輸入你要安裝外掛的關鍵字 jsfor ，點擊後就能安裝了，安裝完成不用重啟:D

排版

內建的排版方式

http://stackoverflow.com/questions/8839753/how-do-i-reformat-html-code-using-sublime-text-2

You don't need any plugins to do this. Just select all lines (CtrlA) and then from the menu select Edit → Line → Reindent. This will work if your file is saved with an extension that contains HTML like .html or .php.

If you do this often, you may find this key mapping useful:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

超好用外掛清單

Emmet (前身Zen-Coding)
透過簡單的Emmet Syntax就可以簡單編寫Html Tag的時間

速查表
https://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf

HTML-JS-CSS Prettify
好用的排版工具，安裝完按右鍵會有選單:D

JSFormat
Javascript快速排版工具

SidebarEnhancement
讓sidebar的右鍵支援更多功能選項

ColorPicker
CSS 方便的顏色選擇器，CMD+SHIFT+C就可以叫出顏色選擇器啦

ColorHighlighter

把CSS設定好的背景色直接顯示出來

BrowserRefresh