1.Package Control
插件管理器
1)在Sublime中打開View --> Show Console，將以下代碼復制到輸入框中后按回車鍵
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)驗證是否安裝成功
打開Preferences --> Package Control，如果能看到此菜單，則表示安裝成功

2.Emmet
HTML/CSS代碼快速編寫插件
1)打開控制臺
在Sublime中打開Preferences --> Package Control，也可直接按快捷鍵ctrl+shift+p，選擇或搜索 Install Package
2)安裝 Emmet 插件
在輸入框中輸入 emmet，點擊出現的插件，下方狀態欄會顯示安裝狀態，安裝完成會顯示說明文檔
3)安裝PyV8插件
正常情況下，當安裝完Emmet插件后會自動下載并安裝PyV8插件，直至狀態欄不動為止
4)驗證是否安裝成功
新建一個.html文件，在文件中鍵入字符!（注意是英文符號），然后按“Tab“鍵，如果出現html基礎結構則表示安裝成功

3.PyV8
Emmet插件依賴于PyV8插件，如果自動安裝PyV8插件失敗，則需要手動下載PyV8插件并安裝
1)下載PyV8插件
打開瀏覽器，輸入：https://github.com/emmetio/pyv8-binaries，點擊下圖中的綠色按鈕，再點擊“Download ZIP“
2)拷貝到Sublime中
將下載文件解壓縮，再找到pyv8-osx-p3.zip文件，同樣解壓縮，將其中的2個文件拷貝到PyV8/osx-p3目錄下，如果該文件夾中有其它內容，可以先全部刪除再粘貼
3)安裝
再次打開Sublime后需等待安裝結束（查看狀態欄，靜止不變），再次嘗試

4.HTML5
在Sublime中安裝 HTML5 插件

5.CSS3
在Sublime中安裝 CSS3 插件

6.JavaScript Completions
在Sublime中安裝 JavaScript Completions 插件

7.jQuery
在Sublime中安裝 jQuery 插件

8.JsFormat
在Sublime中安裝 JsFormat 插件

9.HTML-CSS-JS Prettify
HTML/CSS/JS代碼格式化插件
1)在Sublime中安裝 HTML-CSS-JS Prettify 插件
2)其依賴于Node.js，所以需要安裝Node.js
到Node.js官網下載對應的版本并安裝
3)確認Node.js安裝路徑
鼠標右鍵HTML/CSS/JS Prettify --> Set node Path，指定Node.js的安裝路徑
4)格式化代碼
鼠標右鍵HTML/CSS/JS Prettify --> Pretty Code

10.Pretty JSON
JSON代碼格式化插件
1)在Sublime中安裝 Pretty JSON 插件
2)自定義快捷鍵
打開Preference --> Key Bindings-User，添加格式化代碼快捷鍵為ctrl+shift+f
{ "keys": ["ctrl+shift+f"], "command": "pretty_json" }

11.Better Completion
JavaScript、jQuery、Bootstrap等js庫的自動補全插件，該插件的特點就是可以自定義配置需要自動補全的庫。
1)在Sublime中安裝 Better Completion 插件
2)配置需要自動補全的庫

12.SideBarEnhancements
側邊欄增強插件，可以指定預覽時使用的瀏覽器并設置快捷鍵
1)在Sublime中安裝 SideBarEnhancements 側邊欄增強插件
2)指定使用的瀏覽器
打開Preference --> Package Settings --> Side Bar --> Settings User，在打開的文件中添加如下內容
{
? "default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari
}
3)為瀏覽器綁定快捷鍵
打開Preference --> Package Settings --> Side Bar --> key Bindings-User，在打開的文件中添加如下內容
{ "keys": ["alt+f12"], "command": "side_bar_open_in_browser" },?
至此，所有設置已經完成，可以在頁面中按相應的熱鍵，直接在指定的瀏覽器中預覽

13.LESS
LESS語法高度顯示和代碼提示
1）在Sublime中安裝 LESS 插件
2）關閉并重新打開.less文件即可

14.Less2Css
編譯Less，保存.less文件時自動編譯為.css文件
1）在Sublime中安裝 Less2Ccss 插件
2）根據環境不同配置安裝也有所不同，分為windows環境和MacOS環境，具體可參考：https://fdream.net/blog/article/783.aspx
2.1在windows環境下，依賴less.js-windows
?? ?2.1.1)下載less.js-windows-master.rar文件，解壓到本地目錄。
?? ?2.1.2)將目錄路徑添加到環境變量PATH中，如D:\open\less.js-windows：
?? ?2.1.3)驗證是否成功
?? ?打開DOS命令行，輸入lessc，如果有如下提示則表示設置成功
2.2在MacOS環境下，依賴nodejs和lessc
?? ?2.2.1)安裝npm：官網直接下載node-v6.9.5.pkg并安裝，會自動安裝npm
?? ?2.2.2)安裝lessc：在終端執行sudo npm install less -gd，安裝完成后在終端執行命令lessc驗證
?? ?2.2.3)安裝less-plugin-clean-css：在終端執行sudo npm install less-plugin-clean-css -g
?? ?2.2.4)驗證是否成功?? ?

15.SublimeServer
讓Sublime成為靜態WEB服務器，無需單獨啟動Tomcat或者Apache這樣的重型服務器
1）在Sublime中安裝 SublimeServer 插件
2）安裝完成后點擊菜單欄中的"工具"——"SublimeServer"——"Settings"，可以查看并修改SublimeServer的服務器端口、文件擴展名等
3）點擊Start SublimeServer可以啟動服務器
4）在打開的.html文件中右擊，選擇"View in SublimeServer"會自動打開瀏覽器并通過Web服務器進行訪問
注：SublimeServer要求你的代碼文件夾，要添加到Sublime Text的項目里面才能訪問，步驟：點擊菜單欄中的"項目"——"添加文件夾到項目"。

16.Color Highlighter
展示顏色代碼的真正顏色。同時還提供一個顏色選擇器可以方便地更改顏色。
1）在Sublime中安裝 Color Highlighter 插件
2）修改顏色顯示方式，默認為下劃線顯示，修改為填充顯示
打開Preference --> Package Settings --> Color Highlighter --> Settings User，在打開的文件中添加如下內容
{
?? ?"ha_style": "filled",
}
3）此時會看到顏色代碼會直接顯示相應的顏色，同時可以右擊選擇"Choose color"打開顏色選擇器，自己選擇更改顏色

17.CSS Extended Completions
智能提示.css文件中的類名，需要關聯添加CSS文件
1）在Sublime中安裝 CSS Extended Completions 插件
2）將提示文件添加到Cache緩存中
在側邊欄中右擊文件，選擇"CSS Extended Completions"——"Add CSS Files To Cache"等
3）在.html文件中引入.css樣式文件，這時在html頁面中編寫樣式時會自動提示前面添加的css文件中的樣式

18.AutoFileName
提示文件路徑，快速輸入文件名
1）在Sublime中安裝 AutoFileName 插件
2）在輸入文件路徑時會自動提示，如路徑名、圖片選取等

19.Doc?Blockr
生成優美注釋
1）在Sublime中安裝 Doc?Blockr 插件
2）輸入/*或/**，然后按回車，會自動生成優美注釋，如果在函數上面寫/**，還會包括參數、返回值等

20.GitGutter
本地Git變化提示，可以在行首顯示當前行的Git狀態，是增加的、修改的還是刪除的
1）在Sublime中安裝 GitGutter 插件
2）在當前Git狀態與本地倉庫中的狀態有改變時會顯示

21.AngularJS
AngularJS提示插件
在Sublime中安裝 AngularJS 插件即可

22.MarkdownEditing
編輯markdown時高亮顯示
1）在Sublime中安裝 MarkdownEditing 插件
2）設置顯示樣式外觀等
打開Preference --> Package Settings --> Markdown Editing --> Markdown GFM Settings-User，在打開的文件中添加如下內容
{
?? ?// "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme",
?? ?"color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme",
?? ?"draw_centered": false, //默認為true，居中對齊，設置為false，左對齊
?? ?"wrap_width": 120, //每行字符數上限
?? ?"highlight_line": true, //當前行高亮顯示
}
注：更多配置可以參考Markdown GFM Settings-Default

23.Markdown Preview
在瀏覽器中預覽生成的HTML文件
1）在Sublime中安裝 Markdown Preview 插件
2）為瀏覽器綁定快捷鍵
打開Preference --> Key Bindings-User，在打開的文件中添加如下內容
{"keys": ["alt+f11"], "command": "markdown_preview", "args": { "target": "browser"}}
至此，所有設置已經完成，編輯md文件后按相應的熱鍵，直接在指定的瀏覽器中預覽

24.Terminal
在當前位置打開終端
1）在Sublime中安裝 Terminal 插件
2）使用方法
在左側的邊欄中右擊文件，選擇Open Terminal Here即可

25.SublimeText-Nodejs
在Sublime中直接運行調試（此插件的安裝方式比較特殊，無法直接通過Package Console安裝）
1）git clone https://github.com/tanepiper/SublimeText-Nodejs.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Nodejs
2）配置
當安裝好nodejs后,接著進入Perferences -> Browse Packages -> Nodejs
打開Nodejs.sublime-build文件，將osx中內容改為 "cmd": ["killall node; /usr/local/bin/node $file"]
打開Nodejs.sublime-settings文件，將node_command內容改為/usr/local/bin/node，npm_command內容改為/usr/local/bin/npm
3）運行node.js
通過快捷鍵command + b直接運行，顯示調試結果（此插件的安裝方式比較特殊，無法直接通過Package ）

26.ConvertToUTF8
解決Sublime不支持GBK、GB2312編碼的問題，支持打開GBK編碼的文件
在Sublime中安裝 ConvertToUTF8 插件

27.cssrem
自動將CSS的px值轉換為rem值（此插件的安裝方式比較特殊，無法直接通過Package Console安裝）
1）git clone https://github.com/hyb628/cssrem.git
2）進入packages目錄：Sublime Text -> Preferences -> Browse Packages
3）將克隆下載的cssrem-master目錄復制到上一步打開的Packges目錄里
4）修改默認配置
打開cssrem-master目錄下的cssrem.sublime-settings文件，進行修改
{
? ? "px_to_rem": 40, //px轉rem的單位比例，默認為40，一般修改為100
? ? "max_rem_fraction_length": 6, //px轉rem的小數部分的最大長度。默認為6。
? ? "available_file_types": [".css", ".less", ".sass",".html"] //啟用此插件的文件類型。默認為：[".css", ".less", ".sass"]
}
5）重啟Sublime Text

28.Vue Syntax Highlight
實現對.vue文件的語法高亮顯示
在Sublime中安裝 Vue Syntax Highlight 插件

29.LiveReload
可以實現當保存文件后實時刷新瀏覽器
1）在Chrome中安裝 LiveReload 擴展程序，并勾選“允許訪問文件地址”?
2）在Sublime中安裝 LiveReload 插件
3）打開Preference --> Package Settings --> LiveReload --> Settings-Default
{
?　　"enabled_plugins": [
? ? ? ? "SimpleReloadPlugin",
? ? ? ? "SimpleRefresh"
　　?]
}
4）在瀏覽器中啟用LiveReload，點一下黑色圈圈，中心的小圓圈會變成實心，表示啟用
5) 在Sublime中啟動LiveReload，每次重新打開Sublime都需要啟動，啟動方法：
? ? Ctrl+Shift+P ==> LiveReload ==> enable/disable plug-ins ==> simple reload

補充：
下載SVN服務器代碼到本地
1）從SVN服務器下載代碼到客戶端本地
在終端中輸入命令：svn checkout svn://localhost/mycode/node --username=stu --password=stu /Users/wangbo/Desktop/node
2）更新服務器端的代碼到客戶端本地
在終端中定位到客戶端代碼目錄后，然后輸入命令：svn update

---------------------------------------------------
1.Sublime Text 3注冊碼，輸入注冊碼：
Ryan Clark
Single User License
EA7E-812479
2158A7DE B690A7A3 8EC04710 006A5EEB
34E77CA3 9C82C81F 0DB6371B 79704E6F
93F36655 B031503A 03257CCC 01B20F60
D304FA8D B1B4F0AF 8A76C7BA 0FA94D55
56D46BCE 5237A341 CD837F30 4D60772D
349B1179 A996F826 90CDB73C 24D41245
FD032C30 AD5E7241 4EAA66ED 167D91FB
55896B16 EA125C81 F550AF6B A6820916

2.關閉自動更新
打開Preferences——Settings-User，添加如下內容：
"update_check": false

?

總結

以上是生活随笔為你收集整理的Sublime插件安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。