sublime3 插件


Sublime Text 3能用支持的插件推薦

 

從二月份用測試版本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版本的插件,不要下載錯了插件版本。

 

本文轉自http://dengo.org/archives/923


免責聲明!

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



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