sublime text3好用的插件

1.安裝package control

sublime text3 的安裝方法，ctrl+`，調出控制檯輸入

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())

sublime text2 的安裝方法，ctrl+`，調出控制檯輸入

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')

在此，要說一下，sublime text3 3126及以上版本簡化了安裝package control的方式，直接在菜單欄中，tool -> Install Package Control,就能夠了！！！

2.接下來，用Package Control安裝插件

1.ctrl+shift+p 調出命令面板

 

2.點擊紅框中的那一欄，出現下圖

在搜索框中輸入你想要安裝的插件名，回車就開始安裝了

3.接下來就但是介紹好用的插件了

1. Emmet 

emmet是書寫html補全標籤的利器，好比：打入div，而後按tab鍵，自動變成<div></div>

推薦幾個書寫方式

1）

按下tab鍵

2）

按下tab後

3）

4）

 應該還有別的寫法吧，我目前經常使用的就這些了

2. css format 整理css代碼的插件

安裝後，打開一個css文檔

而後右鍵

　　點擊expanded後效果以下圖

其餘的能夠本身試下效果

3. Bracket Highlighter

相似於代碼匹配，能夠匹配括號，引號等符號內的範圍。

 4. TrailingSpaces 高亮顯示多餘空格

Ctrl+alt+d 刪除多餘的空格
設置方式：首選項（Preferences ）——按鍵綁定（）——用戶（user）

ctrl+alt+d刪除多餘空格，ctrl+alt+o多餘空格的顯示與隱藏（但不會刪除）

5. Alignment

代碼對齊，所選中行都會左對齊，ctrl+alt+a

6. Tag

html格式化，ctrl+alt+f觸發

7. Autoprefixer插件

這是一款CSS3私有前綴自動補全插件，該插件使用CanIUse資料庫，能精準判斷哪些屬性須要什麼前綴，該插件須要系統已安裝Node.js環境。使用方法：在輸入CSS3屬性後（冒號前）按Tab鍵

8. SideBarEnhancements

側欄右鍵功能加強，很實用，加強後效果以下圖

 

9. TortoiseSvn

svn工具，安裝後側欄右鍵增長svn工具，就像上面的截圖同樣，開始有svnupdate等工具，這樣就能夠直接在側欄操做svn了，不用到文件夾裏.

安裝完成後，可能會發如今側欄用svn的commit等功能報錯，這是由於咱們要配置下調用軟件的路徑，打開配置文件

輸入下面配置代碼

{
	// Auto close update dialog when no errors, conflicts and merges
	"autoCloseUpdateDialog": false,
	"tortoiseproc_path": "E:\\Program Files\\TortoiseSVN\\bin\\TortoiseProc.exe"
}

　以下，特別提醒，tortoiseproc_path那裏配置的是你本機TortoiseSvn的安裝目錄

 

10. AutoFileName

功能：快捷輸入文件名

簡介：自動完成文件名的輸入，如圖片選取

使用：輸入」/」便可看到相對於本項目文件夾的其餘文件

對於選取路徑很好用

11. IMESupport

功能：sublime中文輸入法隨着光標位置

簡介：目前只支持 Windows，在搜索等界面不能很好的跟隨光標。

使用：Ctrl + Shift + P →輸入pci →輸入IMESupport →回車

12. FileDiffs

功能：強大的比較代碼不一樣工具

簡介：比較當前文件與選中的代碼、剪切板中代碼、另外一文件、未保存文件之間的差異。可配置爲顯示差異在外部比較工具，精確到行。

使用：右鍵標籤頁，出現FileDiffs Menu,Diffs with clipboard或者Diff with previous選擇對應文件比較便可

13. AdvancedNewFile

快捷鍵：ctrl+alt+n

　　　　在輸入框中輸入新建的文件便可以，例如我如今項目目錄以下

 

我要在css文件夾中新建一個one.css文件

輸完後回車，就建好了

 14. GitGutter

簡介：連同了git的項目，當編輯裏面的文件是，會指示代碼中插入、修改、刪除的地方

 15. HtmlBeauty

美化html文件的插件，使用方式：ctrl+shift+p調出控制檯，輸入html beauty，回車便可

 16. Less

sublime自己是沒有less格式的，因此當你編輯less的時候，文檔就會是灰色的，加上這個插件，你的less代碼就會出現不一樣顏色，便於區分和編輯

17. Sass

同上面的less原理相同

18. ColorPicker

選擇顏色的插件，當你須要顏色框的時候能夠用，快捷鍵：ctrl+shift+c

 

 19. ConvertToUTF8

功能：文件轉碼成utf-8

簡介：經過本插件，你能夠編輯並保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同時支持 Sublime Text 2 和 3。

20. MarkDownEditing

SublimeText能夠查看和編輯 Markdown 文件，但它會視它們爲格式很糟糕的純文本。這個插件會有適當的顏色高亮和其它功能來有更好的體驗

21. MarkDown Preview

在瀏覽器中瀏覽markdown文件的插件，安裝完成後，按照下圖順序，打開紅色框中的文件

{
　　"browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
        // "瀏覽markdown的瀏覽器的路徑，注意是你本身的路徑，不要都copy這裏的，可能不對"
}    

　　

而後把上面的代碼加入到打開的文件中

22. SublimeCodeIntel

它的功能是代碼提示，支持這些語言 :JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django,HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

這個插件的安裝過程有點慢，請耐心等待

配置：選擇Preferences->Package Settings->SublimeCodeIntel->Setting Default，將裏面的內容所有複製到Setting User中 . 按ctrl+F搜索codeintel_selected_catalogs，將其內容改成:

"codeintel_selected_catalogs": [
  "HTML5", "HTML", "JavaScript"
],

　　這樣，當你再編輯html的時候，你打入d就會提示div了，以此類推，在js中，你打入get，就會出現getElementById等一系類東西

 23. zz File Icons 或者 A File icon

功能：給文件添加上不一樣的圖標標識。放上一張安裝後的效果圖

24. jsFormat

功能：格式化js的插件

使用：ctrl+shift+p 調出控制檯，輸入Format，就會出現Format：javascript 這樣一行，回車便可

擴展：怎麼用jsFormat插件 去格式化.jsx格式的文件呢，方法以下：

設置（Preferences）->Package Setting->jsFormat->Setting User,進入該文件後，輸入下面一行

{
    "e4x":true,
    "format_on_save":true,
}

 　25. HTML-CSS-JS Prettify

　　功能：美化html,css,js文件

　　快捷鍵：ctrl+shift+h