介紹幾款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>
是不是很快速?再比如輸入ul>li*5然後ctrl+e生成還有很多語法,請參照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);
}