從二月份用測試版本build 3012開始用sublime text 3,雖然很多外掛在sublime text 3不工作了,因為sublime text 3修復了2的一些bug、提升了效能並整合了不少常用外掛的功能,當時沒什麼要求夠用了,就這樣傻傻地裸外掛空手寫程式碼用了快5個月。上月27號Sublime Text 3公測了,又可以試用了,估計外掛的更新也差不多了吧,果斷上github逛逛看看有沒有sublime text 3能用的外掛,經過幾天折騰和試用,感覺不錯,推薦給大家,各位就擇你所好而用之。
Package control 外掛管理
sublime text非常強大的外掛管理的外掛,按下Ctrl+Shift+P,輸Package control就可以選擇外掛的安裝、管理、刪除等操作,因為sublime text 3的外掛需要基於pyhone 3編寫,所以用sublime text 2的安裝方法不管用,可以看看我之前寫的一篇文章,Sublime text 3如何安裝package control辦法。
此外,安裝sublime text 3的外掛還可以在github上下載原始檔,解壓後改名放到
C:\Users\Mr.DenGo(你的電腦名)\AppData\Roaming\Sublime Text 3\Packages 中
重啟sublime text 3即可生效。
BracketHighlighter 高亮顯示匹配的括號、引號和標籤
BracketHighlighter這個外掛能在左側高亮顯示匹配的括號、引號和標籤,能匹配的 []
, ()
, {}
, ""
, ''
, <tag></tag>等甚至是自定義的標籤,當看到密密麻麻的程式碼分不清標籤之間包容巢狀的關係時,這款外掛就能很好地幫你理清楚程式碼結構,快速定位括號,引號和標籤內的範圍。
外掛下載:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3
TrailingSpacer 高亮顯示多餘的空格和Tab
有時候在程式碼結尾打多了幾個空格或Tab,一般不會察覺,TrailingSpacer這款外掛能高亮顯示多餘的空格和Tab,並可以一鍵刪除它們,有程式碼潔癖的朋友應該會喜歡這個外掛。
外掛下載:https://github.com/SublimeText/TrailingSpaces
注意,在github上下載的外掛缺少了一個設定快捷鍵的檔案,可以新建一個名字和字尾為Default (Windows).sublime-keymap的檔案,新增以下程式碼,即可設定“刪除多餘空格”和“是否開啟TrailingSpacer ”的快捷鍵了。
1 2 3 4 5 |
[ { "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" }, { "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" } ] |
Alignment 等號對齊
按Ctrl+Alt+A,可以將凌亂的程式碼以等號為準左右對其,適合有程式碼潔癖的朋友。
外掛下載:https://github.com/kevinsperrine/sublime_alignment/tree/python3
Clipboard-history 貼上板歷史記錄
有了這個外掛,便可方便使用sublime text 3裡的貼上板歷史記錄內容,快捷鍵Ctrl+Shift+V可調出該歷史記錄皮膚,按方向鍵選擇想要貼上的歷史記錄。不過這是sublime text 2下的外掛,Ctrl+Shift+D清除貼上板歷史記錄好像不能生效,不過重啟sublime也可清除貼上板的歷史記錄。
外掛下載:https://github.com/kemayo/sublime-text-2-clipboard-history
gbk4subl 支援GBK編碼
sublime text一個遺憾是不支援中文GBK編碼,在編輯一些GBK編碼的檔案時就會出現亂碼,還好sublime text 2有很多可以支援GBK編碼的外掛,可惜大多在sublime text 3下都不能工作,在github找了下,還好還有gbk4subl這款能讓sublime text 3支援GBK編碼的外掛。
外掛下載:https://github.com/jeewood/gbk4subl
Tradsim 中文繁字型和簡體字轉換
Tradsim是一款能把中文的繁字型和簡體字互相轉換的外掛,只支援UTF-8編碼,雖然覺得有點雞肋,但還是介紹出來給需要的朋友吧,安裝外掛,因為外掛包裡沒快捷鍵檔案,所以我們可以自定義一個,可以新建一個名字和字尾為Default (Windows).sublime-keymap的檔案,新增以下程式碼,即可設定“轉換為簡體字”和“轉換為繁字型 ”的快捷鍵了。注意:轉換是檔案裡全域性的中文。
1 2 3 4 5 |
[ {"keys": ["ctrl+alt+s"], "command": "tradsim_to_sim"}, {"keys": ["ctrl+alt+t"], "command": "tradsim_to_trad"} ] |
SideBarEnhancements 側邊欄增強
SideBarEnhancements本是增強側邊欄的外掛,這裡將教大家如何用來做sublime text 3瀏覽器預覽外掛,並可自定義瀏覽器預覽的快捷鍵。
安裝此外掛,點選工具欄的preferences > package setting > side bar > Key Building-User,鍵入以下程式碼,這裡設定按Ctrl+Shift+C複製檔案路徑,按F1~F5分別在firefox,chrome,IE,safari,opera瀏覽器預覽效果,當然你也可以自己定義喜歡的快捷鍵,最後注意程式碼中的瀏覽器路徑要以自己電腦裡的檔案路徑為準。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //firefox { "keys": ["f1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe", "extensions":".*" //匹配任何檔案型別 } }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe", "extensions":".*" } }, //ie { "keys": ["f3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe", "extensions":".*" } }, //safari { "keys": ["f4"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\software\\Browser\\Safari\\safari.exe", "extensions":".*" } }, //opera { "keys": ["f5"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\software\\Browser\\opera\\opera.exe", "extensions":".*" } } ] |
ColorPicker 調色盤
在編輯CSS樣式的時候,要加個自己喜歡顏色或改改顏色啥的,要到PS裡去調色?ColorPicker可以讓sublime text 3內建一個調色盤,調好顏色,點選OK就會在游標處生成十六進位制顏色程式碼。
外掛下載:https://github.com/weslly/ColorPicker
Hex-to-HSL-Color Hex顏色模式轉HSL顏色模式
在用CSS3的一些屬性時會用到HSL顏色模式,用軟體轉來轉去確實麻煩,用Hex-to-HSL-Color這個外掛便可輕鬆解決,滑鼠選中一個或多個十六進位制顏色程式碼,按下Shift+Ctrl+U立馬轉換為HSL顏色模式。
外掛下載:https://github.com/atadams/Hex-to-HSL-Color
CSScomb CSS屬性排序
有時候看看自己寫的CSS檔案,會不會覺得屬性很亂查詢不易維護難?CSScomb可以按照一定的CSS屬性排序規則,將雜亂無章的CSS屬性進行重新排序。選中要排序的CSS程式碼,按Ctrl+Shift+C,即可對CSS屬性重新排序了,程式碼從此簡潔有序易維護,如果不款選程式碼則外掛將排序檔案中所有的CSS屬性。當然,可以自己自定義CSS屬性排序規則,開啟外掛目錄裡的CSScomb.sublime-settings檔案,更改裡面的CSS屬性順序就行了。因為這個外掛使用PHP寫的,要使他工作需要在環境變數中新增PHP的路徑,具體請看github上的說明。
外掛下載:https://github.com/csscomb/CSScomb-for-Sublime
CSS Compact Expand CSS屬性展開收縮
每個人寫CSS都有不同的風格,有些人喜歡寫成一行,有些人喜歡寫成多行,各有各的好處,我倒喜歡將CSS寫成一行,這樣能減少CSS檔案大小,且螢幕能顯示更多的Class方便查詢。如果閱讀別人的程式碼不符合自己的習慣,可以用CSS Compact Expand這個外掛將CSS格式化一下,按 Ctrl+Alt+[ 收縮CSS程式碼為一行顯示,按 Ctrl+Alt+] 展開CSS程式碼為多行顯示,此外掛由sublime textQQ群裡一個牛人封裝。
外掛下載:http://pan.baidu.com/share/link?shareid=251331&uk=590661480&third=15
JsFormat javascript格式化
有時從網上扒了人家的js程式碼來學習學習,開啟發現被壓縮了,這時就可以用JsFormat外掛格式化js程式碼,恢復未壓縮時候的排版,挺給力的。按快捷鍵Ctrl+Alt+F即可格式化當前的js檔案了。
外掛下載:https://github.com/jdc0589/JsFormat
javascript-API-Completions
支援Javascript、JQuery、Twitter Bootstrap框架、HTML5標籤屬性提示的外掛,是少數支援sublime text 3的字尾提示的外掛,HTML5標籤提示sublime text 3自帶,不過JQuery提示還是很有用處的,也可設定要提示的語言。
外掛下載:https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions
SublimeTmpl 快速生成檔案模板
一直都很奇怪為什麼sublime text 3沒有新建檔案模板的功能,像html頭部的DTD宣告每次都要複製貼上。用SublimeTmpl這款外掛終於可以解脫了,SublimeTmpl能新建html、css、javascript、php、python、ruby六種型別的檔案模板,所有的檔案模板都在外掛目錄的templates資料夾裡,可以自定義編輯檔案模板。
SublimeTmpl預設的快捷鍵
1 2 3 4 5 6 |
ctrl+alt+h html ctrl+alt+j javascript ctrl+alt+c css ctrl+alt+p php ctrl+alt+r ruby ctrl+alt+shift+p python |
如果想要新建其他型別的檔案模板的話,先自定義檔案模板方在templates資料夾裡,再分別開啟Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個檔案照著裡面的格式自定義想要新建的型別,這裡就詳細介紹了,請各位自己折騰哈~
外掛下載:https://github.com/kairyou/SublimeTmpl
Emmet html/CSS快速編輯(原名Zen Coding)
Zen Coding估計大家都不會陌生,前不久改名為Emmet了,雖然用Emmet編輯html很快,但是要用好用快它需要付出不小的學習成本,學習的曲線有點陡峭,以至於讓新手好奇而畏懼,我看看熱鬧就行了,感覺編輯得再快思維跟不上也是白搭,對我來說sublime text 3自帶的程式碼提示夠用了。網上有很多教學視訊,有興趣學習的可以去了解下。
外掛下載:https://github.com/sergeche/emmet-sublime
sublimeLinter 程式碼錯誤提示
好話寫在前面:sublimeLinter是少數幾個能在sublime text 3工作的程式碼檢查外掛,sublimeLinter能檢查html、css、javascript、php等眾多語言的錯誤程式碼並給出提示,前提是需要配置相應語言的環境,要檢查js程式碼需要安裝node.js,檢查php程式碼需要安裝php並配置環境等,用這個外掛能及時幫我們糾正程式碼的錯誤,並培養我們良好的編碼習慣和風格。
醜話說在後面:對這貨“強制性”的程式碼風格檢查有點不爽,有意義無意義的程式碼提示經常打亂我敲程式碼的節奏,並且在後臺執行檢查機制造成sublime text 3有點小卡頓,雖然部分問題可以設定sublimeLinter來解決,用了sublimeLinter一小段時間後還是放棄了,覺得程式碼提示對我應該沒必要了。
外掛下載:https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3
以上外掛只是個人覺得好用,各位就擇你所好而用之,在win8下sublime text 3中測試工作正常,點選這裡還可以檢視更多sublime text 3支援的外掛。細心的朋友也發現很多外掛的快捷鍵重疊了,各位就依自己所好設定就行了。最後注意的是在github上下載外掛時先看看外掛有沒有明確說明支援sublime text3,如果沒有看看branch分支有沒有st3版本的外掛,不要下載錯了外掛版本。