標籤:
這篇文章是本人在使用該工具進行前端開發的自我總結,思路也許不是很清楚,不過還是希望對讀者的你有所協助,千萬別把這邊文章收藏起來發黴哦,無論背多少次快速鍵,還不及自己多實際操作幾次。
- 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 為測試階段,建議下載正式版 註冊機SublimeTextKeygen下載
- 開啟註冊機,先點中間 “Patch key” 開啟 “sublime_text.exe” 檔案確認,再隨意修改下 “Name” 然後 “Generate”,複製好裡面的 License。(註:請按步驟做,否則不成功!此時請不要關掉註冊機,不要輔助虛線部分文字~)
- 開啟 Sublime Text 2,到 Help–Enter license 粘貼點擊確認,完成~
- 如果手頭銀子充足,請支援正版軟體,不過 sublimetext 售價不便宜,USD $70~
- Sublime Text 3 正式版發行。請支援正版!
######## Sublime Text 3 使用快速鍵 ########
- Ctrl+Alt+f 可以整理JS代碼的格式,需要選中後使用。(需外掛程式支援:format)
- Ctrl+Ait+p 調出強大的命令選擇區。
- Ctrl+P 快捷功能-
- Ctrl+R 調出 @ 功能 可以迅速定位 function 函數名稱
- Ctrl+G 調出 :功能可以迅速定位行號,調試修改樣式的時候常用。
- Ctrl+~ 調出控制帶
- Ctrl+D和Alt+F3前者“連續按住可以選擇向下選擇相同字串”,後者“自訂選擇文本,按下就可以一次性選擇所有相同文本”。
- Ctrl+/ 注釋整行。 Ctrl+Shift+/ 注釋選擇的部分。
- 更多快速鍵請查看以片!
######## Sublime Text 3 提示效率 ########
- 滑鼠選中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同時編輯這些行;
- 滑鼠選中文本,反覆按 CTRL+D (Command+D) 即可繼續向下同時選中下一個相同的文本進行同時編輯;
- 滑鼠選中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性選擇全部的相同文本進行同時編輯;
- Shift+滑鼠右鍵 (Win) 或 Option+滑鼠左鍵 (Mac) 或使用滑鼠中鍵可以用滑鼠進行豎向多行選擇;
- Ctrl+滑鼠左鍵(Win) 或 Command+滑鼠左鍵(Mac) 可以手動選擇同時要編輯的多處文本
######## sublime text 3 美化 ########
- 皮膚的切換標籤換成直角的,不喜歡預設的圓潤,這套皮膚的名字叫:Theme – Nil,當時看了木木木木木部落格的一篇文章(突然發現我跟他的審美觀如此匹配~)
- 代碼的色彩配置,Color schemes for hackers — Base16 地址:https://github.com/chriskempson/base16
- 另外一套主題:spacegray,項目地址:http://kkga.github.io/spacegray/,這套主題整合了base16色彩配置,也是現在我用的主題,介面預覽請看本篇文章的首圖
######## sublime text 3 外掛程式技巧 ########
- sublime text 外掛程式刪除步驟:“Ctrl+Shift+P”—“Remove Package”—“找到需要刪除的外掛程式,並點擊即可刪除”
- 解決GBK和GB2312亂碼問題:安裝外掛程式 “ConvertToUTF8”
- 更多資料:Sublime Text 2 – 性感無比的代碼編輯器!程式員必備神器!跨平台支援Win/Mac/Linux
######## 我常用的外掛程式列表 (2014年10月1日更新)########
- package Control:這是為了方便管理外掛程式的一個工具,所以最好就是先裝這個外掛程式了,使用快速鍵Ctrl+Shift+P 調用,官方地址:https://packagecontrol.io/
- YUI Compressor:壓縮JS和CSS檔案,按F7鍵後,若壓縮當前檔案(demo.js),則壓縮後的檔案(demo.min.js)儲存在該檔案的同級目錄,需要安裝java的JDK。使用方法:sublime text 外掛程式:YUI Compressor
- JsFormat:有壓縮當讓也可以格式化,這個就是格式化JS用的,快速鍵Ctrl+Alt+F。
- ConvertToUTF8:Sublime 只支援utf8編碼,該外掛程式可以顯示與編輯多種非utf8編碼的檔案
- Emmet:也就是大名鼎鼎的 ZenCoding ,新版把名字更改為“螞蟻”的英文單詞Emmet,這可是前端開發的超級利器,可以超快速編寫HTML/CSS/JS,當然這個外掛程式還支援多種編譯環境, 如常見的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,使用方法:官方網站
- jQuery和CSS3:前端開發必備。
- Clipboard History:剪下板曆史,僅支援Sublime Text 2
- BracketHighlighter:高亮顯示匹配的括弧、引號和標籤等,甚至是自訂的標籤,當看到密密麻麻的代碼分不清標籤之間包容嵌套的關係時,這款外掛程式就能很好地幫你理清楚代碼結構,快速定位括弧,引號和標籤內的範圍,當然它也是前端必備。
- CSScomb:它可以按照一定的 CSS 屬性定序,將雜亂無章的 CSS 屬性進行重新排序。選中要排序的 CSS 代碼,按 Ctrl+Shift+C,即可對 CSS 屬性重新排序了,代碼從此簡潔有序易維護,如果不款選代碼則外掛程式將排序檔案中所有的 CSS 屬性。當然,可以自己自訂 CSS 屬性定序,開啟外掛程式目錄裡的 CSScomb.sublime-settings 檔案,更改裡面的 CSS 屬性順序就行了。因為這個外掛程式使用 PHP 寫的,要使他工作需要在環境變數中添加 PHP 的路徑,具體請看 CSScomb官方網站 上的說明。
外掛程式:https://github.com/csscomb/CSScomb-for-Sublime
- alignmentSublime整合的代碼格式化外掛程式,可以代替JsFormat、CSS Format 部分功能。
前端開發利器 Sublime Text 3 提示和總結筆記