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...菜單

Browse Packages菜單

進入打開的目錄的上層目錄(即Sublime Text 3目錄)

上層目錄

再打開Installed Packages目錄

Installed Packages目錄

點擊下載Package Control.sublime-package並復制到如下圖中的Installed Packages目錄

復制到Installed Packages目錄

最后重啟Sublime Text 3

 

 

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

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

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

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

(可能需要等待幾秒鍾,在此過程中不能進行任何鼠標/鍵盤操作)

呼出Install Package

輸入或選擇你需要的插件再按Enter(回車)就可以安裝插件了(下圖以安裝Emmet插件為例)

安裝Emmet示例

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

正在安裝的提示

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

安裝成功的提示

下文中所有介紹的插件均可使用此方式安裝


若由於網絡等原因,您發現無法按照以上介紹的方式成功安裝,也不用擔心

本文介紹的所有插件,都能通過在GitHub上下載Zip包的方式手動安裝,具體方法如下

點擊本文中介紹每款插件的“大標題”,即可進入該插件GitHub頁面

GitHub下載Zip包示例

如上圖,點擊頁面右下角的“Download ZIP”按鈕,即可下載相應插件的Zip包

然后,在Sublime Text 3中點擊菜單Preferences->Browse Packages...

Browse Packages菜單

可以看到,出現了一個文件夾窗口,將下載的Zip包“解壓”后復制到該文件夾內即可

 

 

Emmet插件

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

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

Emmet示例

基本用法:輸入標簽簡寫形式,然后按Tab鍵

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

這份速查表,可以幫你快速記憶簡寫形式

 

JsFormat插件

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

同樣使用Package Control安裝JsFormat插件后

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

鼠標右鍵使用JsFormat

使用效果如下圖

JsFormat使用效果
 
 

SideBarEnhancements插件

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

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

只有寥寥幾個簡單的功能

安裝SideBarEnhancements前的文件夾右鍵菜單

通過Package Control安裝SideBarEnhancements插件后

安裝SideBarEnhancements后的文件夾右鍵菜單

可以看到,文件夾欄右鍵菜單馬上增強不少

安裝此插件后配置方法為

重啟Sublime text 3后

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

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

可以按ctrl+`(也就是調出控制台)來看進度

 

 

TrailingSpaces插件

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

並沒有任何顯示效果

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

TrailingSpaces插件效果
 
 
 

Tag插件

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

Tag插件使用方式

安裝該插件后,可以如上圖方式使用Tag插件對HTML/XML進行自動排版等操作

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

 

 

Terminal插件

在編程過程中,我們經常需要使用到命令行窗口

Terminal插件可以允許在Sublime Text 3中打開cmd命令窗口

安裝好該插件后

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

 

 

SublimeCodeIntel插件

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

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

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

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

安裝該插件后,點擊Preferences->Browse Packages...菜單

Browse Packages菜單

進入SublimeCodeIntel文件夾

SublimeCodeIntel文件夾

再進入.codeintel文件夾

.codeintel文件夾

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

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

config文件代碼

將以下代碼復制后粘貼到Config文件中

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

復制粘貼后的效果如下圖

已完成修該的Config文件

保存后關閉config文件

這樣,在編寫JavaScript時即可獲得代碼提示,如下圖示

JavaScript代碼提示示例
 
 

CssComb插件

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

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

它依賴於Node.js [官網]

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

若您的計算機中尚未安裝過Node.js環境

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

安裝Node.Js示例

安裝NodeJS后,即可使用CssComb插件

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

使用前,CSS可能雜亂無章

使用CssComb插件前的CSS代碼

使用后,CSS屬性按照作用類別出現

使用CssComb插件后的CSS代碼

還可以選中一部分CSS代碼進行排序

使用前,選中需要排序的CSS代碼

使用CssComb插件前的CSS代碼2

使用后,選中部分代碼已排好序

使用CssComb插件后的CSS代碼2

美中不足的是,CssComb似乎不支持IE hark

 

 

Autoprefixer插件

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

該插件使用CanIUse資料庫,能精准判斷哪些屬性需要什么前綴

與CssComb插件一樣,該插件也需要系統已安裝Node.js環境

使用方法:在輸入CSS3屬性后(冒號前)按Tab鍵,如下圖示

Autoprefixer插件使用示例
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM