Sublime安裝與設定， 前端網設+即時預覽9.11.2018

用過notpad+、 Dreamwaver，最後選擇Sublime.(什原因就不說了…

首先感謝前人的紀錄，但因時代變遷，爬文研究了一整個早上，總整理了以下，

流程：

Sublime安裝 ->快速自動帶入元素： emmet ->中文：convert to utf-8 ->即時預覽(需先save):buildSystem設定->css即時預覽(無需先save): emmet liveStyle

說明：

1.

Sublime安裝這部份就不說了，安裝就對了。

2.

快速鍵 :「 Ctrl + Shift + P 」, 

鍵入『package』, 

選擇"Package Control : Install Package"，

鍵入『ins』，

鍵入『emmet』，

選擇「 emmet 」。

視窗右下就可選擇程式格式，看你是要HTML、CSS... , 開始寫程式囉！按「Tab」可以幫你自動架構。例如 html:5 按一下tab就會有神奇的事情發生啦！

3.

快速鍵 :「 Ctrl + Shift + P 」, 

鍵入『package』, 

選擇"Package Control : Install Package"，

鍵入『ins』，

鍵入『convert to utf-8 』，

選擇「 convert to utf-8 」。

Preferences > Package Settings > ConvertToUTF8 > Settings-Default, 快速鍵 :「 Ctrl +A 」, 快速鍵 :「 Ctrl + C」

Preferences > Package Settings > ConvertToUTF8 > Settings-user, 快速鍵 :「 Ctrl + V」,然後把這行["Chinese Traditional (BIG5)", "BIG5"]剪到"encoding_list" : [之後 (繁體字就會優先囉，最後快速鍵 :「 Ctrl + S」完成。

4.

Tools>Build System >New Build System

請覆製貼上以下「 Ctrl + S」後隨你命名儲存，以後寫網頁save好後，按F7就可以預覽了:

{

    "cmd": ["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]

}

5.

emmet liveStyle安裝，它要你裝什就裝不多說。這邊說明的主要是操作，寫好的網頁用chrome打開按F12，右上有Enable LiveStyle外掛再開成(on)，Add stylesheet選擇你的css檔。

以上。enjoy your life:)