Sublime text開發工具快捷鍵整理?
Sublime Text歷練
一、 前言
Sublime Text是一款跨平台代碼編輯器(Code
Editor),從最初的Sublime Text 1.0,到現在的Sublime
Text 3.0,Sublime Text從一個不知名的編輯器演變到現在幾乎是各平台首選的GUI編輯器。官網地址:Sublime Text。編輯器的選擇(Editor Choices)
從初學編程到現在,我用過的編輯器有EditPlus、UltraEdit、Notepad++、Vim、TextMate和Sublime Text,如果讓我從中推薦,我會毫不猶豫的推薦Vim和Sublime Text,原因有下面幾點:
跨平台:Vim和Sublime Text均為跨平台編輯器(在Linux、OS X和Windows下均可使用)。作為一個程序員,切換系統是常有的事情,為了減少重複學習,使用一個跨平台的編輯器是很有必要的。可擴展:Vim和Sublime Text都是可擴展的(Extensible),並包含大量實用插件,我們可以通過安裝自己領域的插件來成倍提高工作效率。互補:Vim和Sublime Text分別是命令行環境(CLI)和圖形界面環境(GUI)下的最佳選擇,同時使用兩者會大大提高工作效率。
優點:自動保存代碼,代碼高亮、語法提示、自動完成且反應快速。少用滑鼠,多用鍵盤。
編輯器(Editor) vs 集成開發環境(Integrated Development Environment,下文簡稱IDE)
我經常看到一些程序員拿編輯器和IDE進行比較,諸如Vim比Eclipse強大或是Visual Studio太慢不如Notepad++好使之類的討論比比皆是,個人認為這些討論沒有意義,因為編輯器和IDE根本是面向兩種不同使用場景的工具:
編輯器面向無語義的純文本,不涉及領域邏輯,因此速度快體積小,適合編寫單獨的配置文件和動態語言腳本(Shell、Python和Ruby等)。IDE面向有語義的代碼,會涉及到大量領域邏輯,因此速度偏慢體積龐大,適合編寫靜態語言項目(Java、C++和C#等)。
我認為應當使用正確的工具去做有價值的事情,並把效率最大化,所以我會用Eclipse編寫Java項目,用Vim編寫Shell,用Sublime Text編寫JavaScript/HTML/Python,用Visual
Studio編寫C#。
前言到此結束,下面進入正題。
二、
界面
1、概況:
1、從上到下:標題欄Title、菜單欄Menu、標籤欄Tab、編輯區Editing
Area、控制台Console、狀態欄Status Bar。
2、從做到右:側邊欄(可關閉、文件、文件夾視圖)、編輯區(代碼編輯)、MiniMap(縮略圖)。
2、菜單欄:各種命令,各種設置。
文件File:編輯Edit:選擇Selection:查找Find:視圖View:轉到Goto:工具Tools:項目Project:首選項Preferences:個性化定製。幫助Help:
3、標籤欄:文件名的縮略圖,文件編輯未保存,右上角有個小圓點,提示保存。如果未保存關了也不用害怕,自動保存。
4、狀態欄:ASCII編碼、Line 6-Column 53(當前行列號)、Tab Size:4(Tab格式等信息)、HTML(當前語言)。
5、控制台:使用Ctrl+`調出,它既是一個標準的Python REPL,也可以直接對Sublime Text進行配置。
6、編輯區:這是我們主要的工作區域,ST2支持代碼自動縮進,代碼摺疊功能。
常見的功能:
l、自動完成:自動完成的快捷鍵是Tab,如果在html文件中,輸入cl按下tab,即可自動補全為class=」」;加上zencoding後,更是如虎添翼,後面再講到
2、多列編輯:按住ctrl點擊滑鼠,會出現多個閃爍的游標,這時可同時修改多處,或者按住滑鼠中鍵拖拽,
3、代碼注釋功能:ctrl+/、ctrl+shift+/分別未行注釋和塊注釋,再按一下就能去掉注釋,ST2能夠自動識別是html、css還是js文件,給出不同類型的注釋。
4、行操作:ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行,ctrl+enter,游標後插入空行,ctrl+d選擇相似,可以參考後面的快捷鍵列表。
5、右鍵功能:
前3個,大家都知道,第4個,show unsaved changes,顯示未保存的修改,紅色減號表示刪去的內容,綠色加號表示新增的內容
Open Containing Folder…,打開包含此文件的文件夾,這個很方便找到相關的文件
Copy File Path,複製文件路徑,方便我們複製路徑到瀏覽器中查看
Auto-Format Tags on Selection 格式化選中的文檔,方便我們更清晰的查看代碼結構,雖然ST2有自動縮進功能,但是當我們粘貼進一段沒有格式化過的代碼,就需要這個能了,這個功能要安裝了Tag這個插件才會出現。
6、人性化設計:
ST2雖然還是beta版中,但是有很多設計細節還是值得稱讚的,比如點擊一個標籤或者括弧,會在起始處顯示下劃點線,方便看清代碼結果,每一層嵌套代碼間都有豎線,起到視覺輔助的作用。
三、
設置
自定製,數據被保存在Preferences.sublime-settings,Default或User,user可以覆蓋default。在配置文件,直接設置
配置文件在:preferences-setting user。
下面是一些可能有用但我很少用到的功能:
宏(Macro):Sublime Text支持錄製宏,但我在實際工作中並未發現宏有多大用處。
其它平台(Other Platforms):本文只介紹了Windows平台上Sublime Text的使用,不過Linux和OS X上Sublime Text的使用方式和Windows差別不大,只是在快捷鍵上有所差異,請參考Windows/Linux快捷鍵和OS X快捷鍵。
項目(Projects):Sublime Text支持簡單的項目管理,但我一般只用到文件夾。
Vim模式(Vintage):Sublime Text自帶Vim模式。
構建(Build):通過配置,Sublime Text可以進行源碼構建。
調試(Debug):通過安裝插件,Sublime Text可以對代碼進行調試。
四、快捷鍵
若稍有英文基礎,則更建議打開Preferences-&>KeyBindings--Default,這裡面是詳細的快捷鍵配置。
快捷鍵設置,ST2的快捷鍵很多,改的時候注意不要覆蓋了。
因為快捷鍵眾多,所以有下面這種組合快捷鍵,先按下ctrl+k,鬆開k,再按下j就可以展開全部代碼了。
快捷鍵列表(Shortcuts Cheatsheet)
我把本文出現的Sublime Text按其類型整理在這裡,以便查閱。
通用(General)
↑↓←→:上下左右移動游標,注意不是不是KJHL!
Alt:調出菜單
Ctrl+Shift+P:調出命令板(Command
Palette)
Ctrl+`:調出控制台
編輯(Editing)
Ctrl+Enter:在當前行下面新增一行然後跳至該行
Ctrl+Shift+Enter:在當前行上面增加一行並跳至該行
移動()
Ctrl+←/→:進行逐詞移動
Ctrl+Shift+←/→進行逐詞選擇
Ctrl+↑/↓移動當前顯示區域
Ctrl+Shift+↑/↓移動當前行
Ctrl+L:選擇整行(按住-繼續選擇下行)
Ctrl+D:選詞:(按住-繼續選擇下個相同的字元串)
Ctrl+Shift+D:複製游標所在整行,插入在該行之前
Ctrl+Shift+K:刪除整行
Ctrl+KK:從游標處刪除至行尾
Ctrl+K+Backspace:從游標處刪除至行首
Ctrl+J:合併(多)行(已選擇需要合併的多行時)
Ctrl+KU:改為大寫
Ctrl+KL:改為小寫
Ctrl+/:注釋(如已選擇內容,同「Ctrl+Shift+/」效果)
Ctrl+Shift:/:塊注釋(注釋已選擇內容)
Ctrl+Alt+/:塊注釋,並Focus到首行,寫注釋說明用的
Ctrl+Z:撤銷
Ctrl+Y:恢復
Alt+.:閉合當前標籤
Ctrl+Shift+A:選擇游標位置父標籤對兒
整理(clear)
Tab:縮進:自動完成
Shift+Tab:去除縮進
Ctrl+Shift+[:摺疊代碼
Ctrl+Shift+]:展開代碼
Ctrl+KT:摺疊屬性
Ctrl+K0:展開所有
選擇(Selecting)
Ctrl+D:選擇當前游標所在的詞並高亮該詞所有出現的位置,再次Ctrl+D選擇該詞出現的下一個位置,在多重選詞的過程中,使用Ctrl+K進行跳過,使用Ctrl+U進行回退,使用Esc退出多重編輯
Ctrl+Shift+L:將當前選中區域打散
Ctrl+J:把當前選中區域合併為一行
Ctrl+M:在起始括弧和結尾括弧間切換
Ctrl+Shift+M:快速選擇括弧間的內容
Ctrl+Shift+J:快速選擇同縮進的內容
Ctrl+Shift+Space:快速選擇當前作用域(Scope)的內容
查找替換(FindingReplacing)
F3:跳至當前關鍵字下一個位置
Shift+F3:跳到當前關鍵字上一個位置
Alt+F3:選中當前關鍵字出現的所有位置
Ctrl+F/H:進行標準查找/替換,之後:
Alt+C:切換大小寫敏感(Case-sensitive)模式
Alt+W:切換整字匹配(Whole
matching)模式
Alt+R:切換正則匹配(Regex
matching)模式
Ctrl+Shift+H:替換當前關鍵字
Ctrl+Alt+Enter:替換所有關鍵字匹配
Ctrl+Shift+F:多文件搜索替換
跳轉(Jumping)
Ctrl+P:跳轉到指定文件,輸入文件名後可以:
@ 符號跳轉:輸入@symbol跳轉到symbol符號所在的位置
# 關鍵字跳轉:輸入#keyword跳轉到keyword所在的位置
: 行號跳轉:輸入:12跳轉到文件的第12行。
Ctrl+R:跳轉到指定符號
Ctrl+G:跳轉到指定行號
窗口(Window)
Ctrl+Shift+N:創建一個新窗口
Ctrl+N:在當前窗口創建一個新標籤
Ctrl+W:關閉當前標籤,當窗口內沒有標籤時會關閉該窗口
Ctrl+Shift+T:恢復剛剛關閉的標籤
屏幕(Screen)
F11:切換普通全屏
Shift+F11:切換無干擾全屏
Alt+Shift+2:進行左右分屏、Alt+Shift+5:進行上下左右分屏、Alt+Shift+8:進行上下分屏。分屏,使用Ctrl+數字鍵跳轉到指定屏,使用Ctrl+Shift+數字鍵將當前屏移動到指定屏
書籤()
Ctrl+F2:設置書籤
F2:下一個書籤
Shift+F2:上一個書籤
五、插件
1、安裝方法:
安裝有兩個辦法:
(1)直接把插件放到它的安裝路徑對應文件包packages裡面去,不知道在哪的可以直接打開 preferences-&>Browse packages,放進去之後軟體會自動檢測。
(2)使用命令方式直接讓軟體自己下載安裝。(使用package
control組件)(前提:先安裝下面那個package
control插件)
按下Ctrl+Shift+P調出命令面板,輸入install, 調出 Install Package 選項並回車,然後在列表中選中要安裝的插件。
下載拷貝:然後把它放到package文件包中。沒用過Github的朋友不知道在哪裡下載。Download ZIP。然後把它解壓,把文件夾放進package文件包,然後它就能檢測到包啦!
代碼安裝:Ctrl+shift+p、輸入install、選擇package install 過幾秒會彈出另一個框。然後在輸入框中輸入你想要的插件關鍵字安裝吧!
大致就是這樣,簡單明了。下面介紹其他常用插件,安裝方式同理!
2、常用插件:
package control(包裹組件)
下載:Package Control
通過快捷鍵 ctrl+` 或者 View &> Show Console 菜單打開控制台,然後粘貼對應的版本代碼進去,然後回車讓它安裝。
適用於 Sublime Text 3:
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("Package Control"+pf.replace("
","%20")).read())
適用於 Sublime Text 2:
import urllib2,os;pf="Package Control.sublime-package";ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),"wb").write(urllib2.urlopen("Package Control"+pf.replace("
","%20")).read());print("Please restart Sublime Text to finish installation")
當然了,有些時候這樣你安裝不進去的,就只能自個去下載安裝包放到package文件裡邊去了(就是上邊我說的那個文件夾)如果在Preferences → Package Settings 中看到 Package
Control 這一項,說明安裝成功。
代碼整理:
HTMLBeautify()
格式化HTML。
HTML/CSS/JS Prettify(代碼格式化)
能夠格式化css html 和js。
注意:格式化的文件路徑中不能有中文,不然會報找不到node的錯誤(windows下)。
YUI Compressor(壓縮JS和CSS文件)
下載:kairyou/SublimeYUICompressor · GitHub
PHPTidy(整理與排版PHP代碼)
下載:welovewordpress/SublimePhpTidy · GitHub
JsFormat(javascript格式化)
下載:jdc0589/JsFormat · GitHub
格式化js代碼,這個插件很有用,我們有時在網上看到某些效果,想查看是怎麼實現的,但是代碼被壓縮過,很難閱讀,不用怕,用ST2打開,按下ctrl+alt+5(這是我設置的快捷鍵),即可讓代碼還原,莫非是武林中失傳已久的「還我靚靚拳」。
HtmlTidy(清理與排版你的HTML代碼)
下載:welovewordpress/SublimeHtmlTidy · GitHub
AutoPEP8()
格式化Python代碼。
Alignment安裝案例
下載:https://github.com/wbond/sublime_alignment
Alignment(代碼補齊)補齊就是補齊~就像這樣
代碼簡寫:
snippets(自定製代碼補齊機制)
下載:http://docs.sublimetext.info/en/latest/extensibility/snippets.html?highlight=scope
自定製代碼補齊機制,
Zen Coding (現已改名為Emmet)
下載:https://github.com/sergeche/emmet-sublime
通過簡單的命令直接生成一大段代碼!一個字又快又准,安裝好插件後,使用Ctrl + Alt +
Enter 呼出ZenCoding。
我們可以用
div#content&>ul&>li*3&>a[href="javascript:void(0);"]{Links$} 這樣短短的一句話,生成下面一段代碼:
技巧:
前端必備,快速開發HTML/CSS
輸入 div.wrapper&>div.header+div.main+div.footer 按下Tab,立刻變成
或者按下ctrl+alt+enter,激發zencoding控制台,可看到整個動態的過程。
高亮顯示:
BracketHighlighter
BracketHighlighter高亮顯示匹配的括弧、引號和標籤,BracketHighlighter這個插件能在左側高亮顯示匹配的括弧、引號和標籤,能匹配的[] , () , {} , "" , "" , &
TrailingSpacer(高亮顯示多餘的空格和Tab)
下載:SublimeText/TrailingSpaces · GitHub
顏色:
ColorPicker (調色盤)
下載:weslly/ColorPicker · GitHub
在編輯CSS樣式的時候,ColorPicker可以讓sublime text 內置一個調色盤,調好顏色,點擊OK就會在游標處生成十六進位顏色代碼。
CSS:
CSScomb(CSS屬性排序)
下載:csscomb/csscomb-for-sublime · GitHub
CSS3_Syntax(css語法高亮)
對css語法高亮的支持,view-syntax-css3選中css3就能使用css3高亮了。必須每條屬性都加上分號,並且屬性必須小寫,不然不會高亮,有點雞肋啊。
Prefixr(自動加-webkit前綴)
寫 CSS可自動添加 -webkit 等私有詞綴,Ctrl+Alt+X觸發。
Autoprefixer(自動加前綴)
可以給css自動加前綴功能
Goto-CSS-Declaration(CSS文件跳轉)
跳轉到css文件該class的聲明處,方便修改查看,如圖下所示,注意對應的css文件要同時打開才行。
編碼:
GBK Encoding Support(GBK中文編碼)
這個插件還是非常有用的,因為sublime 本身 不支持gbk編碼,在utf8如此流行的今天,我們整站還是gbk編碼,o(︶︿︶)o
唉,所以全靠這個插件了。
GBK to UTF8(編碼轉換)
將文件編碼從GBK轉換成UTF8,菜單 – File裡面找。
文檔管理:
SideBarEnhancements(側邊欄增強)
下載:titoBouzout/SideBarEnhancements · GitHub
SyncedSideBar
支持當前文件在左側面板中定位,不錯。
Hex-to-HSL-Color Hex(顏色模式轉HSL顏色模式)
下載:atadams/Hex-to-HSL-Color · GitHub
SublimeTmpl (自定義新建文件)
下載:kairyou/SublimeTmpl · GitHub
默認已經添加了html、css、js等常見類型的面板,按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建這
3鍾類型的文件,快捷鍵在這裡PackagesSublimeTmplDefault (Windows).sublime-keymap, 模板文件在這裡PackagesSublimeTmpl emplates,可修改。 比如下邊簡單的html文件
DocBlockr(代碼建立文檔)
DocBlockr 可以使你很方便地對代碼建立文檔。它會解析函數,變數,和參數,根據它們自動生成文檔範式,你的工作就是去填充對應的說明。
GotoRecent(歷史文檔記錄)
打開最近的文件,系統有這個功能,但只能看最近8個,有點不爽,按ctrl+e,選擇即可。
語法識別:
jQuery(jQuery語法識別)
支持jquery的只能語法提示,很贊。
JavaScriptNext - ES6 Syntax(ES6語法識別)
提供ES6的語法支持。
WordPress(WordPress的函數)
集成一些WordPress的函數,對於像我這種經常要寫WP模版和插件的人特別有用
Vintage(Vim模擬)
如果你習慣使用vim,那麼可以安裝這個插件,這個插件可以讓sublime像vim一樣。
LESS(LESS語法識別)
這是一個非常棒的插件,可以讓sublime支持less的語法高亮和語法提示,對於搞less的同學灰常重要,不過多解釋。
SCSS(SCSS語法識別)
支持scss的語法高亮,裡面附帶了好多CSS Snippet,無論現用或者改造成,都可節省不少時間。
Liquid(Liquid語法識別)
提供Liquid語法支持,如果你也寫博客的話不妨試試。
Smarty(Smarty語法識別)
提供smarty語法的支持。Smarty插件默認的分隔符是{},如果你使用的分隔符不同可以更改插件目錄的Smarty.tmPreferences文件,找到其中的SMARTY_LDELIM和SMARTY_RDELIM,修改為你的分隔符即可。
文件傳輸:
SFTP(編輯 FTP 或 SFTP 伺服器上的文件)
下載:Sublime SFTP
Package Syncing
最後推薦一個同步插件,這個插件可以在不同的機器同步配置信息和插件,非常方便,但鑒於國內的牆太高,我都是直接把插件給手動備份了,然後直接拖進去,或者直接去github上下載對應的包。
其他:
Gits(集成 GitHub)
下載:kemayo/sublime-text-git · GitHub
Clipboard-history(粘貼板歷史記錄)
下載:kemayo/sublime-text-2-clipboard-history · GitHub
可以保存粘貼的歷史,很贊的功能,再也不用擔心歷史丟失了。ctrl+alt+v可打開歷史面板,上下選擇即可,安裝後會和默認的ctrl+shift+v(粘貼縮進)衝突,幹掉這個快捷鍵。
SublimeLinter(代碼錯誤提示)
下載:SublimeLinter/SublimeLinter-for-ST2 at sublime-text-3 · GitHub
Tradsim(中文繁字體和簡體字轉換)
下載:erinata/SublimeTradsim · GitHub
Terminal
可以sublime中,打開命令行,非常方便哦。
AllAutocomplete
自動完成插件,可在全部打開的文件中,自動完成。
HexViewer
提供十六進位文件查看功能。
MultiEditUtils
擴展多行編輯的功能。
IMESupport(輸入框不更隨著游標)
六、主題(Themes)
Sublime Text有大量第三方主題:theme - Labels
1、Flatland
Theme – Soda
完美的編碼主題,用過的都說好,Setting user裡面添加」theme」: 「Soda
Dark.sublime-theme」
配色(Color)
colorsublime包含了大量Sublime
Text配色方案,並支持在線預覽,配色方案的安裝教程在這裡,恕不贅述。我個人使用的是Nexus主題和Flatland Dark配色,配置如下:
"theme":
"Nexus.sublime-theme",
"color_scheme": "Packages/Theme -
Flatland/Flatland Dark.tmTheme",
效果如下:
七、最後購買:
Sublime Text2或者3都沒關係,3也只是作為2的beta版本,所以還是推薦3吧,支持新版嘛。2和3在使用方法功能上也有差異~
你可以去官網下載對應版本,但可能需要輸入序列號什麼的。訪問Sublime Text下載 2.x 版本。或從Sublime Text下載 3.x 版本。
註冊碼(僅供個人非商業應用):
----- BEGIN
LICENSE ------
Alexander
Single User
License
EA7E-814345
51F47F09
4EAB1285 7827EFF0 8B1207DC
A76A6EA3
E1A1CA7A DC1F2703 14,897,784
8EDC1C82
3F2A58B9 1C0C8B24 67686432
281245B3
6233DE5C ADC5C2F9 61FB8A04
171B63EF
86BA423F 6AC884FD 3273A7AA
5F50A6DB
CE7859AE D62D2B37 AEEDD8C2
078A8A20
70EEA791 84F48C1E 8ABA7DEB
0B3907C0
C9A3523B 0091A045 6F67AED8
------ END
LICENSE ------
----- BEGIN
LICENSE -----
Andrew
Weber
Single User
License
EA7E-855605
813A03DD
5E4AD9E6 6C0EEB94 BC99798F
942194A6
02396E98 E62C9979 4BB979FE
91424C9D
A45400BF F6747D88 2FB88078
90F5CC94
1CDC92DC 8457107A F151657B
1D22E383
A997F016 42397640 33F41CFC
E1D0AE85
A0BBD039 0E9C8D55 E1B89D5D
5CDB7036
E56DE1C0 EFCC0840 650CD3A6
B98FC99C
8FAC73EE D2B95564 DF450523
------ END
LICENSE ------
八、漢化:
可以網上找些中文包放進去就行了。
Sublime Text 全程指南:Sublime Text 全程指南
延伸閱讀(Further Reading)
書籍(Books)
Mastering Sublime Text:我讀過的唯一一本關於Sublime Text的書籍,書中介紹的插件很實用,但對編輯技巧介紹不全。
Instant Sublime Text Starter:另外一本關於Sublime Text的書,我沒有讀過。
鏈接(Links)
官方文檔:Sublime Text 3 Documentation
官方論壇:Sublime Forum ? Index page
Stack Overflow的Sublime
Text頻道:
http://stackoverflow.com/questions/tagged/sublimetext
Newest "sublimetext2" Questions
Newest "sublimetext3" Questions
非官方文檔:Table of Contents 甚至比官方文檔還要全面!
Package Control:Package Control 大量的Sublime Text插件和主題。
視頻(Videos)
Getting Started with SublimeText:https://www.youtube.com/watch?v=04gKiTiRlq8
Sublime Text Pefect Workflow:https://www.youtube.com/watch?v=bpEp0ePIOEMlist=PLuwqxbvf3olpLsnFvo06gbrkcEB5o7K0g
很詳細,可以指導初學者
推薦閱讀: