一、安裝Package Control插件
在安裝插件之前,需要讓sublime安裝Package Control。
使用Ctrl+`(Esc鍵下方)快捷鍵或者通過View->Show Console菜單打開指令行,将以下代碼複制後粘貼到控制台中,然後按Enter(回車),稍等片刻
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)
如果安裝成功,就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單。
若不能通過以上方式成功安裝,可嘗試以下方式手動安裝:
1.點選Preferences->Browse Packages…菜單
2.進入打開的目錄的上層目錄(即Sublime Text 3目錄)
3.再打開Installed Packages目錄
4.點選下載下傳Package Control.sublime-package并複制到Installed Packages目錄
5.重新開機Sublime Text 3
二、安裝Emmet(示例)插件
在Sublime Text 3中按下快捷鍵Ctrl+Shift+P
在出現的文本框中輸入Install Package(或直接輸入“ip”)選中Install Package并回車(可能需要等待幾秒鐘,在此過程中不能進行任何滑鼠/鍵盤操作)
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cGcq5yN1YzN0gTY2EWY2AzNyYDZyYzXyQzNzETM5EzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.jpg)
輸入或選擇你需要的插件再按Enter(回車)就可以安裝插件了(下圖以安裝Emmet插件為例)
在安裝過程中,左下角會顯示正在安裝的提示,靜候片刻
正在安裝的提示
若安裝成功,相應的,左下角會出現安裝成功的提示
三、常用前端插件
emmet
前端神器。一個可以極大提高web開發者HTML和CSS工作效率的工具箱元件。
CSS3
CSS3文法高亮、CSS文法提示,美中不足的是缺少遊覽器私有屬性高亮。
CSS Extended Completions
關聯CSS檔案,智能提示css檔案中的類名,非常好用。
JavaScript Completions
支援javascript原生文法提示,媽媽再也不用擔心我輸入document.getElementById(id)。
jQuery
為jQuery的大部分方法提供了示例代碼段,讓jQuery的API更加容易使用。
ColorHighlighter
它可以展示你所選擇的顔色代碼(像“#FFFFFF”, “rgb(255,255,255)”, “white”)的真正顔色。同時它還包含一個顔色選擇器讓你可以友善地更改顔色。
BracketHighlighter
括号以及标簽層級顯示,不用擔心選中的代碼屬于哪個代碼塊,一目了然。
高亮顯示[], (), {}, “”, ”, 符号,便于檢視起始和結束标記
HTML-CSS-JS Prettify
THML、CSS、JS代碼格式化,壓縮過後的代碼可以通過該工具複原。
AlignTab
使用正規表達式來幫助代碼對齊,比如幾行代碼以=号對齊。
AutoFileName
快速列出想要引用的檔案夾裡所有檔案的名字。
ColorPicker
如果你經常要檢視或設定顔色值,這個插件可以很友善地調用你本機的調色闆應用。(譯者擴充:)這是一個雙向的功能,你既可以在調色闆中選擇一個顔色,然後按“确定”按鈕把該值填寫到 SublimeText 中活動文檔的目前位置,也可以在活動文檔中選擇一個顔色的值,按此插件的快捷鍵就會在顯示的調色闆中定位到該值所對應的顔色。
JsFormat
可以自動幫助你格式化JavaScript代碼,形成一種通用的格式,比如對壓縮、空格、換行的js代碼進行整理,使得js代碼結構清晰,易于觀看。在已壓縮的JS檔案中,右鍵選擇jsFormat或者使用預設快捷鍵(Ctrl+Alt+F)
DocBlockr
可以快速生成各種注釋格式,當需要生成注釋符号時,輸入/*、/然後回車系統即幫你自動生成,如果/後面剛好是一個函數的定義,注釋格式會根據函數的參數生成。
Sidebar Enhancements
增強側欄檔案右鍵功能。
sublimeCodeIntel
JS代碼自動補全,支援多種語言的自動補全。
SideBarEnhancements
一款很實用的右鍵菜單增強插件
TrailingSpaces
能高亮顯示多餘的空格和Tab
Terminal
可以允許在Sublime Text 3中打開cmd指令視窗
安裝好該插件後即可使用快捷鍵Ctrl+Shift+T呼出指令行視窗
Autoprefixer
CSS3私有字首自動補全
在輸入CSS3屬性後(冒号前)按Tab鍵即可
vue syntax hightlight