登錄 / 注冊(cè)

sublime text常用插件

0評(píng)論 2017-05-05 13:52:02

收藏 | 點(diǎn)贊

  

   SublimeText是一款非常精巧的文本編輯器,適合編寫(xiě)代碼、做筆記、寫(xiě)文章。它用戶界面十分整潔,功能非同凡響,性能快得出奇。這些非常棒的特性 包括任意跳轉(zhuǎn)(Goto Anything)、多重選擇(multiple selections)、指令面板(command palette)、免打擾模式(distraction free mode)、分區(qū)編輯(split editing)、快速項(xiàng)目切換(instant project switch),你還可以隨意地自定義更多功能。還有,這款編輯器支持Mac、Windows和Linux平臺(tái)。

   SublimeText本身已經(jīng)非常強(qiáng)大,但是更棒的是有一長(zhǎng)串的插件支持它,給它帶來(lái)更強(qiáng)大的功能。本文將介紹一些 Sublime Text 3 支持的熱門插件。

 

一、sublime text插件的安裝方法有兩個(gè):直接安裝和插件管理安裝。

  ① 直接安裝,將下載的安裝包解壓縮到Packages目錄(菜單->preferences->packages);

  ② Package Control組件安裝。用Package Control安裝插件的方法:

   按下Ctrl+Shift+P調(diào)出命令面板,輸入install, 調(diào)出 Install Package 選項(xiàng)并回車,然后在列表中選中要安裝的插件。

   有的網(wǎng)絡(luò)環(huán)境可能會(huì)不允許訪問(wèn)陌生的網(wǎng)絡(luò)環(huán)境從而設(shè)置防火墻,而Sublime Text 貌似無(wú)法設(shè)置代理,可能就獲取不到安裝包列表了。

二、常用插件

01-Package Control
   提到 Sublime Text,就不得不說(shuō) Package Control,就像 Linux 下的 apt-get 和 yum 一樣,它是 Sublime Text 的包管理器,你用它可以輕松地找到你想要的插件和管理已有插件。

安裝方法:

  1. CTRL+` ,出現(xiàn)控制臺(tái)

  2. 粘貼以下代碼至控制臺(tái)

ST2

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

 

ST3

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)

 

其他方法:

如果以上方法不能安裝,請(qǐng)使用下面的方法

  1. 選擇菜單:Preferences > Browse Packages

  2. 打開(kāi)sublime插件安裝包文件夾

  3. 下載文件并復(fù)制到打開(kāi)的文件夾

  4. 重啟sublime

插件下載:https://github.com/wbond/package_control

02-Emmet

Emmet 是一個(gè)前端開(kāi)發(fā)的利器,其前身是 Zen Coding。它讓編寫(xiě) HTML 代碼變得簡(jiǎn)單。Emmet 的基本用法是:輸入簡(jiǎn)寫(xiě)形式,然后按 Tab 鍵。

編寫(xiě)代碼時(shí)需要遵循一定的縮寫(xiě)規(guī)則:

E元素名(div、p);
E#id帶Id的元素(div#content、p#intro、span#error);
E.class帶class的的元素(div.header、p.error),id和class可以連著寫(xiě),div#content.column
E>N子元素(div>p、div#footer>p>span)
E*N多項(xiàng)元素(ul#nav>li*5>a)
E+N多項(xiàng)元素
E$*N帶序號(hào)的元素

插件下載:https://github.com/sergeche/emmet-sublime

 

03-SublimeTmpl 快速生成文件模板

   SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板,所有的文件模板都在插件目錄的templates文件夾里,可以自定義編輯文件模板。

SublimeTmpl默認(rèn)的快捷鍵

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文件夾里,再分別打開(kāi)Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個(gè)文件照著里面的格式自定義想要新建的類型,這里就不詳細(xì)介紹了,請(qǐng)各位自己折騰哈~

插件下載: https://github.com/kairyou/SublimeTmpl

 

04-BracketHighlighter 高亮顯示匹配的括號(hào)、引號(hào)和標(biāo)簽

   BracketHighlighter這個(gè)插件能在左側(cè)高亮顯示匹配的括號(hào)、引號(hào)和標(biāo)簽,能匹配的 [] ,  () ,  {} ,  "" ,  '' ,  等甚至是自定義的標(biāo)簽,當(dāng)看到密密麻麻的代碼分不清標(biāo)簽之間包容嵌套的關(guān)系時(shí),這款插件就能很好地幫你理清楚代碼結(jié)構(gòu),快速定位括號(hào),引號(hào)和標(biāo)簽內(nèi)的范圍。

插件下載:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

 

05-TrailingSpacer 高亮顯示多余的空格和Tab

   有時(shí)候在代碼結(jié)尾打多了幾個(gè)空格或Tab,一般不會(huì)察覺(jué),TrailingSpacer這款插件能高亮顯示多余的空格和Tab,并可以一鍵刪除它們,有代碼潔癖的朋友應(yīng)該會(huì)喜歡這個(gè)插件。

插件下載:https://github.com/SublimeText/TrailingSpaces

 

   注意,在github上下載的插件缺少了一個(gè)設(shè)置快捷鍵的文件,可以新建一個(gè)名字和后綴為Default (Windows).sublime-keymap的文件,添加以下代碼,即可設(shè)置“刪除多余空格”和“是否開(kāi)啟TrailingSpacer ”的快捷鍵了。

[   

  { "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },    

  { "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" }

]

 

06-Alignment 等號(hào)對(duì)齊

  按Ctrl+Alt+A,可以是凌亂的代碼以等號(hào)為準(zhǔn)左右對(duì)其,適合有代碼潔癖的朋友。

插件下載: https://github.com/wbond/sublime_alignment

 

07-Clipboard-history 粘貼板歷史記錄

    有了這個(gè)插件,便可方便使用sublime text 3里的粘貼板歷史記錄內(nèi)容,快捷鍵Ctrl+Shift+V可調(diào)出該歷史記錄面板,按方向鍵選擇想要粘貼的歷史記錄。不過(guò)這是sublime text 2下的插件,Ctrl+Shift+D清除粘貼板歷史記錄好像不能生效,不過(guò)重啟sublime也可清除粘貼板的歷史記錄。

插件下載: https://github.com/kemayo/sublime-text-2-clipboard-history

 

08-gbk4subl 支持GBK編碼

   sublime text一個(gè)遺憾是不支持中文GBK編碼,在編輯一些GBK編碼的文件時(shí)就會(huì)出現(xiàn)亂碼,還好sublime text 2有很多可以支持GBK編碼的插件,可惜大多在sublime text 3下都不能工作,在github找了下,還好還有g(shù)bk4subl這款能讓sublime text 3支持GBK編碼的插件。

插件下載: https://github.com/jeewood/gbk4subl

 

9-SideBarEnhancements 側(cè)邊欄增強(qiáng)

    SideBarEnhancements本是增強(qiáng)側(cè)邊欄的插件,這里將教大家如何用來(lái)做sublime text 3瀏覽器預(yù)覽插件,并可自定義瀏覽器預(yù)覽的快捷鍵。

   安裝此插件,點(diǎn)擊工具欄的preferences > package setting > side bar > Key Building-User,鍵入以下代碼,這里設(shè)置按Ctrl+Shift+C復(fù)制文件路徑,按F1~F5分別在firefox,chrome,IE,safari,opera瀏覽器預(yù)覽效果,當(dāng)然你也可以自己定義喜歡的快捷鍵,最后注意代碼中的瀏覽器路徑要以自己電腦里的文件路徑為準(zhǔn)。

[   

  { "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":".*"

       }   

    }

]

 

10-ColorPicker 調(diào)色盤(pán)

   在編輯CSS樣式的時(shí)候,要加個(gè)自己喜歡顏色或改改顏色啥的,要到PS里去調(diào)色?ColorPicker可以讓sublime text 3內(nèi)置一個(gè)調(diào)色盤(pán),調(diào)好顏色,點(diǎn)擊OK就會(huì)在光標(biāo)處生成十六進(jìn)制顏色代碼,快捷鍵Windows: ctrl+shift+c。

插件下載: https://github.com/weslly/ColorPicker

 

11-Hex-to-HSL-Color Hex顏色模式轉(zhuǎn)HSL顏色模式

   在用CSS3的一些屬性時(shí)會(huì)用到HSL顏色模式,用軟件轉(zhuǎn)來(lái)轉(zhuǎn)去確實(shí)麻煩,用Hex-to-HSL-Color這個(gè)插件便可輕松解決,鼠標(biāo)選中一個(gè)或多個(gè)十六進(jìn)制顏色代碼,按下Shift+Ctrl+U立馬轉(zhuǎn)換為HSL顏色模式。

插件下載: https://github.com/atadams/Hex-to-HSL-Color

 

12-CSScomb CSS屬性排序

   有時(shí)候看看自己寫(xiě)的CSS文件,會(huì)不會(huì)覺(jué)得屬性很亂查找不易維護(hù)難?CSScomb可以按照一定的CSS屬性排序規(guī)則,將雜亂無(wú)章的CSS屬性進(jìn)行重新排序。選中要排序的CSS代碼,按C trl +S hift + C,即可對(duì)CSS屬性重新排序了,代碼從此簡(jiǎn)潔有序易維護(hù),如果不款選代碼則插件將排序文件中所有的CSS屬性。當(dāng)然,可以自己自定義CSS屬性排序規(guī)則,打開(kāi)插件目錄里的CSScomb.sublime-settings文件,更改里面的CSS屬性順序就行了。

插件下載: https://github.com/csscomb/CSScomb-for-Sublime

 

13-CSS Compact Expand CSS屬性展開(kāi)收縮

   每個(gè)人寫(xiě)CSS都有不同的風(fēng)格,有些人喜歡寫(xiě)成一行,有些人喜歡寫(xiě)成多行,各有各的好處,我倒喜歡將CSS寫(xiě)成一行,這樣能減少CSS文件大小,且屏幕能顯示更多的Class方便查找。如果閱讀別人的代碼不符合自己的習(xí)慣,可以用CSS Compact Expand這個(gè)插件將CSS格式化一下,按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示,按 Ctrl+Alt+] 展開(kāi)CSS代碼為多行顯示,此插件由sublime textQQ群里一個(gè)牛人封裝。

插件下載: http://pan.baidu.com/s/1dDu1jC9

 

14-sublimeLinter 代碼錯(cuò)誤提示

   好話寫(xiě)在前面:sublimeLinter是少數(shù)幾個(gè)能在sublime text 3工作的代碼檢查插件,sublimeLinter能檢查html、css、javascript、php等眾多語(yǔ)言的錯(cuò)誤代碼并給出提示,前提是需要配置相應(yīng)語(yǔ)言的環(huán)境,要檢查js代碼需要安裝node.js,檢查php代碼需要安裝php并配置環(huán)境等,用這個(gè)插件能及時(shí)幫我們糾正代碼的錯(cuò)誤,并培養(yǎng)我們良好的編碼習(xí)慣和風(fēng)格。

 

   丑話說(shuō)在后面:對(duì)這貨“強(qiáng)制性”的代碼風(fēng)格檢查有點(diǎn)不爽,有意義無(wú)意義的代碼提示經(jīng)常打亂我敲代碼的節(jié)奏,并且在后臺(tái)運(yùn)行檢查機(jī)制造成sublime text 3有點(diǎn)小卡頓,雖然部分問(wèn)題可以設(shè)置sublimeLinter來(lái)解決,用了sublimeLinter一小段時(shí)間后還是放棄了,覺(jué)得代碼提示對(duì)我應(yīng)該沒(méi)必要了。

插件下載: https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3

 

15-JSFormat

功能:Javascript的代碼格式化插件

簡(jiǎn)介:很多網(wǎng)站的JS代碼都進(jìn)行了壓縮,一行式的甚至混淆壓縮,這讓我們看起來(lái)很吃力。而這個(gè)插件能幫我們把原始代碼進(jìn)行格式的整理,包括換行和縮進(jìn)等等,是代碼一目了然,更快讀懂~

使用:在已壓縮的JS文件中,右鍵選擇jsFormat或者使用默認(rèn)快捷鍵(Ctrl+Alt+F)

插件下載: https://github.com/jdc0589/JsFormat

 

   以上插件只是個(gè)人覺(jué)得好用,各位就擇你所好而用之,最后注意的是在github上下載插件時(shí)先看看插件有沒(méi)有明確說(shuō)明支持sublime text3,如果沒(méi)有看看branch分支有沒(méi)有st3版本的插件,不要下載錯(cuò)了插件版本。


0 條評(píng)論

分享
公眾號(hào)
公眾號(hào)二維碼

? 2017 志進(jìn)科技 版權(quán)所有 上海志進(jìn)信息科技有限公司 備案號(hào)滬ICP備14017051號(hào)-2