Sublime Text 2

Sublime Text 2 是網頁開發者都不陌生的一套編輯器,除了單純的文字編輯外,它還有很多實用的套件,這篇來介紹我平常常用的 Sublime Text 2 套件。

編輯環境

  1. Mac 10.9
  2. Sublime Text 2

Mac 環境,所以快捷鍵會介紹 command 的配置,若 windows 版本請自行查閱。

安裝 Package Control

所謂 Package Control 就是 Sublime Text 2 用來裝套件的,因此在裝其他的套件之前,我們必須先來安裝 Package Control。

開啟Sublime Text 2
開啟console,快捷鍵ctrl+`
貼上以下程式碼

import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

程式碼可以參照官網

安裝完後,未來我們就可以使用cmd+shift+p,打入install package,即可啟用 Package Control,如下圖

install package

安裝套件步驟

  1. 首先cmd+shift+p
  2. 鍵入install package
  3. 跳出新的輸入欄位後,在輸入你要的package名稱
  4. 看著左下角,等它跑完
  5. 重新啟動 Sublime Text 2 即安裝完成。

必裝套件

一、BracketHighlighter

這是一套超過 196K 人裝的套件,如圖所示,寫 html 常常遇到不知道 close tag 在哪邊,裡用它可以清楚的將 close tag 標示出來。
另外它有一個很好的地方,就是會在每一行的前面列出來目前的 tag,不同的語言還有不同的 icon,因此可以更快的知道自己的位置。

二、Emmet

以前它叫做 Zen coding,現在則改為 Emmet。

可以將需要重複的 html 用很簡短的方式寫出來,例如:

  1. .container>.col-lg-4*3
  2. 按下 tab 後便會出現
  3. Emmet

若你發現按下 tab 後竟然沒有用,記得確定自己是不是在 html 文件內。

view --> syntax --> HTML(5)

在 HTML5 的文件下,!+tab 會有出現 HTML5 的 snippet 出現,非常好用!

三、Pretty Json

有利用到 JSON 的人,想必一定會為了格式上面的問題而煩惱,只要裝上這個,JSON 立刻變得很好看。

裝完之後,把你要修改的 JSON 選取起來,按下快捷鍵

cmd+ctrl+j

立刻就可以把 JSON 變得很漂亮,也可以自行進去定義縮排大小。

四、flat theme

flatland

其實這個套件全名是 flatland 才對,可以把 Sublime Text 2 的整體環境變得扁平化。

安裝方法:

  1. 打開 Package Control
  2. 輸入 Theme - Flatland 即可

以上介紹了一些我常用的 Sublime Text 2 套件,但一直沒有找到好看的主題,如果你有推薦的主題,非常歡迎交流!