2015年7月3日 星期五

[Sublime Text 3 Package] HTML-CSS-JS Prettify

HTML-CSS-JS Prettify套件是用來格式化html文件的工具
一樣按下Ctrl + Shift + P透過Pageage Control來安裝套件

找到HTML-CSS-JS PRettify套件按下Enter即可

套件需要透過Node來格式化文件,所以需要確定Node執行檔的路徑

確定node.exe執行檔的路徑即可

準備一份html文件,按下Ctrl + Shift + H快速鍵

即可完成格式化

[Sublime Text 3 Package] Emmet

Emmet套件是用來快速產生HTML和CSS tag的工具,語法如下

> 子層元素
+ 同層元素
^ 上層元素
# id
. class
[] 屬性
{} 文字內容
() 群組
* 重覆數量,後面接數字可以指定要重覆多少個數的元素
$ 排序數字,多個$符號會產生多位數的排序數字,前面補零
lorem 亂數文字,後面接數字可以指定幾個字的文字,不接數字的話則是一整個句子

按下Ctrl + Shift + P 叫出命令視窗,輸入Instal Package,選擇安裝套件

輸入emmet按下enter即可安裝

安裝完成

開一個新檔案來試試,輸入html:5>div#header+div#content+div#footer後,按下tab鍵

就會自動展開成html元素

[Sublime Text 3 Package] ConvertToUTF8

Sublime Text 3 預設不支援中文編碼,所以需要安裝ConvertToUTF8套件來解決這個問題
按下Ctrl + Shift + P叫出命令視窗,輸入Install Package,選擇Package Control: Install Package

在命令列中輸入UTF8,選擇ConvertToUTF8套件

左下角會顯示正在安裝套件

安裝完成後打開套件預設設定值

將預設設定值複制後打開套件個人設定值

調整BIG5編碼順序放到GBK前面後存檔

透過File>Set File Encoding to選單可以調整檔案編碼



Sublime Text 3 個人設定檔

預設的設定值在Preferences>Settings-Default

打開後會有所有設定的說明和設定值,這個檔案是唯讀的JSON檔案
如果要變更設定,需要打開Preferences>Settings-User

在這個檔案中把預設的設定值覆蓋即可


{
    "font_size": 16,
    "translate_tabs_to_spaces": true,
    "word_wrap": false,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "show_encoding": true,
    "show_line_endings": true,
}