超級實用的 Sublime Text 插件大匯總！

ackage Control

功能：安裝包管理

簡介：sublime插件控制臺，提供添加、刪除、禁用、查找插件等功能

使用：https://sublime.wbond.net/installation

安裝方法：

CTRL+` ，出現控制臺
粘貼以下代碼至控制臺

ST2：

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation')

ST3：

importurllib.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())

其他方法：

如果以上方法不能安裝，請使用下面的方法

選擇菜單：Preferences > Browse Packages
打開sublime插件安裝包文件夾
下載文件并復制到打開的文件夾
重啟sublime

Emmet

功能：編碼快捷鍵，前端必備

簡介：Emmet作為zen coding的升級版，對于前端來說，可是必備插件，如果你對它還不太熟悉，可以在其官網（http://docs.emmet.io/）上看下具體的演示視頻。

使用：教程-http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/

JSFormat

功能：Javascript的代碼格式化插件

簡介：很多網站的JS代碼都進行了壓縮，一行式的甚至混淆壓縮，這讓我們看起來很吃力。而這個插件能幫我們把原始代碼進行格式的整理，包括換行和縮進等等，是代碼一目了然，更快讀懂~

使用：在已壓縮的JS文件中，右鍵選擇jsFormat或者使用默認快捷鍵（Ctrl+Alt+F）

LESS

功能：LESS高亮插件

簡介：用LESS的同學都知道，sublime沒有支持less的語法高亮，所以這個插件可以幫上我們

使用：打開.less文件或者設置為less格式

Less2CSS

功能：編譯Less

簡介：監測到文件改動時，編譯保存為.css文件

使用：打開.less文件，編寫代碼保存即可看到同時生成.css的文件，如果沒有則需要安裝node。不推薦用這種方法編譯，要么用koala，要么就用grunt編譯。

Alignment

功能：”=”號對齊

簡介：變量定義太多，長短不一，可一鍵對齊

使用：默認快捷鍵Ctrl+Alt+A和QQ截屏沖突，可設置其他快捷鍵如：Ctrl+Shift+Alt+A；先選擇要對齊的文本

sublime-autoprefixer

功能：CSS添加私有前綴

簡介：CSS還未標準化，所以要給各大瀏覽器一個前綴以解決兼容問題

使用：Ctrl+Shift+P，選擇autoprefixer即可。需要安裝node.js。

其他設置如快捷鍵請參考：https://sublime.wbond.net/packages/Autoprefixer

Clipboard History

功能：粘貼板歷史記錄

簡介：方便使用復制/剪切的內容

使用：

Ctrl+alt+v：顯示歷史記錄
Ctrl+alt+d：清空歷史記錄
Ctrl+shift+v：粘貼上一條記錄（最舊）
Ctrl+shift+alt+v：粘貼下一條記錄（最新）

Bracket Highlighter

功能：代碼匹配

簡介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮標記，便于查看起始和結束標記

使用：點擊對應代碼即可

Git

功能：git管理

簡介：插件基本上實現了git的所有功能

使用：https://github.com/kemayo/sublime-text-git/wiki

jQuery

功能：jQ函數提示

簡介：快捷輸入jQ函數，是偷懶的好方法

DocBlockr

功能：生成優美注釋

簡介：標準的注釋，包括函數名、參數、返回值等，并以多行顯示，手動寫比較麻煩

使用：輸入/*、/**然后回車，還有很多用法，請參照

https://sublime.wbond.net/packages/DocBlockr

ColorPicker

功能：調色板

簡介：需要輸入顏色時，可直接選取顏色

使用：快捷鍵Windows: ctrl+shift+c

ConvertToUTF8

功能：文件轉碼成utf-8

簡介：通過本插件，您可以編輯并保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同時支持 Sublime Text 2 和 3。

使用：安裝插件后自動轉換為utf-8格式

AutoFileName

功能：快捷輸入文件名

簡介：自動完成文件名的輸入，如圖片選取

使用：輸入”/”即可看到相對于本項目文件夾的其他文件

Nodejs

功能：node代碼提示

教程：https://sublime.wbond.net/packages/Nodejs

IMESupport

功能：sublime中文輸入法

簡介：還在糾結 Sublime Text 中文輸入法不能跟隨光標嗎？試試「IMESupport 」這個插件吧！目前只支持 Windows，在搜索等界面不能很好的跟隨光標。

使用：Ctrl + Shift + P →輸入pci →輸入IMESupport →回車

Trailing spaces

功能：檢測并一鍵去除代碼中多余的空格

簡介：還在糾結代碼中有多余的空格而顯得代碼不規范？或是有處女座情節？次插件幫你實現發現多余空格、一鍵刪除空格、保存時自動刪除多余空格，讓你的代碼規范清爽起來

使用：安裝插件并重啟，即可自動提示多余空格。一鍵刪除多余空格：CTRL+SHITF+T（需配置），更多配置請點擊標題。快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數組內）

1	{"keys":["ctrl+shift+t"],"command":"delete_trailing_spaces"}

FileDiffs

功能：強大的比較代碼不同工具

簡介：比較當前文件與選中的代碼、剪切板中代碼、另一文件、未保存文件之間的差別。可配置為顯示差別在外部比較工具，精確到行。

使用：右鍵標簽頁，出現FileDiffs Menu或者Diff with Tab…選擇對應文件比較即可

GBK Encoding Support

功能：中文識別

簡介：Sublime Text 2可識別UTF-8格式的中文，不識別GBK和ANSI，因此打開很多含中文的文檔都會出現亂碼。可以通過安裝插件GBK Support,來識別GBK和ANSI。

使用：

Open a GBK File
Save file with GBK encoding
Change file encoding from utf8 to GBK or GBK to utf8

本文轉自：W3C中文教程/中文網（w3schools.wang），如果你是IT從業者，它也許會對你有幫助！

ublime是我們前端開發非常常用的編輯工具，今天來給大家分享10個應用技巧和訣竅。

1) 選擇

以下是一些Sublime Text選擇文本的快捷鍵：

Command + D 選中一個單詞
Command + L 選中一行
Command + A 全選
Ctrl + Command + M` 選中括號內所有內容 (編寫CSS或JS時非常實用)

Sublime Text還支持一次選中多行的操作：Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

Command 按住Command鍵再點擊想選中的行
Command + Ctrl + G (選中部分文本時) 按此鍵選中所有相同文本
Command + D (選中部分文本時) 直接選中下一次出現的該文本

2) CSS排序

CSS屬性的順序一般不重要，因為無論何種順序瀏覽器都能正確渲染。但排序所有的屬性還是有助于代碼的整潔。在Sublime Text中，選中CSS屬性后按F5就可以按字母順序排序。

也可以使用 CSSComb 等第三方插件，更詳細的控制排序的方法。

3) 命令面板（Command Palette）

使用命令面板可以快速完成多重任務。按Command + Shift + P調出面板，鍵入需要的命令即可。看以下的幾個示例：

▼ 重命名文件

▼ 設置文件為HTML語法

▼ 插入代碼片段

4) 切換標簽頁與工程

在同時打開多個標簽頁時，可以用以下的熱鍵切換：

Command + T 列出所有的標簽頁
Command + Shift + ] 下一標簽頁
Command + Shift + [ 上一標簽頁
Command + Ctrl + P 切換側邊欄顯示的工程

5) 拼寫檢查

如果你經常使用Sublime Text從事英文創作，那么啟用拼寫檢查就非常有用處了。選擇Preferences > Settings – User菜單，添加以下代碼：

"spell_check": true,

6) 跨文件編輯

同一個編輯操作可以在多個文件中同時重復。舉個例子，多個文件中有同一段代碼時，可用以下的步驟快速編輯：

按Command + Shift + F在Find框中輸入待查找的代碼。可按Command + E快速使用選擇中的代碼段。
在Where框中指定需要查找的文件范圍，或填寫<open files>表示查找目前打開的文件。
在Replace框中輸入要替換成的代碼，按Replace按鈕批量替換。

7) 文件爬蟲

按Command + R可以列出文檔中所有的CSS選擇器。可以選擇并立刻跳轉查看。這個操作比使用一般的“查找”功能快得多。

8) 更換主題

Sublime Text的外觀主題可以更換。Soda Theme就是一個不錯的主題，可以在包管理器中安裝。

如果要安裝的主題并不在在線軟件倉庫中，也可以手動安裝：

下載并解壓縮主題包
點擊菜單 Preferences > Browse Packages…
把主題文件夾復制到Packages文件夾中.
點擊菜單 Preferences > Settings – Users 并加入以下代碼："theme": "Soda Light.sublime-theme"

9) 更換Sublime Text程序圖標

不僅主題可以更換，圖標也可以。在Dribbble上有大量重新設計的Sublime Text精美圖標。更換方法：

下載一個圖標，有.icns格式的最好。如果沒有，用iConvert轉換之。

終端執行：

open /Applications/Sublime\ Text.app/Contents/Resources/

替換Sublime Text 3.icns或Sublime Text 2.icns文件。

8) 增強側邊欄

SideBarEnhancements插件有效地改進了Sublime Text的側邊欄。安裝插件后在側邊欄上點擊右鍵，可以找到一下新功能：在資源管理器中打開、新建文件、新建文件夾、以…打開、在瀏覽器中打開。

注：在瀏覽器中打開的熱鍵是F12。

你還知道哪些sublime的技巧嗎？歡迎你來留言哦！

件

插件安裝方式，ctrl+shift+p輸入install packages

CSS3:支持CSS3里的語法高亮。(Sublime3里自帶的CSS高亮不夠用)。安裝后, 打開一個CSS文件，然后按照下面GIF操作，將CSS3高亮作為CSS文件的默認高亮。

livestyle：調試后實時更新頁面。安裝這個還需要安裝谷歌的插件。

Emmet:快速生成代碼，用過h5build的應該知道。ul*li*3相當于:

<ul><li></li><li></li><li></li></ul>

記下語法就ok.

ConvertToUTF8：編碼轉utf8

CSScomb:css屬性排序

html5：html規范包，輸入html+tab生成html規范文檔

Alignment：代碼對齊，快捷鍵ctrl alt a

Autoprefixer插件:css3私有前綴自動補全插件

AutoFileName：自動完成文件名的輸入，如圖片選取，快捷輸入文件名路徑補全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代碼美化壓縮插件

Color Highlighter 顏色選擇插件

快捷鍵

Ctrl+D 選中光標所占的文本，繼續操作則會選中下一個相同的文本。

Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。舉個栗子：快速選中并更改所有相同的變量名、函數名等。

Ctrl+L 選中整行，繼續操作則繼續選擇下一行，效果和 Shift+↓ 效果一樣。

Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，即可同時編輯這些行。

Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內里的內容。

Ctrl+M 光標移動至括號內結束或開始的位置。

Ctrl+Enter 在下一行插入新行。舉個栗子：即使光標不在行尾，也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即使光標不在行首，也能快速向上插入一行。

Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。

Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。

Ctrl+K+0 展開所有折疊代碼。

Ctrl+← 向左單位性地移動光標，快速移動光標。

Ctrl+→ 向右單位性地移動光標，快速移動光標。

shift+↑ 向上選中多行。

shift+↓ 向下選中多行。

Shift+← 向左選中文本。

Shift+→ 向右選中文本。

Ctrl+Shift+← 向左單位性地選中文本。

Ctrl+Shift+→ 向右單位性地選中文本。

Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行之前）。

Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行之后）。

Ctrl+Alt+↑ 向上添加多行光標，可同時編輯多行。

Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行。

Ctrl+J 合并選中的多行代碼為一行。舉個栗子：將多行格式的CSS屬性合并為一行。

Ctrl+Shift+D 復制光標所在整行，插入到下一行。

Tab 向右縮進。

Shift+Tab 向左縮進。

Ctrl+K+K 從光標處開始刪除代碼至行尾。

Ctrl+Shift+K 刪除整行。

Ctrl+/ 注釋單行。

Ctrl+Shift+/ 注釋多行。

Ctrl+K+U 轉換大寫。

Ctrl+K+L 轉換小寫。

Ctrl+Z 撤銷。

Ctrl+Y 恢復撤銷。

Ctrl+U 軟撤銷，感覺和 Gtrl+Z 一樣。

Ctrl+F2 設置書簽

Ctrl+T 左右字母互換。

F6 單詞檢測拼寫

Ctrl+F 打開底部搜索框，查找關鍵字。

Ctrl+shift+F 在文件夾內查找，與普通編輯器不同的地方是sublime允許添加多個文件夾進行查找，略高端，未研究。

Ctrl+P 打開搜索框。舉個栗子：1、輸入當前項目中的文件名，快速搜索文件，2、輸入@和關鍵字，查找文件中函數名，3、輸入：和數字，跳轉到文件中該行代碼，4、輸入#和關鍵字，查找變量名。

Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位。

Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數。

Ctrl+：打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等。

Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件。

Esc 退出光標多行選擇，退出搜索框，命令框等。

Ctrl+Tab 按文件瀏覽過的順序，切換當前窗口的標簽頁。

Ctrl+PageDown 向左切換當前窗口的標簽頁。

Ctrl+PageUp 向右切換當前窗口的標簽頁。

Alt+Shift+1 窗口分屏，恢復默認1屏（非小鍵盤的數字）

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 開啟/關閉側邊欄。

F11 全屏模式

Shift+F11 免打擾模式

在線咨詢

上一篇：eBay商品刊登簡易教程
下一篇：前端開發，用英雄聯盟的方式講解JavaScript設

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

超級實用的 Sublime Text 插件 大匯總！