一、 前言

       使用Sublime Text 也有幾個年頭了，版本也從2升級到3了，但猶如寒天飲冰水，冷暖儘自知。最初也是不知道從何下手，滿世界地查詢資料，但能查閱到的資料，苦於它們的零碎、片面，不夠系統和全面，所以一路走來，耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》，一來對自己的經驗是一個總結，二來可以給初學者做個系統、全面的指引，讓他們少走我當時走過的彎路，從而能快速地掌握Sublime Text這個優秀的編輯器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已經相當穩定。所以本文所有講解均以此版本為準，並以windows 7 x64平臺為示例。至於其它的版本也不會有太大的差異。

二、 Sublime Text 特點

      1、Sublime Text 是一款跨平臺程式碼編輯器，在Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可擴充套件的，幷包含大量實用外掛，我們可以通過安裝自己領域的外掛來成倍提高工作效率。

      3、Sublime Text 分別是命令列環境和圖形介面環境下的最佳選擇，同時使用兩者會大大提高工作效率。

      4、Sublime Text 為收費軟體，建議有能力的人付費使用，以支援開發者。不過不購買也可以一直使用。

三、下載與安裝

      1、下載：目前官方的正式版本為v2.0.2，我們開啟官網下載連結

http://www.sublimetext.com/3，下載Sublime Text 3 Build 3083。

      其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程式；“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包，解壓後無需安裝就能執行。

      如果你的電腦平臺是windows x86,也就是32位的系統，請點選“Windows”下載32位的安裝程式，如果不想安裝，就點選其後的“portable version

”下載它的32位編輯器包。

      2、安裝：雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”，記得選擇“Add to explorer context menu”，把它加入右鍵快捷選單。其它以預設設定安裝。

      3、安裝完畢，雙擊桌面“Sublime Text 3”快捷圖示，開啟程式，就可以見到“Sublime Tex的廬山真面目了。

      4、如果你不是把“Sublime Text 3”安裝在預設路徑，比如你把它安裝在D盤，請你新增環境變數。

四、設定字型及字型大小

      點選單“Preferences--->Setting - User”，開啟“Preferences.sublime-settings”。

      如下圖新增所需程式碼，根據自己的喜好進行設定。設定字型用"font_face":"字型名稱"，設定字型大小用"font_size":"字型大小"，注意它們之間需要用逗號隔開。

五、安裝外掛

       學習Sublime Text擴充套件外掛的安裝前，讓我們來先了解一下它的外掛官方網站：https://packagecontrol.io/。

     當我們在搜尋框中輸入外掛的關鍵字，相關的外掛就會在下面實時顯示出來，我們就可以選擇自己想要的外掛進行了解。

1、安裝Package Control

      Package Control為外掛管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和解除安裝Sublime Text中的外掛。

      開啟Package Control的網頁https://packagecontrol.io/，點選右側的“Install Now”按鈕。

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

      雙擊桌面“Sublime Text 3”開啟程式，快捷鍵 Ctrl + ` 開啟Sublime Text控制檯，將之前複製的程式碼貼上到控制檯裡，按下“Eenter”鍵。

      等待其安裝完成後關閉程式，重新啟動“Sublime Text 3”，點開選單“Preferences”可見“Package Control”項，說明外掛管理包已安裝成功。

2、ConvertToUTF8 外掛安裝

      a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼檔案在 Sublime Text 中轉換成UTF8編碼，在開啟檔案的時候一開始會顯示亂碼，然後一剎那就自動顯示出正常的字型，當然，在儲存檔案之後原檔案的編碼格式不會改變。

      b)安裝方法一：快捷鍵 Ctrl+Shift+p ，開啟 “Command Palette” 懸浮對話方塊，在頂部輸入 “install”, 然後下選點選 “Package Control:Install Package”。

      在出現的懸浮對話方塊中輸入 “convert”, 然後點選下面的 “ConvertToUTF8” 外掛，就會自動開始安裝，請耐心等待。

       當外掛安裝成功後，Sublime Text 3 編輯器底端的狀態列會有安裝成功的提示。

 

      c)安裝方法二：你還可以下載完整的外掛包後解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝外掛的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。

　　如何找到 Packages 目錄？一個快捷的方法是：雙擊開啟你的 “Sublime Text 3”，點選單 “Preferences--->Browse Packages...”。

      它會直接開啟外掛包存放的目錄 “Packages”。然後你就可以把下載後解壓好的外掛包複製到這個 Packages 目錄下。

      當然，如果你熟悉 git，你還可以用 git 從外掛的 GitHub 庫直接克隆外掛包到 Packages 目錄下。

      備註： 以後所有外掛都可以通過以上介紹的兩種方法安裝，將不再贅述，推薦方法一，使用“ Package Control”安裝外掛。

3、BracketHighlighter 外掛

      功能說明：高亮顯示匹配的括號、引號和標籤。

      安裝方法：

     1、Ctrl+Shift+P面板，安裝外掛BracketHighlighter

     2、按preferences–>package settings–>Bracket highlighter–>把Bracket settings-Default內容複製到Bracket settings-User後，Ctrl+F 查詢到“bracket_styles”，把{}中遮蔽的//都去掉，在這裡解釋一下，color表示的設定選中部分的顏色，把該值改為以brackethighlighter開頭，style則全部改成hightlight，注意，"icon":“”後面的逗號一定加上！

4、LESS 外掛

      功能說明：LESS語法高亮顯示。

5、sublime-less2css 外掛

      功能說明：將less檔案編譯成css檔案。

6、Emmet 外掛

      功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS程式碼快速編寫神器。

      使用方法：預設快捷鍵 Tab

      注意：Emmet 外掛需要 PyV8 外掛的支援，所以在安裝 Emmet 時，會自動安裝 PyV8 外掛，如果安裝後 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然後手動下載，採用方法二安裝 PyV8 外掛。

      使用方法示例：書寫程式碼 ul#nav>li.item$*8>a{Item $}

      然後把游標定在這行程式碼的最後面，按 Tab 鍵，就會自動生成：

      <ul id="nav">

              <li class="item1"><a href="">Item 1</a></li>

             <li class="item2"><a href="">Item 2</a></li>

             <li class="item3"><a href="">Item 3</a></li>

             <li class="item4"><a href="">Item 4</a></li>

             <li class="item5"><a href="">Item 5</a></li>

             <li class="item6"><a href="">Item 6</a></li>

             <li class="item7"><a href="">Item 7</a></li>

             <li class="item8"><a href="">Item 8</a></li>

    </ul>

 

7、JsFormat 外掛

      功能說明：JavaScript程式碼格式化。

      使用方法：在開啟的JavaScript檔案裡點右鍵，選擇JsFormat。

8、ColorHighlighter 外掛

      功能說明：顯示所選顏色值的顏色，並集成了ColorPicker

      在16進位制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。

      看看效果，顏色值和顯示顏色都相應做了改變。

9、Compact Expand CSS Command 外掛

      功能說明：使CSS屬性展開及收縮，格式化CSS程式碼。

      使用方法：按 Ctrl+Alt+[ 收縮CSS程式碼為一行顯示，按 Ctrl+Alt+] 展開CSS程式碼為多行顯示。

      快捷鍵 Ctrl+Alt+[ 收縮CSS程式碼為效果： 

      快捷鍵 Ctrl+Alt+] 展開CSS程式碼為多行顯示效果：

10、SublimeTmpl 外掛

      功能說明：快速生成檔案模板。

      使用方法：SublimeTmpl預設的快捷鍵如下，如果快捷鍵設定衝突可能無效。

                    Ctrl+Alt+h              新建 html 檔案

                    Ctrl+Alt+j               新建 javascript 檔案

                    Ctrl+Alt+c               新建 css 檔案

                    Ctrl+Alt+p              新建 php 檔案

                    Ctrl+Alt+r               新建 ruby 檔案

                    Ctrl+Alt+Shift+p     新建 python 檔案

      下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 檔案。

      相應的模板為tmpl格式的檔案，它們儲存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

      當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式後儲存。

      現在按快捷鍵 Ctrl+Alt+H，新建一個 html 檔案，其格式就和更改後模板格式完全一樣了。如下圖：

11、Alignment 外掛

      功能說明：使程式碼格式的自動對齊。

      使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖衝突，二者中的一個要重置快捷鍵。

12、AutoFileName 外掛

      功能說明：自動補全檔案(目錄)名。

      安裝好後就可以來測試如何使用AutoFileName，先以<link>css檔案來示範，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。

      a)以這個檔案為範本它會去抓取跟abc.html在同一層的檔案列表。

      像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推

      b)像是<img src=””>的部分也是一樣的方式，沒什麼困難了，弄懂一下路徑就好了。

     c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。

13、DocBlockr 外掛

      功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函式註釋。

      使用方法：在函式上面輸入/** ,然後按 Tab 就會自動生成註釋。

在函式上面輸入/** ,然後按Tab 就會自動生成註釋。

14、SublimeCodeIntel 外掛

      功能說明：智慧提示。

15、HTML-CSS-JS Prettify 外掛

      功能說明：HTML、CSS、JS格式化。

      安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

      使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然後按下Enter。

      使用方法二：預設快捷鍵：Ctrl+Shift+H。

                       你也可以自行設定快捷鍵，選單 “Preferences---> Key Bindings – User” 裡新增：

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

       完成後儲存，以上程式碼設定執行此外掛的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵衝突。

      格式化前：

      格式化後：

16、SideBarEnhancements 外掛

      功能說明：側欄選單擴充功能。

17、View In Browser 外掛

      功能說明：Sublime Text儲存後網頁自動同步更新。

      使用方法：在開啟的文件任一處點右鍵，選擇“View In Browser”，就會用預設的瀏覽器自動開啟該檔案。

      如果你電腦裝有多個瀏覽器，你想換其它的作為此操作的預設瀏覽器，你可以按以下方法設定：

      開啟“View In Browser.sublime-settings”，寫入以下程式碼：

{
    "browser": "chrome64"
}

      這樣你就把它預設設定為“Chrome”瀏覽器了，當然你還可以改成“Firefox”、“Safari”等等，前提是你的電腦事先已安裝好了這些瀏覽器。

18、LiveReload 外掛

      功能說明：除錯網頁實時自動更新。

      使用說明：快捷鍵 Ctr+Alt+V

      同時Chrome瀏覽器也要安裝LiveReload 的擴充套件外掛。

19、TortoiseSVN 外掛(win下需要安裝有TortoiseSVN客戶端支援)

      功能說明：版本控制工具。

20、Theme-Soda 外掛

      功能說明：最受歡迎的 Sublime Text 主題之一。

      安裝完成後，點選單 Preferences--->Settings - User，根據需要的主題效果，新增如下程式碼。

      Soda 亮色主題請新增：

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

     

      Soda 暗色主題請新增：

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

 

      要達到圖中的效果，你還需要下載與之搭配的 color scheme。下載地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強，再配合 Markdown Extended ，將大大改善 Markdown 的語法高亮。

      如果加程式碼 "soda_classic_tabs":true，檔案標籤頁形狀會如下顯示：

      如果不新增此行程式碼，檔案標籤頁形狀會如下顯示：

21、Theme-Flatland 外掛

      功能說明：最受歡迎的 Sublime Text 主題之一。

22、Theme-Nexus 外掛

      功能說明：最受歡迎的 Sublime Text 主題之一。

 

六、外掛列表

快捷鍵 Ctrl+Shift+P，在對話方塊中輸入“list”，選擇“Package Control:List Packages”。

      會列出所有已安裝的外掛。這樣可以很方便地瞭解自己已經安裝了哪些外掛。

七、移除外掛

      有時候我們需要移除自己不想要的外掛，具體操作如下：快捷鍵 Ctrl+Shift+P，在對話方塊中輸入“remove”，選擇“Package Control: Remove Packages”。

      然後在出現的外掛列表中點選你要移除的外掛。

八、Sublime Text 的視窗操作

1、分屏

      Sublime Text有多種分屏形式，讓我來具體地看一看。選單 “View-àLayout”就可以選擇你的分屏樣式。

      對應的快捷鍵與分屏情況如下：

      Alt+Shift+1       Single             獨屏

      Alt+Shift+2       Columns:2      縱向二欄分屏

      Alt+Shift+3       Columns:3      縱向三欄分屏

      Alt+Shift+4       Columns:4      縱向四欄分屏

      Alt+Shift+8       Rows:2          橫向二欄分屏

      Alt+Shift+9       Rows:3          橫向三欄分屏

      Alt+Shift+5       Grid              四格式分屏

2、建立新窗

      快捷鍵Ctrl+Shift+N 建立一個新視窗。

九、使用技巧薈萃

 （未完待續。。。。。。）

十、Sublime Text 快捷鍵列表

      快捷鍵按型別分列如下：

1、通用

      ↑↓← →    上下左右移動游標

      Alt    調出選單

      Ctrl + Shift + P    調出命令板（Command Palette）

      Ctrl + `    調出控制檯

2、編輯

      Ctrl + Enter    在當前行下面新增一行然後跳至該行

      Ctrl + Shift + Enter    在當前行上面增加一行並跳至該行

      Ctrl + ←/→    進行逐詞移動

      Ctrl + Shift + ←/→    進行逐詞選擇

      Ctrl + ↑/↓    移動當前顯示區域

      Ctrl + Shift + ↑/↓    移動當前行

3、選擇

      Ctrl + D    選擇當前游標所在的詞並高亮該詞所有出現的位置，再次 Ctrl + D 選擇該詞出現的下一個位置，在多重選詞的過程中，使用 Ctrl + K 進行跳過，使用 Ctrl + U 進行回退，使用 Esc 退出多重編輯

      Ctrl + Shift + L    將當前選中區域打散

      Ctrl + J    把當前選中區域合併為一行

      Ctrl + M    在起始括號和結尾括號間切換

      Ctrl + Shift + M    快速選擇括號間的內容

      Ctrl + Shift + J    快速選擇同縮排的內容

     Ctrl + Shift + Space    快速選擇當前作用域（Scope）的內容

4、查詢&替換

      F3    跳至當前關鍵字下一個位置

      Shift + F3    跳到當前關鍵字上一個位置

      Alt + F3    選中當前關鍵字出現的所有位置

      Ctrl + F/H    進行標準查詢/替換，之後：

      Alt + C    切換大小寫敏感（Case-sensitive）模式

      Alt + W    切換整字匹配（Whole matching）模式

      Alt + R    切換正則匹配（Regex matching）模式

      Ctrl + Shift + H    替換當前關鍵字

      Ctrl + Alt + Enter    替換所有關鍵字匹配

      Ctrl + Shift + F    多檔案搜尋&替換

5、跳Version:1.0 StartHTML:000000208 EndHTML:000057221 StartFragment:000001888 EndFragment:000057135 StartSelection:000001888 EndSelection:000057131 SourceURL:http://www.cnblogs.com/wind128/p/4409422.htmlSublime Text 3 全程詳細圖文原創教程（持續更新中。。。） - Wind128 - 部落格園

一、 前言

       使用Sublime Text 也有幾個年頭了，版本也從2升級到3了，但猶如寒天飲冰水，冷暖儘自知。最初也是不知道從何下手，滿世界地查詢資料，但能查閱到的資料，苦於它們的零碎、片面，不夠系統和全面，所以一路走來，耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》，一來對自己的經驗是一個總結，二來可以給初學者做個系統、全面的指引，讓他們少走我當時走過的彎路，從而能快速地掌握Sublime Text這個優秀的編輯器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已經相當穩定。所以本文所有講解均以此版本為準，並以windows 7 x64平臺為示例。至於其它的版本也不會有太大的差異。

二、 Sublime Text 特點

      1、Sublime Text 是一款跨平臺程式碼編輯器，在Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可擴充套件的，幷包含大量實用外掛，我們可以通過安裝自己領域的外掛來成倍提高工作效率。

      3、Sublime Text 分別是命令列環境和圖形介面環境下的最佳選擇，同時使用兩者會大大提高工作效率。

      4、Sublime Text 為收費軟體，建議有能力的人付費使用，以支援開發者。不過不購買也可以一直使用。

三、下載與安裝

      1、下載：目前官方的正式版本為v2.0.2，我們開啟官網下載連結http://www.sublimetext.com/3，下載Sublime Text 3 Build 3083。

      其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程式；“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包，解壓後無需安裝就能執行。

      如果你的電腦平臺是windows x86,也就是32位的系統，請點選“Windows”下載32位的安裝程式，如果不想安裝，就點選其後的“portable version”下載它的32位編輯器包。

      2、安裝：雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”，記得選擇“Add to explorer context menu”，把它加入右鍵快捷選單。其它以預設設定安裝。

      3、安裝完畢，雙擊桌面“Sublime Text 3”快捷圖示，開啟程式，就可以見到“Sublime Tex的廬山真面目了。

      4、如果你不是把“Sublime Text 3”安裝在預設路徑，比如你把它安裝在D盤，請你新增環境變數。

四、設定字型及字型大小

      點選單“Preferences--->Setting - User”，開啟“Preferences.sublime-settings”。

      如下圖新增所需程式碼，根據自己的喜好進行設定。設定字型用"font_face":"字型名稱"，設定字型大小用"font_size":"字型大小"，注意它們之間需要用逗號隔開。

五、安裝外掛

       學習Sublime Text擴充套件外掛的安裝前，讓我們來先了解一下它的外掛官方網站：https://packagecontrol.io/。

     當我們在搜尋框中輸入外掛的關鍵字，相關的外掛就會在下面實時顯示出來，我們就可以選擇自己想要的外掛進行了解。

1、安裝Package Control

      Package Control為外掛管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和解除安裝Sublime Text中的外掛。

      開啟Package Control的網頁https://packagecontrol.io/，點選右側的“Install Now”按鈕。

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

      雙擊桌面“Sublime Text 3”開啟程式，快捷鍵 Ctrl + ` 開啟Sublime Text控制檯，將之前複製的程式碼貼上到控制檯裡，按下“Eenter”鍵。

      等待其安裝完成後關閉程式，重新啟動“Sublime Text 3”，點開選單“Preferences”可見“Package Control”項，說明外掛管理包已安裝成功。

2、ConvertToUTF8 外掛安裝

      a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼檔案在 Sublime Text 中轉換成UTF8編碼，在開啟檔案的時候一開始會顯示亂碼，然後一剎那就自動顯示出正常的字型，當然，在儲存檔案之後原檔案的編碼格式不會改變。

      b)安裝方法一：快捷鍵 Ctrl+Shift+p ，開啟 “Command Palette” 懸浮對話方塊，在頂部輸入 “install”, 然後下選點選 “Package Control:Install Package”。

      在出現的懸浮對話方塊中輸入 “convert”, 然後點選下面的 “ConvertToUTF8” 外掛，就會自動開始安裝，請耐心等待。

       當外掛安裝成功後，Sublime Text 3 編輯器底端的狀態列會有安裝成功的提示。

 

      c)安裝方法二：你還可以下載完整的外掛包後解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝外掛的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。

　　如何找到 Packages 目錄？一個快捷的方法是：雙擊開啟你的 “Sublime Text 3”，點選單 “Preferences--->Browse Packages...”。

      它會直接開啟外掛包存放的目錄 “Packages”。然後你就可以把下載後解壓好的外掛包複製到這個 Packages 目錄下。

      當然，如果你熟悉 git，你還可以用 git 從外掛的 GitHub 庫直接克隆外掛包到 Packages 目錄下。

      備註： 以後所有外掛都可以通過以上介紹的兩種方法安裝，將不再贅述，推薦方法一，使用“ Package Control”安裝外掛。

3、BracketHighlighter 外掛

      功能說明：高亮顯示匹配的括號、引號和標籤。

4、LESS 外掛

      功能說明：LESS語法高亮顯示。

5、sublime-less2css 外掛

      功能說明：將less檔案編譯成css檔案。

6、Emmet 外掛

      功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS程式碼快速編寫神器。

      使用方法：預設快捷鍵 Tab

      注意：Emmet 外掛需要 PyV8 外掛的支援，所以在安裝 Emmet 時，會自動安裝 PyV8 外掛，如果安裝後 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然後手動下載，採用方法二安裝 PyV8 外掛。

      使用方法示例：書寫程式碼 ul#nav>li.item$*8>a{Item $}

      然後把游標定在這行程式碼的最後面，按 Tab 鍵，就會自動生成：

      <ul id="nav">

              <li class="item1"><a href="">Item 1</a></li>

             <li class="item2"><a href="">Item 2</a></li>

             <li class="item3"><a href="">Item 3</a></li>

             <li class="item4"><a href="">Item 4</a></li>

             <li class="item5"><a href="">Item 5</a></li>

             <li class="item6"><a href="">Item 6</a></li>

             <li class="item7"><a href="">Item 7</a></li>

             <li class="item8"><a href="">Item 8</a></li>

    </ul>

 

7、JsFormat 外掛

      功能說明：JavaScript程式碼格式化。

      使用方法：在開啟的JavaScript檔案裡點右鍵，選擇JsFormat。

8、ColorHighlighter 外掛

      功能說明：顯示所選顏色值的顏色，並集成了ColorPicker

      在16進位制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。

      看看效果，顏色值和顯示顏色都相應做了改變。

9、Compact Expand CSS Command 外掛

      功能說明：使CSS屬性展開及收縮，格式化CSS程式碼。

      使用方法：按 Ctrl+Alt+[ 收縮CSS程式碼為一行顯示，按 Ctrl+Alt+] 展開CSS程式碼為多行顯示。

      快捷鍵 Ctrl+Alt+[ 收縮CSS程式碼為效果： 

      快捷鍵 Ctrl+Alt+] 展開CSS程式碼為多行顯示效果：

10、SublimeTmpl 外掛

      功能說明：快速生成檔案模板。

      使用方法：SublimeTmpl預設的快捷鍵如下，如果快捷鍵設定衝突可能無效。

                    Ctrl+Alt+h              新建 html 檔案

                    Ctrl+Alt+j               新建 javascript 檔案

                    Ctrl+Alt+c               新建 css 檔案

                    Ctrl+Alt+p              新建 php 檔案

                    Ctrl+Alt+r               新建 ruby 檔案

                    Ctrl+Alt+Shift+p     新建 python 檔案

      下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 檔案。

      相應的模板為tmpl格式的檔案，它們儲存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

      當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式後儲存。

      現在按快捷鍵 Ctrl+Alt+H，新建一個 html 檔案，其格式就和更改後模板格式完全一樣了。如下圖：

11、Alignment 外掛

      功能說明：使程式碼格式的自動對齊。

      使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖衝突，二者中的一個要重置快捷鍵。

12、AutoFileName 外掛

      功能說明：自動補全檔案(目錄)名。

      安裝好後就可以來測試如何使用AutoFileName，先以<link>css檔案來示範，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。

      a)以這個檔案為範本它會去抓取跟abc.html在同一層的檔案列表。

      像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推

      b)像是<img src=””>的部分也是一樣的方式，沒什麼困難了，弄懂一下路徑就好了。

     c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。

13、DocBlockr 外掛

      功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函式註釋。

      使用方法：在函式上面輸入/** ,然後按 Tab 就會自動生成註釋。

在函式上面輸入/** ,然後按Tab 就會自動生成註釋。

14、SublimeCodeIntel 外掛

      功能說明：智慧提示。

15、HTML-CSS-JS Prettify 外掛

      功能說明：HTML、CSS、JS格式化。

      安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

      使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然後按下Enter。

      使用方法二：預設快捷鍵：Ctrl+Shift+H。

                       你也可以自行設定快捷鍵，選單 “Preferences---> Key Bindings – User” 裡新增：

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

       完成後儲存，以上程式碼設定執行此外掛的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵衝突。

      格