實用的sublime插件集合 – sublime推薦必備插件
插件介紹
原來Subl3安裝Package Control很麻煩,現在簡單的方法來了
一、簡單的安裝方法
使用 Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行,粘貼如下代碼:
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())
如果順利的話,此時就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單了。
順便貼下Sublime Text2 的代碼:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp)else None; 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')
二、手動安裝
可能由於各種原因,無法使用代碼安裝,那可以通過以下步驟手動安裝Package Control:
1.點擊Preferences > Browse Packages菜單
2.進入打開的目錄的上層目錄,然后再進入Installed Packages/目錄
3.下載Package Control.sublime-package並復制到Installed Packages/目錄(地址:https://sublime.wbond.net/Package%20Control.sublime-package)
4.重啟Sublime Text。
Emmet
功能:編碼快捷鍵,前端必備
簡介:Emmet作為zen coding的升級版,對於前端來說,可是必備插件,如果你對它還不太熟悉,可以在其官網(
)上看下具體的演示視頻。使用:教程-
、
(安裝方法:
點擊菜單Preference-->Package Control
點擊Install Package
等待幾秒后再彈出如下內容,敲鍵盤emmet,選擇如下:
在 Emmet 安裝完成后,會顯示如下屏幕:然后會自動安裝PyV8,安裝完成,重啟 Sublime Text 3。
測試:
重啟之后還會看到左下角再次呈現 Loading PyV8 的提示,待其載入完畢,打開一個新文檔最后測試,輸入指令(不行就再重啟一下)
ul#test>li*4
按Ctrl+e 生成---
<ul id="test"> <li></li> <li></li> <li></li> <li></li> </ul>
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。
其他設置如快捷鍵請參考:
Clipboard History
功能:粘貼板歷史記錄
簡介:方便使用復制/剪切的內容
使用:
Bracket Highlighter
功能:代碼匹配
簡介:可匹配[], (), {}, “”, ”, <tag></tag>,高亮標記,便於查看起始和結束標記
使用:點擊對應代碼即可
Git
功能:git管理
簡介:插件基本上實現了git的所有功能
使用:
jQuery
功能:jQ函數提示
簡介:快捷輸入jQ函數,是偷懶的好方法
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代碼提示
教程:
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。
使用:
GitGutter
簡介:指示代碼中插入、修改、刪除的地方
后續
還有
、 、 等插件,先就介紹這么多,弄配圖加翻譯測試挺辛苦的,如果覺得不錯,可以選擇分享或者點擊底部中間的小工具收藏此文章。后續會有更新~