##一些前端程式必備的 Sublime Text 2 Plugins
Alignment
<a href="http://wbond.net/sublime_packages/alignment" target="_blank">http://wbond.net/sublime_packages/alignment</a>
自動對齊選取範圍內 code 的等號。
EX:
var test1 = 123456789
var test10 = 123456
var test100 = 123
var test1000 = 1
↓
var test1 = 123456789
var test10 = 123456
var test100 = 123
var test1000 = 1
【Package Control】
Ctrl+Shift+P→「Package Control:Install Package」→「Alignment」
【熱鍵】
OS X :Cmd+Ctrl+A
Win/Linux:Ctrl+Alt+A
—
All Autocomplete
<a href="https://github.com/alienhard/SublimeAllAutocomplete" target="_blank">https://github.com/alienhard/SublimeAllAutocomplete</a>
在編輯當前的檔案時,提示所有「打開中的檔案」的函數。
Ctrl+Shift+P→「Package Control:Install Package」→「All Autocomplete」
BracketHighlighter
<a href="https://github.com/facelessuser/BracketHighlighter" target="_blank">https://github.com/facelessuser/BracketHighlighter</a>
大括號、中括號、所有括號家族高亮匹配。
Ctrl+Shift+P→「Package Control:Install Package」→「BracketHighlighter」
Browser Refresh
<a href="https://github.com/gcollazo/BrowserRefresh-Sublime" target="_blank">https://github.com/gcollazo/BrowserRefresh-Sublime</a>
重新整理瀏覽器目前開啟的前景頁面。
Ctrl+Shift+P→「Package Control:Install Package」→「Browser Refresh」
OS X :Cmd+Shift+R
Win/Linux:Ctrl+Shift+R
Change Quotes
<a href="https://github.com/colinta/SublimeChangeQuotes" target="_blank">https://github.com/colinta/SublimeChangeQuotes</a>
單引號變雙引號,或反過來。
Ctrl+Shift+P→「Package Control:Install Package」→「Change Quotes」
Clipboard History
<a href="https://github.com/kemayo/sublime-text-2-clipboard-history" target="_blank">https://github.com/kemayo/sublime-text-2-clipboard-history</a>
剪貼簿工具,自動記錄多筆複製的內容。
Ctrl+Shift+P→「Package Control:Install Package」→「Clipboard History」
【熱鍵】打開複製和剪下的記錄面板
OS X :Cmd+Ctrl+Alt+V
Win/Linux:Ctrl+Alt+V
(有裝 Evernote 的話熱鍵會相撞,記得改。)
ColorPicker
<a href="https://github.com/weslly/ColorPicker" target="_blank">https://github.com/weslly/ColorPicker</a>
開啟調色盤選取色碼,或選取色碼看/改顏色。
Ctrl+Shift+P→「Package Control:Install Package」→「ColorPicker」
OS X :super+Shift+C
Win/Linux:Ctrl+Shift+C
Compass
<a href="https://github.com/WhatWeDo/Sublime-Text-2-Compass-Build-System" target="_blank">https://github.com/WhatWeDo/Sublime-Text-2-Compass-Build-System</a>
Ctrl+Shift+P→「Package Control:Install Package」→「Compass」
ConvertToUTF8
<a href="https://github.com/seanliang/ConvertToUTF8" target="_blank">https://github.com/seanliang/ConvertToUTF8</a>
將開啟的檔案編碼自動轉換成 UTF-8,編輯並保存目前編碼不被 Sublime Text 2 支持的檔案,特別是中日韓用戶使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。
Ctrl+Shift+P→「Package Control:Install Package」→「ConvertToUTF8」
DeleteBlankLines
<a href="https://github.com/NicholasBuse/sublime_DeleteBlankLines" target="_blank">https://github.com/NicholasBuse/sublime_DeleteBlankLines</a>
刪除空白行。
Ctrl+Shift+P→「Package Control:Install Package」→「DeleteBlankLines」
【熱鍵】刪除選取範圍內的空白行
OS X :Ctrl+Alt+Delete
Win/Linux:Ctrl+Alt+Backspace
【熱鍵】刪除剩餘的空白行
OS X :Ctrl+Alt+Shift+Delete
Win/Linux:Ctrl+Alt+Shift+Backspace
Emmet
<a href="https://github.com/sergeche/emmet-sublime" target="_blank">https://github.com/sergeche/emmet-sublime</a>
ex-Zen Coding
Ctrl+Shift+P→「Package Control:Install Package」→「Emmet」
Gis
<a href="https://github.com/condemil/Gist" target="_blank">https://github.com/condemil/Gist</a>
方便的進行建立、搜尋插入、更新以及版本控制的代碼片段管理器。
Ctrl+Shift+P→「Package Control:Install Package」→「Gis」
【教學】
<a href="http://lucifr.com/2012/03/07/sublime-text-2-plus-gist-equal-snippet-manager/" target="_blank">http://lucifr.com/2012/03/07/sublime-text-2-plus-gist-equal-snippet-manager/</a>
Goto-CSS-Declaration
<a href="https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration" target="_blank">https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration</a>
跳到所在的 CSS
Ctrl+Shift+P→「Package Control:Install Package」→「Goto-CSS-Declaration」
OS X :Cmd+right/Cmd+left
Win/Linux:win+./win+,
HTML5
<a href="https://github.com/mrmartineau/HTML5" target="_blank">https://github.com/mrmartineau/HTML5</a>
HTML5 提示
Ctrl+Shift+P→「Package Control:Install Package」→「HTML5」
IMESupport
<a href="https://github.com/chikatoike/IMESupport" target="_blank">https://github.com/chikatoike/IMESupport</a>
在 windows 環境下,讓 Sublime Text 2 在輸入中文時,輸入框可以跟隨編輯區的光標位置直接打字。(超級必備!)
Ctrl+Shift+P→「Package Control:Install Package」→「IMESupport」
JsFormat
<a href="https://github.com/jdc0589/JsFormat" target="_blank">https://github.com/jdc0589/JsFormat</a>
將選取範圍內的 javascript 格式化。
Ctrl+Shift+P→「Package Control:Install Package」→「JsFormat」
OS X :Ctrl+Alt+F
Win/Linux:Ctrl+Alt+F
jQuery
<a href="https://github.com/SublimeText/jQuery" target="_blank">https://github.com/SublimeText/jQuery</a>
jQuery 提示
Ctrl+Shift+P→「Package Control:Install Package」→「jQuery」
KeymapManager
<a href="https://github.com/welefen/KeymapManager" target="_blank">https://github.com/welefen/KeymapManager</a>
熱鍵快查,把安裝的 Packages 的熱鍵(Key Bindings – Default)列出來。
Ctrl+Shift+P→「Package Control:Install Package」→「KeymapManager」
OS X :Ctrl+Alt+K
Win/Linux:Ctrl+Alt+K
LoremIpsum
<a href="https://github.com/billymoon/LoremIpsum" target="_blank">https://github.com/billymoon/LoremIpsum</a>
英文假字產生器
Ctrl+Shift+P→「Package Control:Install Package」→「LoremIpsum」
【插入假字】
Edit → Text → Lorem Ipsum…
Markdown Preview
<a href="https://github.com/revolunet/sublimetext-markdown-preview" target="_blank">https://github.com/revolunet/sublimetext-markdown-preview</a>
預覽 Markdown
Ctrl+Shift+P→「Package Control:Install Package」→「Markdown Preview」
【預覽方式】
Ctrl+Shift+P 命令 →
「Markdown Preview: current file in browser」
- 在默認瀏覽器中對當前 Markdown 文件進行預覽。
「Markdown Preview: current file in Sublime Text」
- 在 Sublime Text 2 中產生 HTML 代碼。
Open Folder
<a href="https://github.com/mikepfirrmann/openfolder" target="_blank">https://github.com/mikepfirrmann/openfolder</a>
在 sidebar 的右鍵選單新增「Open Folder」選項,可開啟資料夾或用預設程式開啟圖片等。
Ctrl+Shift+P→「Package Control:Install Package」→「Open Folder」
Open URL
<a href="https://github.com/noahcoad/open-url" target="_blank">https://github.com/noahcoad/open-url</a>
開啟文檔中的網址或本地檔案路徑。
Ctrl+Shift+P→「Package Control:Install Package」→「Open URL」
OS X :Ctrl+U
Win/Linux:Ctrl+U
PlainTasks
<a href="https://github.com/aziz/PlainTasks" target="_blank">https://github.com/aziz/PlainTasks</a>
把 Sublime Text 2 當作工作表來用。
Ctrl+Shift+P→「Package Control:Install Package」→「PlainTasks」
【熱鍵】添加新任務
OS X :Cmd+Enter/Cmd+I
Win/Linux:Ctrl+Enter/Ctrl+I
【熱鍵】將一個任務標記為完成/將一個完成的任務恢復為未完成
OS X :Cmd+D/Cmd+滑鼠左鍵
Win/Linux:Ctrl+D/Ctrl+滑鼠左鍵
【熱鍵】將已完成任務歸檔到文檔結尾的 Archive 項目中
OS X :Cmd+Shift+A
Win/Linux:Ctrl+Shift+A
【熱鍵】插入分隔線 —- ———————————-
OS X :輸入兩個「-」並按下 tab 鍵
Win/Linux:輸入兩個「-」並按下 tab 鍵
【熱鍵】設為標題
OS X :以半形冒號「:」結尾
Win/Linux:以半形冒號「:」結尾
RenameTab
<a href="https://github.com/frozenice-/RenameTab" target="_blank">https://github.com/frozenice-/RenameTab</a>
重新命名當前未存檔的頁籤
Ctrl+Shift+P→「Package Control:Install Package」→「RenameTab」
OS X :Alt+W
Win/Linux:Alt+W
Sass
<a href="https://github.com/nathos/sass-textmate-bundle" target="_blank">https://github.com/nathos/sass-textmate-bundle</a>
SASS 提示、語法高亮
Ctrl+Shift+P→「Package Control:Install Package」→「Sass」
SFTP
<a href="http://wbond.net/sublime_packages/sftp" target="_blank">http://wbond.net/sublime_packages/sftp</a>
就是加上 SFTP 和 FTP 等功能。
Ctrl+Shift+P→「Package Control:Install Package」→「SFTP」
【專案 FTP 設定】
在專案資料夾按右鍵 →「SFTP/FTP」→「Add Remote Mapping…」
{
// sftp 或 ftp
“type”: “ftp”,
//上傳前存檔
“save_before_upload”: true,
//存檔立刻上傳
“upload_on_save”: false,
//開啟時同步遠端到本地
“sync_down_on_open”: false,
//同步時跳過刪除的檔案
“sync_skip_deletes”: false,
//開啟「下載確認」
“confirm_downloads”: false,
//開啟「同步確認」
“confirm_sync”: true,
//開啟「複寫確認」
“confirm_overwrite_newer”: false,
//主機
“host”: “xxx.xxx.xxx.xxx”,
//帳號
“user”: “xxxxxxxx”,
//密碼
“password”: “xxxxxxxx”,
//連接埠
“port”: “21”,
//遠端資料夾路徑
“remote_path”: “/public_html/”,
//略過的檔案或資料夾
“ignore_regexes”: [
”\.sublime-(project|workspace)”, “sftp-config(-Alt\d?)?\.json”,
”sftp-settings\.json”, “/venv/”, “\.svn”, “\.hg”, “\.git”,
“\.bzr”, “_darcs”, “CVS”, “\.DS_Store”,
“Thumbs\.db”, “desktop\.ini”
]
}
【熱鍵】上傳檔案
OS X :Ctrl+Cmd+u+F
Win/Linux:Ctrl+Alt+u+F
【熱鍵】上傳改過的檔案
OS X :Ctrl+Cmd+u+C
Win/Linux:Ctrl+Alt+u+C
【熱鍵】上傳開啟的檔案
OS X :Ctrl+Cmd+U+N
Win/Linux:Ctrl+Alt+U+N
【熱鍵】下載檔案
OS X :Ctrl+Cmd+U+O
Win/Linux:Ctrl+Alt+U+O
【熱鍵】上傳當前檔案所在的資料夾
OS X :Ctrl+Cmd+u+R
Win/Linux:Ctrl+Alt+u+R
【熱鍵】下載當前檔案所在的資料夾
OS X :Ctrl+Cmd+U+E
Win/Linux:Ctrl+Alt+U+E
【熱鍵】diff 遠端檔案
OS X :Ctrl+Cmd+U+I
Win/Linux:Ctrl+Alt+U+I
【熱鍵】同步本地到遠端
OS X :Ctrl+Cmd+U+Y
Win/Linux:Ctrl+Alt+U+Y
【熱鍵】同步遠端到本地
OS X :Ctrl+Cmd+U+D
Win/Linux:Ctrl+Alt+U+D
【熱鍵】雙向同步
OS X :Ctrl+Cmd+U+B
Win/Linux:Ctrl+Alt+U+B
【熱鍵】監視檔案
OS X :Ctrl+Cmd+U+M
Win/Linux:Ctrl+Alt+U+M
【熱鍵】瀏覽遠端
OS X :Ctrl+Cmd+U+W
Win/Linux:Ctrl+Alt+U+W
【熱鍵】設定 Server
OS X :Ctrl+Cmd+R+S
Win/Linux:Ctrl+Alt+R+S
【熱鍵】瀏覽 Server
OS X :Ctrl+Cmd+R+B
Win/Linux:Ctrl+Alt+R+B
【熱鍵】顯示最後一個使用的 Server
OS X :Ctrl+Cmd+R+N
Win/Linux:Ctrl+Alt+R+N
【熱鍵】編輯 Server
OS X :Ctrl+Cmd+R+E
Win/Linux:Ctrl+Alt+R+E
【熱鍵】刪除 Server
OS X :Ctrl+Cmd+R+D
Win/Linux:Ctrl+Alt+R+D
【熱鍵】顯示 SFTP 面板
OS X :Ctrl+Cmd+U+S
Win/Linux:Ctrl+Alt+U+S
【熱鍵】停止
OS X :Ctrl+Cmd+U+X
Win/Linux:Ctrl+Alt+U+X
SideBarEnhancements
<a href="https://github.com/titoBouzout/SideBarEnhancements" target="_blank">https://github.com/titoBouzout/SideBarEnhancements</a>
增強 Sublime Text 2 sidebar 右鍵選單的功能
Ctrl+Shift+P→「Package Control:Install Package」→「SideBarEnhancements」
【編輯專案的網址】
在專案資料夾按右鍵 →「Project」→「Edit Projects Preview URLs」
//專案一路徑
“C:/XXX/XXX/XXX”:{
//測試網址
“url_testing”:”http://testing”,
//正式網址
“url_production”:”http://domain.tld”
},
//專案二路徑
“C:/XXX/XXX/XXX”:{
}
【熱鍵】開啟測試網址
OS X :F12
Win/Linux:F12
【熱鍵】開啟正式網址
OS X :Alt+F12
Win/Linux:Alt+F12
SublimeCodeIntel
<a href="https://github.com/Kronuz/SublimeCodeIntel" target="_blank">https://github.com/Kronuz/SublimeCodeIntel</a>
PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3 提示
Ctrl+Shift+P→「Package Control:Install Package」→「SublimeCodeIntel」
SublimeLinter
<a href="https://github.com/SublimeLinter/SublimeLinter" target="_blank">https://github.com/SublimeLinter/SublimeLinter</a>
智能錯誤提示
Ctrl+Shift+P→「Package Control:Install Package」→「SublimeLinter」
Tag
<a href="https://github.com/SublimeText/Tag" target="_blank">https://github.com/SublimeText/Tag</a>
HTML 優化
Ctrl+Shift+P→「Package Control:Install Package」→「Tag」
【熱鍵】HTML 格式化
OS X :Cmd+Alt+F
Win/Linux:Alt+F
【熱鍵】把選中的字變 <選中的字></選中的字>
OS X :Ctrl+Shift+,
Win/Linux:Ctrl+Shift+,
Wordpress
<a href="https://github.com/purplefish32/sublime-text-2-wordpress" target="_blank">https://github.com/purplefish32/sublime-text-2-wordpress</a>
Wordpress 提示
Ctrl+Shift+P→「Package Control:Install Package」→「Wordpress」
Theme - Phoenix
<a href="http://netatoo.github.com/phoenix-theme" target="_blank">http://netatoo.github.com/phoenix-theme</a>
好看的主題
Ctrl+Shift+P→「Package Control:Install Package」→「Theme - Phoenix」
Theme - Soda
<a href="http://buymeasoda.github.com/soda-theme" target="_blank">http://buymeasoda.github.com/soda-theme</a>
Ctrl+Shift+P→「Package Control:Install Package」→「Theme - Soda」