Sublime Text 3前端開發經常使用優秀插件介紹

Package Control插件管理

提到Sublime Text插件安裝，就不得不提Package Control [官方文檔]

簡而言之，它是用來管理插件的插件

因此，首次使用前也是須要安裝的

使用Ctrl+`（Esc鍵下方）快捷鍵或者經過View->Show Console菜單打開命令行

將如下代碼複製後粘貼到如上圖中「<代碼粘貼處>」，而後按Enter(回車)，稍等片刻

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

若是安裝成功，就能夠在Preferences菜單下看到Package Settings和Package Control兩個菜單。

---

若不能經過以上方式成功安裝，可嘗試如下方式手動安裝

點擊Preferences->Browse Packages...菜單

進入打開的目錄的上層目錄（即Sublime Text 3目錄）

再打開Installed Packages目錄

點擊下載Package Control.sublime-package並複製到以下圖中的Installed Packages目錄

最後重啓Sublime Text 3

 

 

Package Control使用方法/安裝Emmet插件

下面將以安裝Emmet插件爲例，同時介紹如何使用Package Control插件

在Sublime Text 3中按下快捷鍵Ctrl+Shift+P

在出現的文本框中輸入Install Package(或直接輸入「ip」)選中Install Package並回車

（可能須要等待幾秒鐘，在此過程當中不能進行任何鼠標/鍵盤操做）

輸入或選擇你須要的插件再按Enter（回車）就能夠安裝插件了（下圖以安裝Emmet插件爲例）

在安裝過程當中，左下角會顯示正在安裝的提示，靜候片刻

若安裝成功，相應的，左下角會出現安裝成功的提示

下文中全部介紹的插件都可使用此方式安裝

---

若因爲網絡等緣由，您發現沒法按照以上介紹的方式成功安裝，也不用擔憂

本文介紹的全部插件，都能經過在GitHub上下載Zip包的方式手動安裝，具體方法以下

點擊本文中介紹每款插件的「大標題」，便可進入該插件GitHub頁面

如上圖，點擊頁面右下角的「Download ZIP」按鈕，便可下載相應插件的Zip包

而後，在Sublime Text 3中點擊菜單Preferences->Browse Packages...

能夠看到，出現了一個文件夾窗口，將下載的Zip包「解壓」後複製到該文件夾內便可

 

 

Emmet插件

Emmet插件能夠說是使用Sublime Text進行前端開發必不可少的插件

它讓編寫HTML代碼變得極其簡單高效

基本用法：輸入標籤簡寫形式，而後按Tab鍵

關於Emmet的更多介紹，請查看官方文檔

這份速查表，能夠幫你快速記憶簡寫形式

 

JsFormat插件

這是一款將JS格式化的插件

一樣使用Package Control安裝JsFormat插件後

便可在JS文件中經過鼠標右鍵->JsFormat或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

使用效果以下圖

 

 

SideBarEnhancements插件

SideBarEnhancements是一款很實用的右鍵菜單加強插件

在安裝該插件前，在Sublime Text左側FOLDERS欄中點擊右鍵

只有寥寥幾個簡單的功能

經過Package Control安裝SideBarEnhancements插件後

能夠看到，文件夾欄右鍵菜單立刻加強很多

安裝此插件後配置方法爲

重啓Sublime text 3後

打開任意一個JS文件，按ctrl+shift+space

這時候第一次運行會去下載對應的類庫

能夠按ctrl+`（也就是調出控制檯）來看進度

 

 

TrailingSpaces插件

有時候，在代碼結尾打多了幾個空格或Tab

並無任何顯示效果

TrailingSpaces這款插件能高亮顯示多餘的空格和Tab

 

 

 

Tag插件

這是HTML/XML標籤縮進、補全、排版和校驗工具

安裝該插件後，能夠如上圖方式使用Tag插件對HTML/XML進行自動排版等操做

目前樓主未能發現該操做快捷方式，若您有所發現，望留言點撥

 

 

Terminal插件

在編程過程當中，咱們常常須要使用到命令行窗口

Terminal插件能夠容許在Sublime Text 3中打開cmd命令窗口

安裝好該插件後

便可使用快捷鍵Ctrl+Shift+T呼出命令行窗口

 

 

SublimeCodeIntel插件

這是一款代碼提示插件，支持多種編程語言

該插件安裝時間可能相對較長

更特別的是，安裝該插件後須要根據您使用的編程語言進行配置

本部分將以配置JavaScript語言的代碼提示功能爲例

安裝該插件後，點擊Preferences->Browse Packages...菜單

進入SublimeCodeIntel文件夾

再進入.codeintel文件夾

將其中文件名爲config的文件拖動到Sublime Text 3中

你會看到大概以下圖的代碼

將如下代碼複製後粘貼到Config文件中

//注意上下文須要添加的逗號
"JavaScript":{
	"javascriptExtraPaths":[]
}

複製粘貼後的效果以下圖

保存後關閉config文件

這樣，在編寫JavaScript時便可得到代碼提示，以下圖示

 

 

CssComb插件

CssComb是爲CSS屬性進行排序和格式化插件 [官網]

使用Package Control安裝CssComb插件後，你可能發現它並不能運行

它依賴於Node.js [官網]

若您的計算機已安裝過NodeJS環境，可跳過此步驟

若您的計算機中還沒有安裝過Node.js環境

應該到Node.js官網中 [下載] 並安裝相應版本的Node.js，以下圖示

安裝NodeJS後，便可使用CssComb插件

使用方法：菜單Tools->Run CSScomb或在CSS文件中按快捷鍵Ctrl+Shift+C

使用前，CSS可能雜亂無章

使用後，CSS屬性按照做用類別出現

還能夠選中一部分CSS代碼進行排序

使用前，選中須要排序的CSS代碼

使用後，選中部分代碼已排好序

美中不足的是，CssComb彷佛不支持IE hark

 

 

Autoprefixer插件

這是一款CSS3私有前綴自動補全插件

該插件使用CanIUse資料庫，能精準判斷哪些屬性須要什麼前綴

與CssComb插件同樣，該插件也須要系統已安裝Node.js環境

使用方法：在輸入CSS3屬性後（冒號前）按Tab鍵，以下圖示

 

 

文章來源： http://www.cnblogs.com/hykun/p/sublimeText3.html