Sublime Text 2中前端必備的常用插件

Sublime Text 2安裝的插件和所有預置的插件全部在Packages文件下，可以直接通過”preferences“—>”Browse Pakcages“來訪問。

　　Sublime Text 2安裝插件有兩種方法：
　　1）離線安裝，先下載好安裝包，解壓之后放到Packages文件夾下，重啟Sublime即可。
          離線安裝包下載地址：http://sublime.wbond.net/Package%20Control.sublime-package

　　2）在線安裝，在線安裝之前，需要安裝”Packages Control“這個包管理插件，安裝方法是：
　　　 選擇”查看“—>”顯示控制台“，然后在下面彈出的框中輸入：

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

然后回車確認，安裝完畢之后重啟sublime，如果發現在Perferences中看到package control這一項，則安裝成功。

然后我們按住 ctrl+shift+p。此時會輸出一個輸入框， 輸入install。 
選擇package contrl： install package 回車 ，需要稍定一會兒，右下角狀態欄會顯示正在連接的提示文字。
使用sublime時注意看右下角狀態欄，很多插件的提示信息都顯示在這里，這個狀態欄很小，初次使用的人都有可能沒有注意到它。  

稍等一會兒后，它會出現一個插件列表， 你也可以在輸入框中輸入文字進行搜索插件。 搜索到自己想安裝的插件，再選擇它，回車。 就自動給你安裝好了。

如果要卸載插件， ctrl+shift+p 輸入 remove， 選擇package control:remove package 然后再選擇已安裝的插件， 回車即可卸載。

 

當然也可以這樣：Preferences--> package control  選擇安裝和移除插件

點擊Install Package之后，稍等一會，就出先搜索安裝的列表

 

下面正式推薦幾款必備的常用插件：

1.SublimeTmpl插件

　　這個插件允許用戶定義文件的模板，比如在寫一個html文件時，老是重復文件頭的一些引入信息很繁瑣，可以定義一個模板直接生成必須的信息，具體的SublimeTmpl插件用法請自行百度。

 

2.Emmet(Zen Coding)

大名鼎鼎的Zen Coding改名作Emmet啦，Zen Coding的Sublime Text 2插件也不再更新，現在整個項目搬到了Emmet了。僅僅需要一行代碼就能快速生成html代碼。

完整語法請參考：http://docs.emmet.io/cheat-sheet/

ul#nav>li.item$*4>a{Item $}

 

你只需要按下control + E，代碼就會自動展開成：

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

 

 

3.Sublime CodeIntel

Sublime CodeIntel是我最喜歡的插件，它提供了很多IDE提供的功能，例如代碼自動補齊，快速跳轉到變量定義，在狀態欄顯示函數快捷信息等。
它支持的語言有：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.
雖然有時候有點小問題，但真的能節省很多時間。強烈推薦安裝。

4.Prefixr

由於CSS3和HTML5的W3C規范都尚未統一，各大瀏覽器對標准的支持還是有差異的。所以在編寫CSS3代碼還需要針對不同的瀏覽器寫一堆的CSS3代碼前綴。Prefixr插件能將CSS3代碼自動生成跨瀏覽器CSS代碼。

使用方法：

.box {
   border-radius: 10px;
   box-shadow: 0 0 5px rgba(0,0,0,.4);
}

按下ctrl + Alt + X（Windows）或者control + command + X（Mac） ，會轉換成：

.box {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
 
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
   -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);
   box-shadow: 0 0 5px rgba(0,0,0,.4);
}

 

5.為了避免打開含中文字符的文件出現亂碼，需要先安裝GBK Encoding Support這個插件，再安裝ConvertToUTF8插件即可。

6.AndyJS2插件：一款針對Javsscript和jquery智能提示的插件。

7.jquery插件：jquery提示庫。

 

其他還有很多插件或者配置，就不一一列舉了，希望大家共同探討...

插件介紹地址：https://sublime.wbond.net/