Sublime Text 2

| Comments

Sublime Text 2

ST2是我在Programming時必備的編輯器(Editor),從原本使用Notepad++跳槽到ST2,變回不去了,更遑論筆電換成Mac後,更是確定使用ST2作為我的開發利器(雖然也不是不會使用神器Vim,但是很多快捷鍵還不熟,通常只有在連線到server才會用XD)。而在處理MBA2013年中升級到OS X 10.9的續航問題而嘗試重新安裝OS後,便利用這機會,把我有關ST2的相關設定作為筆記寫成這篇文章囉。

為什麼使用ST2

我的理由:

  • 跨平台。Linux, OS X, Windows皆有支援。
  • 配色佳。尤愛預設的Monokai Color Scheme,深底色會讓眼睛舒適。
  • 套件多。豐富的套件與簡單好用的套件管理器,讓我簡單擴充我想要的功能。
  • 自訂強。非常彈性與強大的自訂設定,讓我打造屬於自己的編輯器。

ST設計原則:

  • 專注在文字與程式碼上,而不是讓人眼花撩亂的工具列;
  • 對話框訊息不使用晦澀難懂的文字;
  • 善用螢幕的每個空間,使全螢幕、多螢幕模式一起編輯檔案,儘可能很容易

下載

下載頁面:http://www.sublimetext.com/2 因為ST3在此時還在Beta,有些套件可能仍還未升級到可以支援ST3,所以本人還是繼續使用ST2。

套件(Packages)

安裝套件管理器

Ctrl + ` 呼叫 Console(控制台),然後輸入以下Script(腳本),並且送出:

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

如此一來就可以使用套件管理器了!

使用套件管理器

使用command + shift + p 呼叫 Command Palette (命令調色盤) 然後你可以使用下列指令來做套件管理: - Package Control: Install Package - Package Control: Litst Package - Package Control: Remove Package

(Command Palette的搜尋是只要輸入目標擁有的關鍵字即可搜尋到,所以通常我們只輸入後方的單字) (還有其他指令可輸入Package Control 查詢)

(以下套件名稱都是可以點擊的超連結,會連結該套件在Package Control的對應頁面。) (有些套件不是安裝就能使用,或是需要透過按鍵觸發,建議安裝前都閱讀一下他們自己的頁面哦。)

推薦套件

  • Package Control - 就是上面安裝的套件管理器。
  • AdvancedNewFile - 在指定路徑新增檔案。
  • Alignment - 讓程式碼能多行將’=‘或自定義符號對齊的套件。
  • BracketHighlighter - 將括號高亮顯示。
  • ConvertToUTF8 - 解決中文顯示亂碼的問題(將Big5, GBK轉為UTF8讓編輯器顯示)
  • ColorHighlighter - 當的游標移至文字中如顏色相關的色碼會自動顯示對應的顏色。
  • ColorPicker - 呼叫調色盤,讓你直接用選的來選顏色。
  • Emmet - 原Zend Coding,能加速程式開發的神器,詳細使用方法請見官方文件。
  • LiveReload - 此套件搭配對應瀏覽器擴充,可以讓你儲存檔案時,自動重新整理網頁。
  • SFTP - 能夠讓你使用SFTP/FTP的方式,直接用本機的ST去修改檔案並且儲存。對於Vim苦手可說是必備套件!
  • SideBarEnhancements - Enhancements to Sublime Text sidebar. Files and folders.
  • SublimeLinter - 能用高亮提示使用者程式碼中,不是規範內或錯誤的寫法。
  • SublimeCodeIntel - 多數語言的程式碼提示與追蹤。

選用套件

  • Console API Snippets (JavaScript)) - JavaScript Console API Snippets for Sublime Text
  • CSS Less(ish)) - 讓你用註解的方式,在CSS達到LESS用變數、嵌套的功能。
  • DocBlockr - 自動完成PHP, JS, CoffeeScript, ActionScript, C, C++的DocBlock註解。
  • Git - 能在ST下使用Git指令,免於在ST和Terminal間頻繁地切換。
  • HTML5 - HTML5程式碼高亮與自動完成。
  • jQuery - jQuery程式碼高亮與自動完成。
  • JsFormat - 幫你格式化JavaScript排版,尤其使用在壓縮過的js檔上。
  • LESS - LESS程式碼高亮
  • Prefixr - 能透過Prefixr API協助處理CSS跨瀏覽器的相容問題。
  • Sass - SASS程式碼高亮與自動完成。
  • SCSS - SCSS程式碼高亮與自動完成。
  • Tag - 重新格式化HTML/XML的排版。適合用在外來的dirty code。

自定義設定檔

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "font_size": 14.0,   // 字體大小
    "rulers": [120],     // 邊線寬度
    "wrap_width": 120,   // 邊界寬度
    "tab_size": 4,       // tab寬度
    "spell_check": true, // 拼音檢查
    "translate_tabs_to_spaces": true,          // tab轉成空白
    "trim_trailing_white_space_on_save": true, // 存檔時將句子後面多餘的空白清除
    "highlight_line": true,        // 高亮當前行
    "match_brackets_angle": true,  // 顯示對應的尖型括號 "<>"
    "save_on_focus_lost": true,        // 當不再專注當前文件時,自動存檔
    "ignored_packages":["Vintage"] // 忽略套件
}

參考資料

<陸續更新中>

Comments