Sublime Text 3

安裝教學

STEP 1 依照作業系統規格下載 Sublime Text 3

http://www.sublimetext.com/3

STEP 2 安裝Sublime Text 3 應用程式

1. 雙擊下載下來的執行檔

2. 安裝執行中

3. 將安裝好的App放入Applications資料夾中

STEP 3 安裝第一個Plugin - Package control

https://sublime.wbond.net/

3-1. 到 View > 點選Show Console

3-2. 到以下網頁,選取複製指令碼

回到Sublime Text 3 的 Console 對畫框貼上指令碼後,按Enter鍵

3-3. 到 View > Hide Console 就可以把Console 對話框關掉

3-4. 到Sublime Text > Preferences 查看,

若看到Package Control就代表安裝成功了!

STEP 4 使用Package Control 安裝其他必裝套件

Emmet - 加速撰寫HTML和CSS的速度

Autoprefixer - 自動加入各種瀏覽器的CSS3前綴(-webkit- -moz- -ms- -o-)

看看大家都裝了什麼套件:

https://sublime.wbond.net/browse/popular

4-1. 開啓 Sublime Text > Preferences > Package Control 

或使用熱鍵:ctrl+shift+p (Win, Linux) | cmd+shift+p (OS X).

4-2. 輸入“Install Package”以尋找安裝套件指令,找到“Package Control: Install Package“後對其單擊滑鼠左鍵

4-3. 輸入套件名稱以尋找套件,找到後對其單擊滑鼠左鍵

(以emmet為例)

4-4. 套件安裝完成畫面 (以Emmet為例)

重複步驟4-1~4-3 安裝完其他套件

補充: 套件 - Autoprefixer

使用方法:Command + Shift + P 後 輸入 "Autoprefix CSS" > 按下Enter

安裝AutoPrefixer之前要先安裝 “Node.js” (點兩下安裝)

補充: 套件 - Autoprefixer

使用問題:執行Autoprefixer後只出現-webkit-的prefixer

解決方法:到Preferences -> Package Settings -> Autoprefixer -> Settings - User
貼上以下的程式碼後儲存:

{
    "browsers": ["last 2 versions", "> 10%", "ff > 4", "opera > 9"]
}

重新開啟Sublime Text 3,再執行Autoprefixer一次

It's work!!!!

把錢,花在刀口

本教材為叨Daoo編寫之課程教材

版權所有・翻印必究

Sublime Text 3 安裝教學(+AutoPrefix教學)

By estellewang

Sublime Text 3 安裝教學(+AutoPrefix教學)

  • 1,650