Sublime Text 3 超詳細插件安裝

安裝插件

一、安裝Package Control 組件

Package Control 是 Sublime Text 插件包管理器。它包含可供安裝的2,500多個軟件包的列表，用戶可以自己添加任何 GitHub 或 BitBucket 存儲庫。簡單的說，也就是 sublime Text 只有安裝了 Package control 組件，后期才能安裝各種不同的插件。有了它，我們就可以很方便的瀏覽、安裝和卸載 Sublime Text 中的插件。

Sublime安裝Package control組件有兩種方法：

第一種方法：

打開sublime界面，按Ctrl+shift+P組合鍵，然后可調出以下界面：

 

 

搜索 install package，然后直接點擊。

安裝好后就會顯示成功安裝信息，點擊確定即可。步驟較簡單，不再附圖說明

第二種方法：

打開sublime界面，按 Ctrl+` (此符號為tab按鍵上面的按鍵)組合鍵，即可調出命令行。

然后粘貼以下代碼到命令行並回車：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()

 

 

耐心等待安裝即可。

最后看到以下組件顯示就表示安裝組件成功了。

 

 

 

2、SideBarEnhancements 插件

功能說明：側欄菜單擴充功能。插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

安裝方法一：

快捷鍵 Ctrl+Shift+p ，打開管理器。在頂部的懸浮對話框，輸入 “install”, 然后下選點擊 “Package Control: Install Package”。

在出現的懸浮對話框中輸入 “SideBar”, 然后點選下面的 “SideBarEnhancements ” 插件，就會自動開始安裝，耐心等待即可

安裝過程中，在底端狀態欄可看到安裝過程

安裝成功后，下方會顯示

“SideBarEnhancements successfully installed”，

表示安裝完成，同時也可以根據下圖中指示，查看插件是否成功安裝

該插件的效果如下：

 

安裝方法二：

 

可以下載完整的插件包后解壓，放入Packages 目錄下，以達到安裝插件的目的。如何找到 Packages 目錄？答：在“Sublime Text 3”頂部欄，點擊菜單 “Preferences->Browse Packages...”

會直接打開插件包存放的目錄“Packages”然后你就可以把下載后解壓好的插件包復制到這個 Packages 目錄下。

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

安裝步驟：

1、安裝 Sublime text 3

安裝過程較簡單，不再截圖贅述，正常安裝成功后，雙擊創建好的桌面快捷方式。

之后設置如下內容：

①打開側邊欄：View -> Side Bar -> Show SideBar (Ctrl+B,Ctrl+K)

②打開上邊欄：快捷鍵Ctrl + Shift + P進入管理器，輸入View，選擇Toogle Tabs

③設置字體及字體大小

菜單“Preferences--->Setting ”，

打開“Preferences.sublime-settings-User”

 

如下圖添加所需代碼，根據自己的喜好進行設置。設置字體用"font_face":"字體名稱"，設置字體大小用"font_size":"字體大小"，注意它們之間需要用逗號隔開。

2、開始安裝插件

2.1、安裝Package Control 組件

Package Control 是 Sublime Text 插件包管理器。它包含可供安裝的2,500多個軟件包的列表，用戶可以自己添加任何 GitHub 或 BitBucket 存儲庫。簡單的說，也就是 sublime Text 只有安裝了 Package control 組件，后期才能安裝各種不同的插件。有了它，我們就可以很方便的瀏覽、安裝和卸載 Sublime Text 中的插件。

Sublime安裝Package control組件有兩種方法：

第一種方法：

打開sublime界面，按Ctrl+shift+P組合鍵，然后可調出以下界面：

 

 

搜索 install package control，然后直接點擊。

安裝好后就會顯示成功安裝信息，點擊確定即可。步驟較簡單，不再附圖說明

第二種方法：

打開sublime界面，按 Ctrl+` (此符號為tab按鍵上面的按鍵)組合鍵，即可調出命令行。

然后粘貼以下代碼到命令行並回車：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()

 

 

耐心等待安裝即可。

最后看到以下組件顯示就表示安裝組件成功了。

 

2.2、SideBarEnhancements 插件

功能說明：側欄菜單擴充功能。插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

安裝方法一：

快捷鍵 Ctrl+Shift+p ，打開管理器。在頂部的懸浮對話框，輸入 “install”, 然后下選點擊 “Package Control: Install Package”。

在出現的懸浮對話框中輸入 “SideBar”, 然后點選下面的 “SideBarEnhancements ” 插件，就會自動開始安裝，耐心等待即可

安裝過程中，在底端狀態欄可看到安裝過程

安裝成功后，下方會顯示

“SideBarEnhancements successfully installed”，

表示安裝完成，同時也可以根據下圖中指示，查看插件是否成功安裝

該插件的效果如下：

 

安裝方法二：

 

可以下載完整的插件包后解壓，放入Packages 目錄下，以達到安裝插件的目的。如何找到 Packages 目錄？答：在“Sublime Text 3”頂部欄，點擊菜單 “Preferences->Browse Packages...”

會直接打開插件包存放的目錄“Packages”然后你就可以把下載后解壓好的插件包復制到這個 Packages 目錄下。

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

 

2.3、ConvertToUTF8 插件

功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼，在打開文件的時候一開始會顯示亂碼，然后一剎那就自動顯示出正常的字體，當然，在保存文件之后原文件的編碼格式不會改變。

安裝步驟：Ctrl+Shift+P面板，搜索插件 BracketHighlighter 點擊安裝即可。

 

2.4、BracketHighlighter 插件

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

 

安裝步驟：

1. Ctrl+Shift+P 打開管理器，安裝插件BracketHighlighter

2. preferences–>package settings–>Bracket highlighter–>Bracket settings，把 Bracket settings-Default 內容復制到 sublime-settings-User

 

 

3. Ctrl+F 查詢到 “bracket_styles”，把 {} 中注釋的 // 都去掉，其中，color表示的設置選中部分的顏色，把該值改為以 brackethighlighter 開頭，style則全部改成hightlight，注意：后面的逗號一定加上！

 

2.5、Emmet 插件

 

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

安裝方法：Ctrl+Shift+P面板，安裝插件

使用方法：默認快捷鍵 Tab/Ctrl+E

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

使用方法示例：

書寫代碼：ul#nav>li.item$*8>a{Item $}，

然后把光標定在這行代碼的最后面，按 Tab 鍵，就會自動生成：

更多更詳細的使用方法，請查閱 Emmet 官網：http://docs.emmet.io/

2.6、JsFormat 插件

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

使用方法：在打開的JavaScript文件里點右鍵，選擇JsFormat。

 

2.7、ColorHighlighter 插件

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

使用方法： 在16進制的顏色值上點右鍵，選擇“Insert color with color picker”,會彈性顏色拾色器

在需要的色塊上單擊選擇之后，顏色值和顯示顏色都會相應做出改變

 

2.8 Compact Expand CSS Command插件

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

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

快捷鍵Ctrl+Alt+[收縮CSS代碼為單行顯示：

快捷鍵Ctrl+Alt+]展開CSS代碼為多行顯示：

 

2.9、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格式的文件，保存在Packages 目錄中 SublimeTmpl\templates 下：

 

當然我們可以根據自己的喜好來更改模板格式。例如，把自己 html 的模板另存為至相同的目錄，更名為html.temp，類型選擇為"All Files" 即可 。

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

 

2.10、Alignment 插件

 

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

安裝方法：Ctrl+Shift+P面板，安裝插件。

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

 

2.11、AutoFileName 插件

 

功能說明：自動補全文件(目錄)名。

安裝好后就可以來測試如何使用AutoFileName，先以html 為例，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。以這個檔案為范本它會去抓取跟 當前 html在同一層的檔案列表。

如果我們這次要link的是在某test資料夾內的 某文件，直接打上test/，就會跑出test資料夾內的檔案，整個用法以此類推

如果需要連到上一層的 imgs 資料夾內的 test.png，那么在前面打..(上層)，依序去選擇路徑即可

 

2.12、DocBlockr 插件

 

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

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

 

2.13、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”

里新增：

1. {
2. "keys": ["ctrl+shift+o"],
3. "command": "htmlprettify"
4. }

完成后保存，以上代碼設定執行此插件的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵沖突。

 

2.16、Theme-Soda 插件

 

功能說明：最受歡迎 SublimeText 主題之一

安裝完成后，點擊菜單

Preferences--->Settings - User，

根據需要的主題效果，添加如下代碼。

Soda 亮色主題請添加：

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

Soda 暗色主題請添加：

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

如果加代碼 "soda_classic_tabs":true，文件標簽頁形狀會如下顯示：

如果不添加此行代碼，文件標簽頁形狀會如下顯示：

 

除此之外，還有其他的Sublime Text 主題插件：

Theme-Flatland 插件

Theme-Nexus 插件

 

2.17、SublimeCodeIntel 插件

功能說明：智能提示。

2.18、LESS 插件

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

安裝方法：Ctrl+Shift+P面板，搜索 LESS 安裝插件

3、查看插件列表

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

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

4、移除插件

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

然后在出現的插件列表中選你要移除的插件。

5、 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 創建一個新窗口。

 

至此，恭喜，SublimeText3 常用且高效的插件已經成功安裝了。