Sublimetext3插件彙總

Package Control

插件管理器

1)在

Sublime

中打開

View –> Show Console

，将以下代碼複制到輸入框中後按Enter鍵

2)驗證是否安裝成功 打開

Preferences –> Package Control

，如果能看到此菜單，則表示安裝成功

Emmet

HTML/CSS

代碼快速編寫插件

1)打開控制台 在Sublime中打開

Preferences –> Package Control

，也可直接按快捷鍵

ctrl+shift+p

，選擇或搜尋

Install Package

2)安裝 Emmet 插件 在輸入框中輸入 emmet，點選出現的插件，下方狀态欄會顯示安裝狀态，安裝完成會顯示說明文檔

3)安裝PyV8插件 正常情況下，當安裝完Emmet插件後會自動下載下傳并安裝PyV8插件，直至狀态欄不動為止

4)驗證是否安裝成功 建立一個.html檔案，在檔案中鍵入字元!（注意是英文符号），然後按“Tab“鍵，如果出現html基礎結構則表示安裝成功

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後需等待安裝結束（檢視狀态欄，靜止不變），再次嘗試

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

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庫的自動補全插件，該插件的特點就是可以自定義配置需要自動補全的庫。

1)在Sublime中安裝

Better Completion

插件

2)配置需要自動補全的庫

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” }

, 至此，所有設定已經完成，可以在頁面中按相應的熱鍵，直接在指定的浏覽器中預覽

LESS

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

1）在Sublime中安裝 LESS 插件

2）關閉并重新打開

.less

檔案即可

Less2Css

編譯Less，儲存

.less

檔案時自動編譯為

.css

檔案

1）在Sublime中安裝 Less2Ccss 插件

2）根據環境不同配置安裝也有所不同，分為windows環境和MacOS環境

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)驗證是否成功

SublimeServer

讓Sublime成為靜态WEB伺服器，無需單獨啟動Tomcat或者Apache這樣的重型伺服器

1）在Sublime中安裝 SublimeServer 插件

2）安裝完成後點選菜單欄中的

”工具”——”SublimeServer”——”Settings”

，可以檢視并修改SublimeServer的伺服器端口、檔案擴充名等

3）點選Start SublimeServer可以啟動伺服器

4）在打開的.html檔案中右擊，選擇

”View in SublimeServer”

會自動打開浏覽器并通過Web伺服器進行通路 注：SublimeServer要求你的代碼檔案夾，要添加到Sublime Text的項目裡面才能通路，步驟：點選菜單欄中的”項目”——”添加檔案夾到項目”。

Color Highlighter

展示顔色代碼的真正顔色。同時還提供一個顔色選擇器可以友善地更改顔色。

1）在Sublime中安裝 Color Highlighter 插件

2）修改顔色顯示方式，預設為下劃線顯示，修改為填充顯示 打開

Preference –> Package Settings –> Color Highlighter –> Settings User

，在打開的檔案中添加以下内容

{ “ha_style”: “filled”, }

3）此時會看到顔色代碼會直接顯示相應的顔色，同時可以右擊選擇

"Choose color"

打開顔色選擇器，自己選擇更改顔色

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檔案中的樣式

AutoFileName

提示檔案路徑，快速輸入檔案名

1）在Sublime中安裝 AutoFileName 插件

2）在輸入檔案路徑時會自動提示，如路徑名、圖檔選取等

Doc​Blockr

生成優美注釋

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

2）輸入

/*

或

/

，然後按回車，會自動生成優美注釋，如果在函數上面寫

/

，還會包括參數、傳回值等

GitGutter

本地Git變化提示，可以在行首顯示目前行的Git狀态，是增加的、修改的還是删除的

1）在Sublime中安裝 GitGutter 插件

2）在目前Git狀态與本地倉庫中的狀态有改變時會顯示

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

Markdown Preview

在浏覽器中預覽生成的HTML檔案

1）在Sublime中安裝 Markdown Preview 插件

2）為浏覽器綁定快捷鍵 打開

Preference –> Key Bindings-User

，在打開的檔案中添加如下内容

{“keys”: [“alt+f11”], “command”: “markdown_preview”, “args”: { “target”: “browser”}}

至此，所有設定已經完成，編輯md檔案後按相應的熱鍵，直接在指定的浏覽器中預覽

Terminal

在目前位置打開終端

1）在Sublime中安裝 Terminal 插件

2）使用方法 在左側的邊欄中右擊檔案，選擇

Open Terminal Here

即可

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

直接運作，顯示調試結果