sublime text 3 教程（2）

這一節主要來安裝一些sublime text 3的外掛程式。 一、常用外掛程式安裝

1、ConvertToUTF8 外掛程式安裝

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

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

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

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

c)安裝方法二：你還可以下載完整的外掛程式包後解壓，放入 D:\sublime Text3\Data\Packages目錄下，以達到安裝外掛程式的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。

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

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

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

注意：

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

2、BracketHighlighter 外掛程式

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

外掛程式地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

3、Emmet 外掛程式

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

使用方法：預設快速鍵 Tab 或 Ctrl + e

外掛程式地址：https://github.com/sergeche/emmet-sublime

協助工具輔助：PyV8 下載地址： https://github.com/emmetio/pyv8-binaries

注意：Emmet 外掛程式需要 PyV8 外掛程式的支援，所以在安裝 Emmet 時，會自動安裝 PyV8 外掛程式，如果安裝後 Emmet 不能正常保用，因為D:\sublime Text3\Data\Packages沒有emmet相關內容，手動下載emmet外掛程式解壓放入D:\sublime Text3\Data\Packages檔案夾。下載地址在上面。

使用方法樣本：書寫代碼 ul#nav>li.item$*8>a{Item $}

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

關於Emmet的更多介紹，請查看官方文檔，還有這份速查表幫你快速記憶簡寫形式

4、JsFormat 外掛程式

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

使用方法：在開啟的JavaScript檔案裡點右鍵，選擇JsFormat或者使用預設快速鍵（Ctrl+Alt+F）。

外掛程式地址：https://github.com/jdc0589/jsformat

5、Compact Expand CSS Command 外掛程式

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

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

外掛程式地址：https://gist.github.com/vitaLee/2863474 或者：https://github.com/TooBug/CompactExpandCss

快速鍵 Ctrl+Alt+[ 收縮CSS代碼為效果：

6、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 檔案

外掛程式地址：https://github.com/kairyou/SublimeTmpl

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

相應的模板為tmpl格式的檔案，它們儲存在D:\sublime Text3\Data\Packages\SublimeTmpl\templates下。

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

新增語言：你還可以增加模板檔案夾中沒有的檔案模板，並做相應的設定來使用這一功能。具體可以參考它的中文文檔：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

7、Alignment 外掛程式

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

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

外掛程式地址：https://github.com/kevinsperrine/sublime_alignment

8、AutoFileName 外掛程式

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

外掛程式地址：https://github.com/BoundInCode/AutoFileName

9、DocBlockr 外掛程式

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

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

外掛程式地址：https://github.com/spadgos/sublime-jsdocs

10、HTML-CSS-JS Prettify 外掛程式

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

外掛程式地址：https://github.com/victorporof/Sublime-HTMLPrettify

安裝方法：安裝這個外掛程式前必須先安裝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，自己設定的話就要測試一下，不要跟其他快速鍵衝突。

格式化前：

格式化後：

11、SideBarEnhancements 外掛程式

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

外掛程式地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

12、JavaScript Completions外掛程式

功能說明：提示 js Api，更快地編寫指令碼，提示和完成。

外掛程式地址：https://github.com/pichillilorenzo/JavaScript-Completions

二、外掛程式列表

快速鍵 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 建立一個新視窗。