介紹幾款Sublime Text的常用外掛及用法（前端）
我上一篇介紹了Sublime Text外掛的安裝方法，今天想介紹我在用的幾款外掛，當然Sublime的外掛是非常非常多的，我介紹的肯定不會那麼多，因為今天我主要是介紹我用的外掛的使用方法，有的安裝上就可以用，有的需要一點小小的配置，還是超簡單的啦。
我也不貼每個外掛的下載連結地址了，因為照我上篇講的方法1是完全不需要我們去下載這些外掛的。
（1）Emmet
Emmet是快速編寫 HTML/CSS 程式碼，據說它的前身是Zen Coding（不好意思沒有用過）。快捷鍵ctrl+shift+p調出視窗輸入install package回車後等待它彈出視窗然後搜尋Emmet安裝就可以了。Emmet的使用教程比較多，語法也比較多，很難記，對我來說我只是記住一些基礎的，太複雜的感覺就是雖然你快速但是我腦容量不夠啊。如何生成呢？Ctrl+e
比如輸入“！”然後ctrl+e就會生成
<span style="font-size:18px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html></span>還有很多語法，請參照http://docs.emmet.io/cheat-sheet/<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
（2）LESS
稍微普及一下LESS,一種動態樣式語言，LESS 將 CSS 賦予了動態語言的特性，如變數， 繼承， 運算， 函式. LESS 既可以在 客戶端 上執行 (支援IE 6+, Webkit, Firefox)，也可以藉助Node.js或者Rhino在服務端執行。（摘自一個神奇網站）然後其實很多人在說Sass，我只覺得它們兩個一毛一樣毫無差別，唯一的差別就是名字不一樣。想學習less的人可以去http://www.bootcss.com/p/lesscss/學習。
用過less的人應該知道，sublime是不支援對less格式的程式碼高亮顯示的，不高亮顯示程式碼是件很不好的事情，滿眼過去一片黑白，所以只要你安裝了這個外掛，寫less程式碼就不再是問題，據說sublime還有一個外掛是將less程式碼編譯成css程式碼的，不過我沒有用，因為我用的是koala，關於這個軟體。。。擴充套件太多再講下去天都黑了，有興趣的人可以留言哦。
（3）ColorPicker
一看名字就知道這是個跟顏色有關的外掛，也確實是這樣的，安裝好以後使用快捷鍵ctrl+shift+c就可以調出調色盤選取顏色了。
（4）SublimeCodeIntel
這個是程式碼提示外掛，它支援的語種還是很多的，反正我感覺安裝上以後提示功能比以前豐富了，還挺好用的。
（5）Autoprefixer
這個外掛就是用來專門解決瀏覽器字首的問題的，曾經我寫CSS3的時候，某些1行程式碼得寫5行，其實我是拒絕的，不過現在關於字首問題已經沒有以前那麼嚴重了，這些主流瀏覽器都在趨於一個統一。對了，安裝這個外掛前必須要安裝node.js，然後其實用它有一點複雜，畢竟它很智慧，安裝好以後，使用它就有兩個方法了。
方法1：設定快捷鍵在preferences-->key Bandings--user裡新增一句：
<span style="font-size:18px;">{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
</span>方法2：Gulp中配置Autoprefixer
說實話這個方法很麻煩，但是作為一個有為青年，I CAN I UP，所以我還是試了一下。
首先我要假設大家已經配置好了gulp的執行環境，然後我們要安裝autoprefixer
輸入命令 npm intall gulp-autoprefixer --save-dev
然後我們要去配置它的gulpfile.js檔案，
<span style="font-size:18px;"><span style="font-family:Microsoft YaHei;">var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
gulp.task('<span style="font-family:Microsoft YaHei;">autoprefix</span>', function() {
gulp.src(['./src/<span style="font-family:Microsoft YaHei;">css</span>/*.css'])
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('./build/<span style="font-family:Microsoft YaHei;">css</span>'));
});
</span></span>然後我們在src/css目錄下建立一個檔案example.css
<span style="font-family:Microsoft YaHei;">div</span>{
transform: translateY(20px) rotate(45deg);
}然後在終端輸入命令gulp autoprefix等待成功後，去build/css目錄下檢視生成的檔案：
<span style="font-family:Microsoft YaHei;">div</span>{
-webkit-transform: translateY(20px) rotate(45deg);
transform: translateY(20px) rotate(45deg);
}