本文是安裝的Sublime Text3是portable version(可移動(dòng)版本) ,安裝的環(huán)境是基于window 7 或者window 8.1。主要介紹sublime text3 的安裝,漢化,常用插件的安裝和使用!
一、下載安裝sublime Text3
到官網(wǎng)http://www.sublimetext.com/3下載安裝包(根據(jù)你的電腦系統(tǒng)下載對(duì)應(yīng)的portable version),下載好st3后,然后不斷的點(diǎn)擊next,然后blablabla……就可以安裝好了(我的系統(tǒng)的window8.1 64位,安裝的目錄D盤)
二、漢化sbulime Text3
安裝完sublime text3 后,發(fā)現(xiàn)都是英文,四級(jí)沒過的同學(xué)怎么辦,當(dāng)然是漢化!
2.1下載漢化安裝包
地址:http://pan.baidu.com/s/1qWnBNvI
2.2安裝漢化包(將漢化包拷到 Installed Packages 文件夾中)
進(jìn)入:D:\Sublime Text3\Data\Installed Packages(根據(jù)你的安裝目錄去尋找Installed Packages,本文是安裝在D盤),將剛剛下載的漢化包解壓,得到的文件Default.sublime-package 拷貝到 Installed Packages 文件夾中,這個(gè)時(shí)候就會(huì)發(fā)現(xiàn)漢化成功啦!
三、安裝Package Control
Package Control非常重要,因?yàn)檫@關(guān)系到后面的st3 安裝包的使用,而Package Control 的安裝有兩種方法:
3.1通過控制面板安裝
①點(diǎn)擊工具欄的“查看”->”顯示面板”(快捷鍵 是”ctrl+`”),

②到https://packagecontrol.io/installation官網(wǎng),將對(duì)應(yīng)的代碼拷貝到顯示面板中,然后回車。如果安裝成功,那么就顯示Package Settings 和Package Control 這兩個(gè)項(xiàng),

如果沒有安裝成功,那么建議用手動(dòng)安裝
3.2通過手動(dòng)安裝
①到https://packagecontrol.io/installation官網(wǎng),右邊有一個(gè)“Package Control.sublime-package”,點(diǎn)擊下載,然后將文件拷貝到 Installed Packages文件夾中
四、安裝st3常用的插件
對(duì)于st3,它之所以輕巧,是因?yàn)樗O(shè)計(jì)就是為了讓你按需加載,根據(jù)自己的需要,去下載對(duì)應(yīng)的插件,所以才不會(huì)像其他的IDE那樣笨重。安裝插件步驟是:“Preferences -> Package Control”(快捷鍵是:shift+ctrl+p),然后執(zhí)行“Package Control: Install Package”,接在就是輸入你要安裝的插件就可以,下面就說一下你個(gè)人常用的插件:
1、Emmet
作用:快速編寫HTML,CSS代碼
示例:html:5+tab,div#box+tab

2、SublimeCodeIntel
作用:代碼提示插件,可以幫你補(bǔ)全代碼,快速方便書寫!大大提升效率!
示例:

3、jQuery
作用:在使用jQuery的時(shí)候,給出對(duì)應(yīng)的方法和API的提示!
示例:

4、Alignment
作用:該插件是用來對(duì)齊的,當(dāng)你在寫js的時(shí)候,為了代碼的美觀,就需要用到這個(gè)插件!
快捷鍵:默認(rèn)的是:ctrl+alt+a(與qq截圖剛好沖突,建議修改)
示例:

5、DocBlocker
作用:快熟書寫注釋!
示例:

6、Jsformat
作用:js壓縮文件的還原,但是遺憾的是變量名稱是
快捷鍵:默認(rèn)的是:ctrl+alt+f
示例:

7、Bracket Highlighter
作用:當(dāng)你鼠標(biāo)選中標(biāo)簽或者是某個(gè)片段代碼的時(shí)候,對(duì)應(yīng)的開頭和閉合標(biāo)簽會(huì)高亮!
示例:

8、sublimeLinter
作用:提供js和css的語法檢測(cè)!檢測(cè)的標(biāo)準(zhǔn)是可以根據(jù)用戶自定義的方式來執(zhí)行!
9、View in Browser
作用:在瀏覽器中可以像dreamweaver 那樣按下F12的時(shí)候在瀏覽器中瀏覽。
10、AutoFileName
作用:可以在你輸入引用文件路徑時(shí)給出提示,最典型的就是圖片的引用
示例:

px自動(dòng)換換rem
preferences====>package control? ? ==> install package


package setting ==>修改配置項(xiàng)? settings-user
{
? ? "fontsize": 80,//需要修改的配置項(xiàng)
? ? "precision": 8,
? ? "leadingzero": false,
? ? "exts": [".css", ".scss", ".less", ".sass", ".styl"]
}