Sublime Text 插件整理

Package Control

插件管理器

1)在 Sublime 中打開 View –> Show Console，將以下代碼復(fù)制到輸入框中后按回車鍵 

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)驗(yàn)證是否安裝成功 打開 Preferences –> Package Control，如果能看到此菜單，則表示安裝成功

Emmet

HTML/CSS代碼快速編寫插件 

1)打開控制臺(tái) 在Sublime中打開Preferences –> Package Control，也可直接按快捷鍵ctrl+shift+p，選擇或搜索 Install Package 

2)安裝 Emmet 插件 在輸入框中輸入 emmet，點(diǎn)擊出現(xiàn)的插件，下方狀態(tài)欄會(huì)顯示安裝狀態(tài)，安裝完成會(huì)顯示說明文檔 

3)安裝PyV8插件 正常情況下，當(dāng)安裝完Emmet插件后會(huì)自動(dòng)下載并安裝PyV8插件，直至狀態(tài)欄不動(dòng)為止 

4)驗(yàn)證是否安裝成功 新建一個(gè).html文件，在文件中鍵入字符!（注意是英文符號(hào)），然后按“Tab“鍵，如果出現(xiàn)html基礎(chǔ)結(jié)構(gòu)則表示安裝成功

PyV8

Emmet插件依賴于PyV8插件，如果自動(dòng)安裝PyV8插件失敗，則需要手動(dòng)下載PyV8插件并安裝 

1)下載PyV8插件 打開瀏覽器，輸入：https://github.com/emmetio/pyv8-binaries，點(diǎn)擊下圖中的綠色按鈕，再點(diǎn)擊“Download ZIP“ 

2)拷貝到Sublime中 將下載文件解壓縮，再找到pyv8-osx-p3.zip文件，同樣解壓縮，將其中的2個(gè)文件拷貝到PyV8/osx-p3目錄下，如果該文件夾中有其它內(nèi)容，可以先全部刪除再粘貼 

3)安裝 再次打開Sublime后需等待安裝結(jié)束（查看狀態(tài)欄，靜止不變），再次嘗試

HTML5

在Sublime中安裝 HTML5 插件

CSS3

在Sublime中安裝 CSS3 插件

JavaScript Completions

在Sublime中安裝 JavaScript Completions 插件

jQuery

在Sublime中安裝 jQuery 插件

JsFormat

在Sublime中安裝 JsFormat 插件

HTML-CSS-JS Prettify

HTML/CSS/JS代碼格式化插件 

1)在Sublime中安裝 HTML-CSS-JS Prettify 插件 

2)其依賴于Node.js，所以需要安裝Node.js 到Node.js官網(wǎng)下載對應(yīng)的版本并安裝 

3)確認(rèn)Node.js安裝路徑 鼠標(biāo)右鍵HTML/CSS/JS Prettify –> Set node Path，指定Node.js的安裝路徑 

4)格式化代碼 鼠標(biāo)右鍵HTML/CSS/JS Prettify –> Pretty Code

Pretty JSON

JSON代碼格式化插件 

1)在Sublime中安裝 Pretty JSON 插件 

2)自定義快捷鍵 打開Preference –> Key Bindings-User，添加格式化代碼快捷鍵為ctrl+shift+f { “keys”: [“ctrl+shift+f”], “command”: “pretty_json” }

Better Completion

JavaScript、jQuery、Bootstrap等js庫的自動(dòng)補(bǔ)全插件，該插件的特點(diǎn)就是可以自定義配置需要自動(dòng)補(bǔ)全的庫。 

1)在Sublime中安裝 Better Completion 插件 

2)配置需要自動(dòng)補(bǔ)全的庫

SideBarEnhancements

側(cè)邊欄增強(qiáng)插件，可以指定預(yù)覽時(shí)使用的瀏覽器并設(shè)置快捷鍵 

1)在Sublime中安裝 SideBarEnhancements 側(cè)邊欄增強(qiáng)插件 

2)指定使用的瀏覽器 打開Preference –> Package Settings –> Side Bar –> Settings User，在打開的文件中添加如下內(nèi)容 { “default_browser”: “chrome” //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari } 

3)為瀏覽器綁定快捷鍵 打開Preference –> Package Settings –> Side Bar –> key Bindings-User，在打開的文件中添加如下內(nèi)容 { “keys”: [“alt+f12”], “command”: “side_bar_open_in_browser” }, 至此，所有設(shè)置已經(jīng)完成，可以在頁面中按相應(yīng)的熱鍵，直接在指定的瀏覽器中預(yù)覽

LESS

LESS語法高度顯示和代碼提示 

1）在Sublime中安裝 LESS 插件 

2）關(guān)閉并重新打開.less文件即可

Less2Css

編譯Less，保存.less文件時(shí)自動(dòng)編譯為.css文件 

1）在Sublime中安裝 Less2Ccss 插件 

2）根據(jù)環(huán)境不同配置安裝也有所不同，分為windows環(huán)境和MacOS環(huán)境，具體可參考：https://fdream.net/blog/article/783.aspx 2.1在windows環(huán)境下，依賴less.js-windows 

2.1.1)下載less.js-windows-master.rar文件，解壓到本地目錄。 

2.1.2)將目錄路徑添加到環(huán)境變量PATH中，如D:\open\less.js-windows： 

2.1.3)驗(yàn)證是否成功 打開DOS命令行，輸入lessc，如果有如下提示則表示設(shè)置成功 2.2在MacOS環(huán)境下，依賴nodejs和lessc 

2.2.1)安裝npm：官網(wǎng)直接下載node-v6.9.5.pkg并安裝，會(huì)自動(dòng)安裝npm 

2.2.2)安裝lessc：在終端執(zhí)行sudo npm install less -gd，安裝完成后在終端執(zhí)行命令lessc驗(yàn)證 

2.2.3)安裝less-plugin-clean-css：在終端執(zhí)行sudo npm install less-plugin-clean-css -g 

2.2.4)驗(yàn)證是否成功

SublimeServer

讓Sublime成為靜態(tài)WEB服務(wù)器，無需單獨(dú)啟動(dòng)Tomcat或者Apache這樣的重型服務(wù)器 

1）在Sublime中安裝 SublimeServer 插件 

2）安裝完成后點(diǎn)擊菜單欄中的”工具”——”SublimeServer”——”Settings”，可以查看并修改SublimeServer的服務(wù)器端口、文件擴(kuò)展名等 

3）點(diǎn)擊Start SublimeServer可以啟動(dòng)服務(wù)器 

4）在打開的.html文件中右擊，選擇”View in SublimeServer”會(huì)自動(dòng)打開瀏覽器并通過Web服務(wù)器進(jìn)行訪問 注：SublimeServer要求你的代碼文件夾，要添加到Sublime Text的項(xiàng)目里面才能訪問，步驟：點(diǎn)擊菜單欄中的”項(xiàng)目”——”添加文件夾到項(xiàng)目”。

Color Highlighter

展示顏色代碼的真正顏色。同時(shí)還提供一個(gè)顏色選擇器可以方便地更改顏色。 

1）在Sublime中安裝 Color Highlighter 插件 

2）修改顏色顯示方式，默認(rèn)為下劃線顯示，修改為填充顯示 打開Preference –> Package Settings –> Color Highlighter –> Settings User，在打開的文件中添加如下內(nèi)容 { “ha_style”: “filled”, } 

3）此時(shí)會(huì)看到顏色代碼會(huì)直接顯示相應(yīng)的顏色，同時(shí)可以右擊選擇”Choose color”打開顏色選擇器，自己選擇更改顏色

CSS Extended Completions

智能提示.css文件中的類名，需要關(guān)聯(lián)添加CSS文件 

1）在Sublime中安裝 CSS Extended Completions 插件 

2）將提示文件添加到Cache緩存中 在側(cè)邊欄中右擊文件，選擇”CSS Extended Completions”——”Add CSS Files To Cache”等 

3）在.html文件中引入.css樣式文件，這時(shí)在html頁面中編寫樣式時(shí)會(huì)自動(dòng)提示前面添加的css文件中的樣式

AutoFileName

提示文件路徑，快速輸入文件名 

1）在Sublime中安裝 AutoFileName 插件 

2）在輸入文件路徑時(shí)會(huì)自動(dòng)提示，如路徑名、圖片選取等

Doc?Blockr

生成優(yōu)美注釋 

1）在Sublime中安裝 Doc?Blockr 插件 

2）輸入/*或/，然后按回車，會(huì)自動(dòng)生成優(yōu)美注釋，如果在函數(shù)上面寫/，還會(huì)包括參數(shù)、返回值等

GitGutter

本地Git變化提示，可以在行首顯示當(dāng)前行的Git狀態(tài)，是增加的、修改的還是刪除的 

1）在Sublime中安裝 GitGutter 插件 

2）在當(dāng)前Git狀態(tài)與本地倉庫中的狀態(tài)有改變時(shí)會(huì)顯示

AngularJS

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

MarkdownEditing

編輯markdown時(shí)高亮顯示 

1）在Sublime中安裝 MarkdownEditing 插件 

2）設(shè)置顯示樣式外觀等 打開Preference –> Package Settings –> Markdown Editing –> Markdown GFM Settings-User，在打開的文件中添加如下內(nèi)容 { // “color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme”, “color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme”, “draw_centered”: false, //默認(rèn)為true，居中對齊，設(shè)置為false，左對齊 “wrap_width”: 120, //每行字符數(shù)上限 “highlight_line”: true, //當(dāng)前行高亮顯示 } 注：更多配置可以參考Markdown GFM Settings-Default

Markdown Preview

在瀏覽器中預(yù)覽生成的HTML文件 

1）在Sublime中安裝 Markdown Preview 插件 

2）為瀏覽器綁定快捷鍵 打開Preference –> Key Bindings-User，在打開的文件中添加如下內(nèi)容 {“keys”: [“alt+f11”], “command”: “markdown_preview”, “args”: { “target”: “browser”}} 至此，所有設(shè)置已經(jīng)完成，編輯md文件后按相應(yīng)的熱鍵，直接在指定的瀏覽器中預(yù)覽

Terminal

在當(dāng)前位置打開終端 

1）在Sublime中安裝 Terminal 插件 

2）使用方法 在左側(cè)的邊欄中右擊文件，選擇Open Terminal Here即可

SublimeText-Nodejs

在Sublime中直接運(yùn)行調(diào)試（此插件的安裝方式比較特殊，無法直接通過Package Console安裝） 

1）git clone https://github.com/tanepiper/SublimeText-Nodejs.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Nodejs 

2）配置 當(dāng)安裝好nodejs后,接著進(jìn)入Perferences -> Browse Packages -> Nodejs 打開Nodejs.sublime-build文件，將osx中內(nèi)容改為 “cmd”: [“killall node; /usr/local/bin/node $file”] 打開Nodejs.sublime-settings文件，將node_command內(nèi)容改為/usr/local/bin/node，npm_command內(nèi)容改為/usr/local/bin/npm 

3）運(yùn)行node.js 通過快捷鍵command + b直接運(yùn)行，顯示調(diào)試結(jié)果（此插件的安裝方式比較特殊，無法直接通過Package ）

ConvertToUTF8

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

cssrem

自動(dòng)將CSS的px值轉(zhuǎn)換為rem值（此插件的安裝方式比較特殊，無法直接通過Package Console安裝） 

1）git clone https://github.com/hyb628/cssrem.git 

2）進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse Packages 

3）將克隆下載的cssrem-master目錄復(fù)制到上一步打開的Packges目錄里 

4）修改默認(rèn)配置 打開cssrem-master目錄下的cssrem.sublime-settings文件，進(jìn)行修改 { “px_to_rem”: 40, //px轉(zhuǎn)rem的單位比例，默認(rèn)為40，一般修改為100 “max_rem_fraction_length”: 6, //px轉(zhuǎn)rem的小數(shù)部分的最大長度。默認(rèn)為6。 “available_file_types”: [“.css”, “.less”, “.sass”,”.html”] //啟用此插件的文件類型。默認(rèn)為：[“.css”, “.less”, “.sass”] } 

5）重啟Sublime Text