天天看點

Sublime Text (神級文本編譯器)使用技巧

作者:Rix Tox

連結:http://www.zhihu.com/question/24896283/answer/40135140

來源:知乎

著作權歸作者所有,轉載請聯系作者獲得授權。

1. 更改變量名的幾種方法

<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg" data-rawwidth="153" data-rawheight="46" class="content_image" width="153">

Sublime Text (神級文本編譯器)使用技巧

這種情況下該如何快速選中正确的内容?

第一種方法:讓 Cmd-D (Win: Ctrl-D)隻選擇同一個變量。

把光标移到第一個i後面:

<img src="https://pic4.zhimg.com/6ce2f0076218bc0af57eb60b8d6ef70b_b.jpg" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">按 Cmd-D (Win: Ctrl-D):

Sublime Text (神級文本編譯器)使用技巧

按 Cmd-D (Win: Ctrl-D):

<img src="https://pic1.zhimg.com/7884206f74d8d9ea74b123b96ed329ec_b.jpg" data-rawwidth="160" data-rawheight="49" class="content_image" width="160">再按一次:

Sublime Text (神級文本編譯器)使用技巧

再按一次:

<img src="https://pic3.zhimg.com/f8c368de62bc1f18dd662b6f7401c9b2_b.jpg" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">限制:選取範圍中不能有别的同名同類 token,如:

Sublime Text (神級文本編譯器)使用技巧

限制:選取範圍中不能有别的同名同類 token,如:

<img src="https://pic2.zhimg.com/342e09c89789c07c87577b5bc1185edd_b.jpg" data-rawwidth="141" data-rawheight="45" class="content_image" width="141">

Sublime Text (神級文本編譯器)使用技巧

第二種方法:自動選取所有同名同類 token。

把光标移到第一個i後面:

<img src="https://pic4.zhimg.com/6ce2f0076218bc0af57eb60b8d6ef70b_b.jpg" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">

Sublime Text (神級文本編譯器)使用技巧

按 Ctrl-Cmd-G (Win: Alt-F3):

<img src="https://pic3.zhimg.com/f8c368de62bc1f18dd662b6f7401c9b2_b.jpg" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">

Sublime Text (神級文本編譯器)使用技巧

限制:會将别的作用域中的同名同類 token 都選中,如:

<img src="https://pic4.zhimg.com/7fbe31352e237a5919f8af07ae58cc2b_b.jpg" data-rawwidth="199" data-rawheight="89" class="content_image" width="199">

Sublime Text (神級文本編譯器)使用技巧

第三種方法:Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 跳過選區。

這個方法能解決所有問題,先把光标移到第一個i後面:

<img src="https://pic4.zhimg.com/b573887a8e337ea7007cc11ba3c0db07_b.jpg" data-rawwidth="211" data-rawheight="58" class="content_image" width="211">按 Cmd-D (Win: Ctrl-D):

Sublime Text (神級文本編譯器)使用技巧

按 Cmd-D (Win: Ctrl-D):

<img src="https://pic4.zhimg.com/61bcc0c1314d0d9b107f38d14032025f_b.jpg" data-rawwidth="204" data-rawheight="60" class="content_image" width="204">再按一次:

Sublime Text (神級文本編譯器)使用技巧

再按一次:

<img src="https://pic4.zhimg.com/0a301ac65f66633c405cc173e7e8c66b_b.jpg" data-rawwidth="205" data-rawheight="60" class="content_image" width="205">這個 token 我們不想選中,這時候隻要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳過這個選區:

Sublime Text (神級文本編譯器)使用技巧

這個 token 我們不想選中,這時候隻要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳過這個選區:

<img src="https://pic1.zhimg.com/e33c3b80e3ed788424214ba77e3dd894_b.jpg" data-rawwidth="206" data-rawheight="59" class="content_image" width="206">這個 token 也不要,再按一次跳過:

Sublime Text (神級文本編譯器)使用技巧

這個 token 也不要,再按一次跳過:

<img src="https://pic4.zhimg.com/3cb50429830cb1baf3daa714c31e76a7_b.jpg" data-rawwidth="201" data-rawheight="58" class="content_image" width="201">你會發現執行跳過選區後就不再是同名同類的 token 選擇了,不過不要緊,我們繼續跳過就好:

Sublime Text (神級文本編譯器)使用技巧

你會發現執行跳過選區後就不再是同名同類的 token 選擇了,不過不要緊,我們繼續跳過就好:

<img src="https://pic1.zhimg.com/7fb1540e66f1a19bcaaed8f7a269c258_b.jpg" data-rawwidth="204" data-rawheight="59" class="content_image" width="204">這個 token 我們要保留,于是隻按 Cmd-D (Win: Ctrl-D):

Sublime Text (神級文本編譯器)使用技巧

這個 token 我們要保留,于是隻按 Cmd-D (Win: Ctrl-D):

<img src="https://pic1.zhimg.com/75d373cab8eec15fc6a58f21f17daeec_b.jpg" data-rawwidth="208" data-rawheight="64" class="content_image" width="208">然後就能正确地重命名了。

Sublime Text (神級文本編譯器)使用技巧

然後就能正确地重命名了。

2. 矩形(垂直)選區

相信很多人都知道按住滑鼠中鍵(滾輪鍵)拖動選區可以進行垂直選擇:

<img src="https://pic2.zhimg.com/67c552cdec09448915eddb43de7b9eb1_b.png" data-rawwidth="585" data-rawheight="83" class="origin_image zh-lightbox-thumb" width="585" data-original="https://pic2.zhimg.com/67c552cdec09448915eddb43de7b9eb1_r.png">但是很多時候我們沒有滑鼠中鍵可以按,這時候可以用下面幾種方式進行垂直選擇:

Sublime Text (神級文本編譯器)使用技巧

但是很多時候我們沒有滑鼠中鍵可以按,這時候可以用下面幾種方式進行垂直選擇:

第一種方法:滑鼠左鍵 + Option (Win: 滑鼠右鍵 + Shift)

這種方法仍然需要滑鼠進行拖動選擇,隻是單純的滑鼠中鍵的替代。

第二種方法:隻用鍵盤操作

首先把光标移動到我們要選中的矩形選區的左上角:

<img src="https://pic3.zhimg.com/879df57b0052caed0de152ed3c5ae7ca_b.png" data-rawwidth="599" data-rawheight="79" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic3.zhimg.com/879df57b0052caed0de152ed3c5ae7ca_r.png">按兩下 Ctrl + Shift + Down (Win: Ctrl + Alt + Down):

Sublime Text (神級文本編譯器)使用技巧

按兩下 Ctrl + Shift + Down (Win: Ctrl + Alt + Down):

<img src="https://pic3.zhimg.com/7fe3845e4a41fc6fe06563792d77b5ba_b.png" data-rawwidth="591" data-rawheight="80" class="origin_image zh-lightbox-thumb" width="591" data-original="https://pic3.zhimg.com/7fe3845e4a41fc6fe06563792d77b5ba_r.png">重複按 Shift + Right (Win: Shift + Right) 直到選中整個選區:

Sublime Text (神級文本編譯器)使用技巧

重複按 Shift + Right (Win: Shift + Right) 直到選中整個選區:

<img src="https://pic2.zhimg.com/67c552cdec09448915eddb43de7b9eb1_b.png" data-rawwidth="585" data-rawheight="83" class="origin_image zh-lightbox-thumb" width="585" data-original="https://pic2.zhimg.com/67c552cdec09448915eddb43de7b9eb1_r.png">

Sublime Text (神級文本編譯器)使用技巧

3. 自适應縮進的複制粘貼

有些情況下我們需要直接複制粘貼一段網上的代碼,有些人可能會這樣選中原文進行複制:

<img src="https://pic1.zhimg.com/8efbe1b2d3cad4b8729050b13d2358a0_b.jpg" data-rawwidth="901" data-rawheight="287" class="origin_image zh-lightbox-thumb" width="901" data-original="https://pic1.zhimg.com/8efbe1b2d3cad4b8729050b13d2358a0_r.jpg">然後在subl中這樣粘貼:

Sublime Text (神級文本編譯器)使用技巧

然後在subl中這樣粘貼:

<img src="https://pic4.zhimg.com/b62dab2dddfbd87e0532bd48c2a9f9e3_b.jpg" data-rawwidth="444" data-rawheight="244" class="origin_image zh-lightbox-thumb" width="444" data-original="https://pic4.zhimg.com/b62dab2dddfbd87e0532bd48c2a9f9e3_r.jpg">但是你會發現粘貼出來的縮進格式完全對不上号:

Sublime Text (神級文本編譯器)使用技巧

但是你會發現粘貼出來的縮進格式完全對不上号:

<img src="https://pic4.zhimg.com/b2e85b0ef5ff89b07638f311e964494b_b.jpg" data-rawwidth="467" data-rawheight="317" class="origin_image zh-lightbox-thumb" width="467" data-original="https://pic4.zhimg.com/b2e85b0ef5ff89b07638f311e964494b_r.jpg">

Sublime Text (神級文本編譯器)使用技巧

正确的做法如下:

把目标代碼片段的每一個整行都選中,然後進行複制:

<img src="https://pic2.zhimg.com/e9c7a055163e3b8616028c12f4c2b93d_b.jpg" data-rawwidth="436" data-rawheight="306" class="origin_image zh-lightbox-thumb" width="436" data-original="https://pic2.zhimg.com/e9c7a055163e3b8616028c12f4c2b93d_r.jpg">在subl中對插入行進行正确的縮進:

Sublime Text (神級文本編譯器)使用技巧

在subl中對插入行進行正确的縮進:

<img src="https://pic1.zhimg.com/d468abbac735c3ae7e9e2ccdc30af4e0_b.jpg" data-rawwidth="427" data-rawheight="247" class="origin_image zh-lightbox-thumb" width="427" data-original="https://pic1.zhimg.com/d468abbac735c3ae7e9e2ccdc30af4e0_r.jpg">然後按Cmd-Shift-v (Win: Ctrl-Shift-v) 進行自适應縮進的粘貼:

Sublime Text (神級文本編譯器)使用技巧

然後按Cmd-Shift-v (Win: Ctrl-Shift-v) 進行自适應縮進的粘貼:

<img src="https://pic2.zhimg.com/cf33b1dc3480104de9dcfeb3dc034dcd_b.jpg" data-rawwidth="426" data-rawheight="317" class="origin_image zh-lightbox-thumb" width="426" data-original="https://pic2.zhimg.com/cf33b1dc3480104de9dcfeb3dc034dcd_r.jpg">這樣的粘貼方式不但能自适應縮進,還能自動将空格或Tab縮進轉換成适應你代碼的格式。

Sublime Text (神級文本編譯器)使用技巧

這樣的粘貼方式不但能自适應縮進,還能自動将空格或Tab縮進轉換成适應你代碼的格式。

4. 快速建立新檔案 (AdvancedNewFile)

我在使用ANF之前最快的建立新檔案的方法是這樣的:

Cmd-n (Win: Ctrl-n) 打開編輯窗格:

<img src="https://pic4.zhimg.com/e0ea29374a136c7d43ba96e1490f6e63_b.jpg" data-rawwidth="686" data-rawheight="487" class="origin_image zh-lightbox-thumb" width="686" data-original="https://pic4.zhimg.com/e0ea29374a136c7d43ba96e1490f6e63_r.jpg">然後Cmd-Shift-p (Win: Ctrl-Shift-p) 打開Command Palette,如果我想寫ruby代碼,我就敲ssru:

Sublime Text (神級文本編譯器)使用技巧

然後Cmd-Shift-p (Win: Ctrl-Shift-p) 打開Command Palette,如果我想寫ruby代碼,我就敲ssru:

<img src="https://pic4.zhimg.com/3b8f8f288f1ba32f8660a7dcb23241cb_b.jpg" data-rawwidth="686" data-rawheight="487" class="origin_image zh-lightbox-thumb" width="686" data-original="https://pic4.zhimg.com/3b8f8f288f1ba32f8660a7dcb23241cb_r.jpg">回車後我的檔案就變成Ruby文法的了,這個時候儲存檔案就會自動提供.rb的字尾名:

Sublime Text (神級文本編譯器)使用技巧

回車後我的檔案就變成Ruby文法的了,這個時候儲存檔案就會自動提供.rb的字尾名:

<img src="https://pic4.zhimg.com/5bba219e45b8af90b4684a577008263b_b.jpg" data-rawwidth="824" data-rawheight="666" class="origin_image zh-lightbox-thumb" width="824" data-original="https://pic4.zhimg.com/5bba219e45b8af90b4684a577008263b_r.jpg">不過這樣的流程還是太繁瑣了。我推薦安裝使用AdvancedNewFile插件代替原有的建立檔案功能。

Sublime Text (神級文本編譯器)使用技巧

不過這樣的流程還是太繁瑣了。我推薦安裝使用AdvancedNewFile插件代替原有的建立檔案功能。

新的流程如下:

比如我有這樣一個project:

<img src="https://pic1.zhimg.com/1672896ca70d5e194d17a0e97236bac0_b.jpg" data-rawwidth="837" data-rawheight="577" class="origin_image zh-lightbox-thumb" width="837" data-original="https://pic1.zhimg.com/1672896ca70d5e194d17a0e97236bac0_r.jpg">我想在script目錄下建立一個utils檔案夾,然後再在utils裡面建立一個API.js檔案,我隻要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打開一個路徑輸入框:

Sublime Text (神級文本編譯器)使用技巧

我想在script目錄下建立一個utils檔案夾,然後再在utils裡面建立一個API.js檔案,我隻要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打開一個路徑輸入框:

<img src="https://pic3.zhimg.com/caf1769fddeb5fe67b5ea530e6efc4ea_b.jpg" data-rawwidth="837" data-rawheight="577" class="origin_image zh-lightbox-thumb" width="837" data-original="https://pic3.zhimg.com/caf1769fddeb5fe67b5ea530e6efc4ea_r.jpg">然後輸入script/utils/API.js回車就可以自動建立目錄結構以及空檔案。由于我們打開了script/app.js檔案,我們可以直接輸入./utils/API.js建立相對路徑的檔案結構。另外,對于已存在的目錄可以使用Tab補全。建立出來的新檔案會自動打開,并且會自動選擇相應的文法,沒有額外的工作。

Sublime Text (神級文本編譯器)使用技巧

然後輸入script/utils/API.js回車就可以自動建立目錄結構以及空檔案。由于我們打開了script/app.js檔案,我們可以直接輸入./utils/API.js建立相對路徑的檔案結構。另外,對于已存在的目錄可以使用Tab補全。建立出來的新檔案會自動打開,并且會自動選擇相應的文法,沒有額外的工作。

5. 更改HTML标簽

我之前更改HTML标簽時要麼就用上面更改變量名的方式選中一組标簽,要麼就手動按着Cmd (Win: Ctrl)不放輕按兩下标簽的開頭和結尾:

<img src="https://pic1.zhimg.com/0fa54bb125449f01b6228d4ea442ef80_b.jpg" data-rawwidth="166" data-rawheight="168" class="content_image" width="166">但是如果标簽中間内容很多,這樣的方式會比較費時。Emmet插件提供了一個非常友善的快捷鍵能夠快速選擇對應的一組标簽名。首先将光标移至标簽的開頭或結尾:

Sublime Text (神級文本編譯器)使用技巧

但是如果标簽中間内容很多,這樣的方式會比較費時。Emmet插件提供了一個非常友善的快捷鍵能夠快速選擇對應的一組标簽名。首先将光标移至标簽的開頭或結尾:

<img src="https://pic2.zhimg.com/3a23e74bae41ee1d7fcd2bf839dc85b9_b.jpg" data-rawwidth="206" data-rawheight="103" class="content_image" width="206">然後按Cmd-Shift-K (Win: Ctrl-Shift-') 就能選中這組标簽:

Sublime Text (神級文本編譯器)使用技巧

然後按Cmd-Shift-K (Win: Ctrl-Shift-') 就能選中這組标簽:

<img src="https://pic1.zhimg.com/165f42daa156c52b773cecf403d35d2c_b.jpg" data-rawwidth="199" data-rawheight="104" class="content_image" width="199">

Sublime Text (神級文本編譯器)使用技巧

6. 2空格-4空格縮進快速切換

我之前用别人代碼的時候總是遇到縮進空格數跟我不同的情況,後來我學會一種方法能夠處理這樣的檔案。比如我要将4空格縮進轉成2空格縮進,首先将目标代碼複制到一個獨立的編輯視窗中:

<img src="https://pic1.zhimg.com/515ddda40a0a6117d5053529b4968f2c_b.jpg" data-rawwidth="292" data-rawheight="424" class="content_image" width="292">然後在編輯器右下角的縮進選項菜單中選擇Tab Width: 4:

Sublime Text (神級文本編譯器)使用技巧

然後在編輯器右下角的縮進選項菜單中選擇Tab Width: 4:

<img src="https://pic3.zhimg.com/b09449e175497e63f2f18c7f22b9c656_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">

Sublime Text (神級文本編譯器)使用技巧

然後在編輯器右下角的縮進選項菜單中選擇Convert Indentation to Tabs:

<img src="https://pic3.zhimg.com/58bb51b159f2f2b18af3ba4be4312776_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然後在編輯器右下角的縮進選項菜單中選擇Tab Width: 2:

Sublime Text (神級文本編譯器)使用技巧

然後在編輯器右下角的縮進選項菜單中選擇Tab Width: 2:

<img src="https://pic3.zhimg.com/72422bc7a2be7ad3c629534e53cbe682_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">

Sublime Text (神級文本編譯器)使用技巧

然後在編輯器右下角的縮進選項菜單中選擇Convert Indentation to Spaces:

<img src="https://pic2.zhimg.com/df008e6771d42074785a7d52daca6b7d_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然後你的文檔就變成2空格縮進的了:

Sublime Text (神級文本編譯器)使用技巧

然後你的文檔就變成2空格縮進的了:

<img src="https://pic2.zhimg.com/500964e96433cc4e8f5941fdbfdc0db5_b.jpg" data-rawwidth="221" data-rawheight="422" class="content_image" width="221">但是這樣的方法太過繁瑣了不是嗎?于是我就寫了一個宏腳本,綁定到快捷鍵上來做這個工作。

Sublime Text (神級文本編譯器)使用技巧

但是這樣的方法太過繁瑣了不是嗎?于是我就寫了一個宏腳本,綁定到快捷鍵上來做這個工作。

打開這個連結: https://gist.github.com/beaugunderson/8588871

把to-2.sublime-macro和to-4.sublime-macro檔案下載下傳到你Sublime Text配置目錄的Packages/User路徑下,然後在編輯器菜單中選擇Preferences - Key Bindings - User打開使用者快捷鍵配置檔案,把Default (OSX).sublime-keymap中的内容添加到這個檔案中。

然後你就可以用Ctrl-2或Ctrl-4轉換檔案的縮進空格數了。

7. CSS快速鍵入

Emmet插件還提供了很多非常友善的CSS Snippets。比方說我們要敲出font-size: 1.8em;其中1.8是根據一個值計算得來的,比如說是3.6/2的結果,我們可以用Emmet進行這種簡單的數值計算。

鍵入fz3.6/2:

<img src="https://pic3.zhimg.com/a08be3b21e78493630a8cfb268ba22a2_b.jpg" data-rawwidth="245" data-rawheight="68" class="content_image" width="245">按Cmd-Shift-Y (Win: Ctrl-Shift-Y)計算數值:

Sublime Text (神級文本編譯器)使用技巧

按Cmd-Shift-Y (Win: Ctrl-Shift-Y)計算數值:

<img src="https://pic4.zhimg.com/01df10d516dd4050d5e133613684ec23_b.jpg" data-rawwidth="229" data-rawheight="69" class="content_image" width="229">然後按Tab展開Snippet:

Sublime Text (神級文本編譯器)使用技巧

然後按Tab展開Snippet:

<img src="https://pic1.zhimg.com/636053c68cff7f6e39ce81bfebff7fe0_b.jpg" data-rawwidth="220" data-rawheight="65" class="content_image" width="220">

Sublime Text (神級文本編譯器)使用技巧

8 . 擴充選區

我非常喜歡Emacs的expand-region插件,ST2提供有類似的Expand Selection to Scope功能,但是不太好用,我建議安裝ExpandRegion插件。

首先把光标移到某個位置:

<img src="https://pic4.zhimg.com/71ae7a744b085d502d794d647fed4d43_b.jpg" data-rawwidth="431" data-rawheight="283" class="origin_image zh-lightbox-thumb" width="431" data-original="https://pic4.zhimg.com/71ae7a744b085d502d794d647fed4d43_r.jpg">然後按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)會選擇目前的最小區域:

Sublime Text (神級文本編譯器)使用技巧

然後按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)會選擇目前的最小區域:

<img src="https://pic3.zhimg.com/63a238362e3cf03363e228151c0d21b6_b.jpg" data-rawwidth="426" data-rawheight="276" class="origin_image zh-lightbox-thumb" width="426" data-original="https://pic3.zhimg.com/63a238362e3cf03363e228151c0d21b6_r.jpg">再按一次會向外擴充區域:

Sublime Text (神級文本編譯器)使用技巧

再按一次會向外擴充區域:

<img src="https://pic1.zhimg.com/9c7f85fa302c0e5ce4196d800febffc4_b.jpg" data-rawwidth="432" data-rawheight="273" class="origin_image zh-lightbox-thumb" width="432" data-original="https://pic1.zhimg.com/9c7f85fa302c0e5ce4196d800febffc4_r.jpg">每次按都會不斷地向外擴充區域,直到全選為止。

Sublime Text (神級文本編譯器)使用技巧

每次按都會不斷地向外擴充區域,直到全選為止。

9. 選區增強插件

安裝 MultiEditUtils 插件。

這是一個非常強大的選區增強插件,如果你喜歡用複雜的快捷鍵完成高難度的編輯工作,這個插件可以提供很多方面的支援。

詳細的功能請閱讀項目首頁: philippotto/Sublime-MultiEditUtils · GitHub

10. 代碼格式化

安裝 CodeFormatter 和 SublimeAStyleFormatter 插件。使用時在 Command Palette 找 "format" 相關的指令即可。

11. 顔色高亮

安裝 Color Highlighter,會自動高亮代碼中的顔色,在寫純css的時候比較有用。

12. 語言分析增強

很多時候有些檔案不能被 Sublime Text 準确識别出相應的語言,比如不帶後綴名的配置腳本之類。這時可以使用 ApplySyntax 插件,參照預設配置進行調整就能識别這些特殊情況了。

13. Windows 下輸入法支援

如果遇到輸入法的輸入欄不在光标位置的問題,可以安裝 IMESupport 插件解決。

14. 忽略依賴目錄

有時候我們要用 Sublime Text 的檔案檢索功能找到特定的檔案,如果項目目錄下面有 node_modules、bower_components 之類的檔案夾則會影響輸出結果,再加上這些檔案夾中的檔案平時不會去改動,我們可以修改配置把這些目錄忽略掉。

"folder_exclude_patterns":
 [
	".svn",
	".git",
	".hg",
	"CVS",
	"node_modules",
	"bower_components"
],
           

15. 備份/同步 Sublime Text 配置

如果你經常在不同的電腦用 Sublime Text,你會希望所有的配置改動都能即時同步。如果你試過直接同步整個 Packages 目錄會發現有些插件實際上是有區分系統的,Mac 和 Windows 的會有不同,甚至有些插件會差別主機,直接同步這些插件會造成沖突。

正确的同步辦法在 Package Control 的官網有介紹: Syncing - Package Control 其實很簡單,隻對 Packages/Users 目錄進行同步,Package Control 就能自行解決平台沖突了。