Sublime Text 常用外掛程式

標籤：

前提：要先安裝package control。

如何安裝外掛程式：Ctrl + Shift + P, 輸入Package Control：Install package，稍等片刻出現選擇框，輸入自己要安裝的外掛程式（自動搜尋），斷行符號，稍等，重啟，Enjoy it！

如何查看外掛程式：Preference -> package setting -> package control -> setting-user;

如何卸載外掛程式：Ctrl + Shift + P, 輸入Package Control：Remove package，稍等片刻出現已經安裝的package，選擇，斷行符號，over！

介紹兩個常用外掛程式：Emmet、Autoprefixer;

一、Emmet

前端必背，原來叫Zen Coding，

1. 跳過Div

第一個小技巧就是跳過div，Emment非常清楚你需要輸入什麼內容，你只需要輸入class或者是id，Emmet會自動協助你產生正確的div。如下：

大家可以看到，不管你是否添加了div，Emmet都會自動產生需要div元素。

含糊標籤名稱

這個技巧屬於implicit tag names特性，你不需要指定div或者li，Emmet會自動協助你產生，如下：

2. 帶有DOM導航的鏈式縮寫

如果你使用Emmet來擴充簡單的class名稱產生div的話。這個方式可以協助你省去大量的時間。你只需要記住如下文法：

> 子節點：在DOM樹下一層添加建立一個元素

+ 同層級：在DOM樹同一層添加建立一個元素

^ 向上層：向上一層添加建立建立一個元素。

向上一層

如果需要的話你可以向上多層，如下：

3. 使用分組來簡化你的代碼結構

有的時候你可能會發現使用向上符號比較複雜，這時候可能使用分組更加的合理。如下：

一個更複雜一些的例子，如下：

4. 插入文本和屬性

如果你需要產生HTML，內容和屬性也是你常常需要添加的。很多開發人員只是使用Emmet來產生架構，然後再新增內容。其實你可以在產生頁面架構的過程中同時添加屬性和內容。

從下面代碼可以看到，你輸入的文字和屬性都可以分別通過大括弧和中括弧來產生。

5. 添加多個class到一個元素

這個非常簡單，你只需要使用逗號來添加多個class，如下：

6. 重複添加

這可能是最讓人舒服的操作了，協助你重複添加元素：

如果你整合分組功能，那麼你將能夠處理更複雜的HTML產生：

7. 自動列表記數

如果你需要按順序產生HTML元素，這個技巧你一定喜歡，使用$符號可以協助你產生一系列數字，支援class，id，屬性，內容等等。如下：

注意如果你需要產生2位的數字，使用兩個$符號即可。

二、Autoprefixer

不相容的CSS3標籤名首碼有時候真讓人頭疼，不過不用擔心:

Sublime Text 常用外掛程式