Sublime Text 2+Zen Coding

標籤：http   io   ar   os   使用   sp   java   for   strong   

自己長期使用editplus做代碼編輯，使用過DW，還是習慣前者的使用環境。好友推薦，試試新的編碼工具——Sublime Text 2。在代碼製作過程中，最主要的是1）快速複製的模式化工作  2）零碎代碼整理對齊  3）減少敲擊鍵盤的次數。通過自己試用，Sublime Text 2+Zen Coding的組合能滿足我這些需求，在配合其餘外掛程式。下文有詳細敘述，本文主要從設計師的角度選擇內容，可能有些淺顯。

       建議使用官方版本，綠色版本容易出現一些莫名其妙的問題。

       官網地址：http://www.sublimetext.com/

 

軟體特性：

• 自動完成：

  自動完成的快速鍵是Tab，如果在html檔案中，輸入cl按下tab，即可自動補全為class=””；加上zencoding後，更是如虎添翼，後面再講到

• 多列編輯：

  按住ctrl點擊滑鼠，會出現多個閃爍的游標，這時可同時修改多處或者按住滑鼠中鍵拖拽，

• 代碼注釋功能：

  ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動識別是html、css還是js檔案，給出不同類型的注釋。

• 行操作：

  ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，游標後插入空行，ctrl+d選擇相似，可以參考後面的快速鍵列表。

• 右鍵功能：

  前3個，大家都知道，第4個，show unsaved changes，顯示未儲存的修改，紅色減號表示刪去的內容，綠色加號表示新增的內容

  Open Containing Folder…，開啟包含此檔案的檔案夾，這個很方便找到相關的檔案

  Copy File Path，複製檔案路徑，方便我們複製路徑到瀏覽器中查看

  Auto-Format Tags on Selection 格式化選中的文檔，方便我們更清晰的查看代碼結構，雖然ST2有自動縮排功能，但是當我們粘貼進一段沒有格式化過的代碼，就需要這個能了，這個功能要安裝了Tag這個外掛程式才會出現。

 

 

安裝Sublime Text 2外掛程式的方法：1.直接安裝

安裝Sublime text 2外掛程式很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->packages）。

2.使用Package Control組件安裝

也可以安裝package control組件，然後直接線上安裝：

1. 按Ctrl+`調出console（註：安裝有QQIME的這個快速鍵會有衝突的，IME屬性設定-IME管理-取消熱鍵切換至QQ拼音）

2. 粘貼以下代碼到底部命令列並斷行符號：
   import urllib2,os;pf=‘Package Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(‘ ‘,‘%20‘)).read())

3. 重啟Sublime Text 2。

4. 如果在Perferences->package settings中看到package control這一項，則安裝成功。

如果這種方法不能安裝成功，可以到這裡下載檔案手動安裝。

用Package Control安裝外掛程式的方法：

1. 按下Ctrl+Shift+P調出命令選擇區

2. 輸入install 調出 Install Package 選項並斷行符號，然後在列表中選中要安裝的外掛程式。

（在綠色x64版本中，調用不出外掛程式列表。英文版就沒問題，不清楚什麼原因）

 

GBK Encoding Support

對應gb2312來說，Sublime Text 2 本生不支援的，我們可以通過外掛程式GBK to UTF8或GBK進行轉碼工作。

 

主要外掛程式Zen Coding：Zen Coding

不懂可以圍觀：《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》

輸入 div.wrapper>div.header+div.main+div.footer 按下Tab，立刻變成

或者按下ctrl+alt+enter，激發zencoding控制台，可看到整個動態過程。

Zen Coding代碼寫法：

1）使用Ctrl ＋ Alt ＋ Enter 呼出ZenCoding

2） div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 這樣短短的一句話產生：

<did id="content">

    <ul>

         <li><a href="javascript:void(0);">Links1</a></li>

         <li><a href="javascript:void(0);">Links2</a></li>

         <li><a href="javascript:void(0);">Links3</a></li>

    </ul>

</did>

PS:Zen Coding for Sublime Text 2外掛程式的開發人員已經停止了在Github上共用了，現在只有通過Package Control來安裝。

 

Sublime Text 中使用Zen Coding的一些技巧

1、縮寫擴充

    之前知道，通過Control ＋ Alt ＋ Enter可以在一個新行中輸入ZC的縮寫，來產生代碼。同時，如果我們在編輯中直接書寫了ZC縮寫，比如 div#content>p 當游標放置在p之後時，可以通過Tab鍵來擴充，ZC會從游標處開始向左側搜尋到第一個空白處，之間的代碼作為ZC縮寫，這樣不必每次開啟新行輸入，提高了效率，缺點就是不能夠即時預覽。

2、嵌套代碼

 

如所示，可以實現在已經寫好的代碼外面嵌套其他的代碼，實現方式是將游標放置到想要嵌套的標籤上，然後使用Control ＋ Alt ＋ Enter 呼出ZC的命令列，就可以了。

 

其實Zen Coding還提供了很多方便代碼編寫的操作，例如標籤匹配、返回上一個/下一個編輯點、更新img標籤、合并行等，但是因為在Sublime Text中沒有提供完整的支援，所以這些特性還無法使用。

 

其餘外掛程式：jQuery Package for sublime Text

如果你離不開jQuery的話，這個必備～～

Sublime Prefixr

Prefixr，CSS3 私人首碼自動補全外掛程式，顯然也很有用哇

JS Format

一個JS代碼格式化外掛程式。

Placeholders

故名思意，佔位用，包括一些佔位文字和HTML程式碼片段，實用。

Sublime Alignment

用於代碼格式的自動對齊。傳說最新版Sublime 已經整合。

Tag
一些有代碼潔癖的程式猿很適合這個外掛程式，HTML代碼格式化能使html代碼更加漂亮整潔。

使用的方法也很簡單，選中一段Html代碼後，按Ctrl+Alt+f即可

JsMinifier

該外掛程式基於Google Closure compiler，自動壓縮js檔案。

Sublime CodeIntel

代碼自動提示

Bracket Highlighter

類似於代碼匹配，可以匹配括弧，引號等符號內的範圍。

GBK to UTF8

將檔案編碼從GBK轉黃成UTF8，快速鍵Ctrl+Shift+C

 

主要快速鍵

Ctrl+L 選擇整行（按住-繼續選擇下行）

Ctrl+KK 從游標處刪除至行尾

Ctrl+Shift+K 刪除整行

Ctrl+Shift+D 複製游標所在整行，插入在該行之前

Ctrl+J 合并行（已選擇需要合并的多行時）

Ctrl+KU 改為大寫

Ctrl+KL 改為小寫

Ctrl+D 選詞 （按住-繼續選擇下個相同的字串）

Ctrl+M 游標移動至括弧內開始或結束的位置

Ctrl+Shift+M 選擇括弧內的內容（按住-繼續選擇父括弧）

Ctrl+/ 注釋整行（如已選擇內容，同“Ctrl+Shift+/”效果）

Ctrl+Shift+/ 注釋已選擇內容

Ctrl+Z 撤銷

Ctrl+Y 恢複撤銷

Ctrl+M 游標跳至對應的括弧

Alt+. 閉合當前標籤

Ctrl+Shift+A 選擇游標位置父標籤對兒

Ctrl+Shift+[ 摺疊代碼

Ctrl+Shift+] 展開代碼

Ctrl+KT 摺疊屬性

Ctrl+K0 展開所有

Ctrl+U 軟撤銷

Ctrl+T 詞互換

Tab 縮排 自動完成

Shift+Tab 去除縮排

Ctrl+Shift+↑ 與上行互換

Ctrl+Shift+↓ 與下行互換

Ctrl+K Backspace 從游標處刪除至行首

Ctrl+Enter 游標後插入行

Ctrl+Shift+Enter 游標前插入行

Ctrl+F2 設定書籤

F2 下一個書籤

Shift+F2 上一個書籤

Sublime Text 2+Zen Coding