如何優雅地使用 Sublime Text 3

概述

sublime text3 下載地址 ：本文所有操作都是基於Sublime Text3，操作系統為mac，本文主要摘取自Sublime Text Unofficial Documentation。熟練掌握各種功能和技巧，能極大提高工作效率。

快捷鍵集合

快捷鍵

• Cmd + shift + d: 復制並粘貼當前選中內容, 如果沒選中,復制粘貼光標所在行

安裝

• 官網下載.dmg文件
• 打開.dmg文件
• 拖拽Sublime Text 3到Applications文件夾

如果想要在命令行中啟動Sublime Text，需要在終端執行一下命令：

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

這樣設置之后在終端執行subl即可打開Sublime Text，執行subl <filepath>可以打開對應文件。

基本概念

熟悉本節介紹的概念能讓你更好地理解本教程。

The Data Directory

幾乎所有需要的文件都會保存在data directory下，不同操作系統路徑不同：

• Windows: %APPDATA%\Sublime Text 3
• OS X: ~/Library/Application Support/Sublime Text 3
• Linux: ~/.config/sublime-text-3

可以通過菜單:(Sublime Text -> Preferences -> Browse Packages…)在findle中打開該目錄的子目錄。

The Packages Directory

這是data directory下的一個重要目錄。關於編程和標記語言的所有支持都保存在這里。可以通過菜單:(Sublime Text -> Preferences -> Browse Packages…)在findle中打開該目錄。

本文中Packages, packages path, packages folder或者packages directory都指它。

The User Package

Packages/User用於保存自定義插件(plugins)，snippets,宏(macros)。可以將它看作packages folder下的私人區域。個人程序和插件設置都存放在這里。

Sublime Text更新時不會修改里面的內容。

Sublime Text是可編程的

可以通過API使用Python開發插件。 快捷鍵Ctrl + `打開控制台，可以在這里執行Python腳本，可以通過這里安裝一些插件。

Packages, Plugins, Resources and Other Terms

幾乎Sublime Text的所有功能都可以擴展和自定義，可以修改編輯器行為，添加macro和snippets，擴展菜單等等。也可以利用編輯器API創建復雜插件。

Sublime Text的靈活性導致你需要學習很多配置文件。這些配置文件都是JSON活着XML格式。

本文中有時候講這些配置文件叫做resources。

Sublime Text會查看packages folder下的resources。

package是指包含相關資源的目錄。

vi/vim Emlation

可以使用Vintageous讓Sublime Text支持vi/vim

編輯

多字段選擇修改

Sublime Text支持多處文本的同時修改：

• 選中需要修改的文字，編輯器會自動提示文檔內的相同文本。
• 按Cmd + d添加下一個文本段到標記列表，如果需要跳過當前文本段，按Cmd + k然后Cmd + d
• 快捷鍵Cmd + u可以將當前文本段從編輯列表去掉
• ESC鍵可以退出編輯狀態

整行選取

• Cmd + l可以選取光標所在行，活着當前選區所在所有行
• Cmd + Shift + l可以將選區的分裂為多選區，可同時編輯

文本選擇

• alt + shift + <arrow>在對應放上增加下一個token入選區
• ctrl + shift + m選中光標所在括號的所有內容
• Cmd + shift + j選中與光標所在行相同縮進的內容

字符交換

• ctrl + t交換相鄰的兩個字母

搜索替換

Sublime Text支持Perl Compatible Regular Expressions (PCRE) engine的正則表達式搜索，默認搜索為普通搜索，需要在搜索框左邊點擊對應按鈕切換到正則表達式搜索，也可以使用快捷鍵進行切換。

• option + Cmd + r搜索的正則表達式和普通文本切換

單文件內的搜索和替換

• Cmd ＋ f打開搜索框
• ESC關閉搜索框
• option + Cmd + c切換區分大小寫
• option + Cmd + w切換是否完整匹配：time 匹配timeOut或者 time單獨單詞
• option + Enter選中全部匹配結果並可同時編輯
• Cmd + g或者Enter查找下一個
• Cmd + shift + g查找前一個
• Cmd + e選中文本后按此快捷鍵可直接搜索

替換

• option + Cmd + f打開替換面板
• Cmd + g或者Enter查找下一個
• option + Cmd + e替換並查找下一個
• option + Enter當焦點在替換面版時會選中全部匹配項並處於可編輯狀態

多文件搜索

• Cmd + shift + f打開多文件搜索面版

設置多文件搜索范圍

在多文件搜索面版的Where欄指定搜索范圍，支持以下方式的搜索范圍指定：

• unix格式的路徑
• 使用通配符排除特定文件
• symbolic location入：<open folders>,<open files>等

也可以使用逗號結合以上三種格式的范圍。

文件導航和文件管理

goto anything文件導航

搜索項目任意文件並導航。可在搜索欄進行過濾，可預覽當前選中文件。

• Cmd + p打開文件面版
• Enter打開當前項並關閉導航面版
• ->打開當前項，不關閉導航面版
• ESC關閉導航面版

更多操作：

• Cmd + r搜索當前文件內的symbol，如函數，類，或者markdown的標題
• ctrl + g跳轉到指定行

左側side bar導航

• Cmd + k然后Cmd + b可切換導航關閉狀態

項目

Sublime Text將當前打開文件，文件夾當作一個project，將文件夾拖拽到side bar可添加到當前項目。菜單中選擇(Project -> Save Project As…)可將相關文件文件夾關聯信息保存，下次通過菜單(Project -> open project)可快速打開所有相關文件。

使用snippet添加常用模板

將常用的代碼段保存起來, 使用tab在設置好的文本上擴展出來,能提高效率,設置方法:

1. 菜單: Tools –> New Snippet… 自動打開模板
2. 編輯好之后保存在Packages/User目錄下即可,文件后綴為.sublime-snippet

<snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>

1. content下CDATA包裹的是擴展后的最終文本
2. tabTrigger是snippet的標識, 在標識后面按tab會用content替換標識
3. 觸發替換的作用域

例子如下:

<snippet> <content><![CDATA[ @author: 德淸 [e-mail] ]]></content> <tabTrigger>author</tabTrigger> </snippet>

在author之后按tab鍵會擴展為@author: 德淸 [e-mail]

sublime text3基本使用及常用插件介紹

sublime text3 下載地址：本文所有操作都是基於Sublime Text3

這里是一個非常全面的教程

快捷鍵列表

• Ctrl + g 跳轉到相應的行
• Ctrl + m 在括號起始位置和終止位置之間切換
• Ctrl + Shift + m 選中括號內內容
• Ctrl + Shift + k 刪除光標所在行
• Ctrl + x 當光標選中區間時剪切選中區間，否則剪切光標所在行
• Ctrl + Shift + up 向上選擇行，並支持同時編輯多行
• Ctrl + Shift + down 向下選擇行，並支持同時編輯多行
• Ctrl + l 選擇光標所在行

FAQs

1.不支持gbk編碼

安裝插件ConvertToUTF8,可能需要根據提示安裝輔助插件

2.HTML標簽中間的大括號如何自動補全

菜單-> preferences -> Key Bindings - User在json配置文件中添加如下配置

{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}}

3.中文輸入法不跟隨輸入位置

答：官方修復之前使用：IMESupport插件

4.如何為特定文件類型制定語法高亮，如為.handlebar文件設置html高亮

答：菜單中選擇：View > Syntax > Open all current extension as... > html這樣就可以為自定義后綴名文件使用所需的語法高亮

Package Control插件管理

Package Control是Sublime Text的包管理器，可以通過它安裝2000多個package。安裝后的package將自動更新。基本上大部分工具通過自動和手動都可以完成安裝。

通過控制台安裝Package Control

1.按快捷鍵ctrl + `調出控制台
2.在控制台中運行如下代碼

 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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)

3.以上代碼將創建Package安裝目錄。並且下載Package Control.sublime-package文件到目錄下。
4.重啟Sublime Text，完成安裝

手動安裝Package Control

自動安裝的原理其實就是在特定目錄為Package Control創建文件夾和配置文件，手動創建所需目錄，文件同樣可以達到安裝的目的：

1. 菜單中選擇：Preferences > Browse Packages...
2. 在打開的資源管理器中向上一個目錄，然后進入到Installed Packages/目錄
3. 下載Package Control.sublime-package並復制到Installed Packages/目錄下
4. 重啟Sublime Text，完成安裝

卸載已安裝的插件

如果是通過package control安裝的, 快捷鍵Cmd + shift + p打開面板搜索Package Control: Remove Package然后選擇需要卸載的插件

SidebarEnhancements

為左側sidebar增加功能

Emmet

Emmet通過簡潔的語法描述html內容，提高工作效率

使用Package Control安裝Emmet

1. 快捷鍵ctrl + shift + p然后在控制窗口中輸入Package Control: Install Package
2. 選擇Emmet安裝，重啟Sublime Text完成安裝

快捷鍵

Tab

在HTML, XML, HAML, CSS, SASS/SCSS, LESS and strings in programming languages (like JavaScript, Python, Ruby etc.)中按Emmet語法寫好語句后Tab鍵即可生成所需的代碼。

由於某些語言中Sublime Text默認的Tab行為是作者更期望的，可以在Emmet.sublime-setting文件中設置disable_tab_abbreviations_for_scopes來取消Tab在這些文件類型中的觸發。具體方法見官網tab-key-handler

ctrl + e

默認在大部分自定義后綴名的文件中使用Tab是不能觸發Emmet的，但是使用ctrl + e可以在任意文檔中生效，這在編寫html模板時非常有用

Emmet基本語法

emmet-zen-coding-tutorial是個很不錯的教程，下面是一些簡單的語法規則

元素

通過元素名生成HTML標簽，如div生成<div></div>，當需要生成自定義標簽時，使用ctrl + e即可，如foo生成<foo></foo>

子元素嵌套>

類似CSS子選擇器div>ul>li生成

<div> <ul> <li></li> </ul> </div>

兄弟元素+

類似CSS兄弟選擇器，+生成兄弟關系的元素div+p+div生成

<div></div> <p></p> <div></div>

向上操作符^

Emmet操作符的作用對象是基於當前上下文的，>操作符會讓上下文向下轉移到深層元素，^操作符可以向上移動上下文，如div+div>p>span+em生成

<div></div> <div> <p><span></span><em></em></p> </div>

通過^操作符修改上下文控制元素div+div>p>span+em^bq生成

<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

多元素操作符*

使用*后跟數字，生成對於數量的元素ul>li*5生成

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

分組操作符()

使用括號分組完成復雜的邏輯div>(div>ul>li*2>a)*2+footer>p生成

<div> <div> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <footer> <p></p> </footer> </div>

id和class生成

使用類似css中id和class的語法，可以為元素添加所需屬性如div#header+div.cls1.cls2生成

<div id="header"></div> <div class="cls1 cls2"></div>

自定義屬性

使用類似css中[attr]的語法添加自定義屬性td[title="Hello" colspan=3]生成

<td title="hello" colspan="3"></td>

元素編號$

使用*生成多個元素的時候，可以使用$進行編號ul>li.item$*5生成

<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

{}添加文本

ul>(li{item $})*3生成

<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

Sublime Text Markdown Preview

sublimetext-markdown-preview是Sublime Text的一個Markdown預覽插件，有了它就可以輕松使用Sublime Text編輯Markdown文檔了。

使用Package Control安裝

1. 如果沒有安裝過Package Control，先安裝
2. 按快捷鍵Ctrl + shift + p打開命令窗口
3. 在命令窗口中執行Package Control: Install Package
4. 選擇Markdown Preview並進行安裝

手動安裝

1. 在菜單中選擇Preferences > Browse Packages...
2. 在彈出的資源管理器中向上一個目錄，然后進入到Installed Packages/目錄
3. 下載sublimetext-markdown-preview壓縮包到Installed Packages/目錄下並重命名為Markdown Preview.sublime-package
4. 重啟Sublime Text

預覽Markdown文件

1. 打開Markdown文件
2. 快捷鍵Ctrl + shift + p，在控制窗口中輸入Markdown Preview
3. 此時有多個選項可選，一般選擇Markdown Preview: Preview in Browser
4. 此時要求選擇解析器，任選一個即可
5. Sublime Text在默認瀏覽器中打開Markdown解析后的html文件，有時候只是在新選項卡中打開了html文件，可以右鍵：copy file path然后到瀏覽器中訪問即可

sublime-autoprefixer

sublime-autoprefixer根據Can I Use數據庫信息為CSS樣式添加適當的廠商前綴，也可以自定義需要添加前綴的瀏覽器版本。

sublime-autoprefixer只對CSS起作用，不處理Sass或者LESS之類的預處理格式。

使用Package Control安裝sublime-autoprefixer

• 快捷鍵ctrl + shift + p然后控制台輸入Package Control: Install Package
• 在彈出窗口中輸入Autoprefixer，安裝，重啟Sublime Text

使用autoprefixer

1. 支持整個css文件添加前綴，也可選中部分cas代碼添加前綴
2. 快捷鍵ctrl + shift + p，輸入Autoprefix CSS回車

使用BracketHighlighter高亮括號配對

高亮括號配對在查找時很方便

使用Package Control安裝BracketHighlighter

1. 如果沒有Package Control，先安裝
2. 快捷鍵ctrl + shift + p，在控制窗口中輸入Package Control: Install Package
3. 在控制窗口中輸入BracketHighlighter並選擇安裝
4. 安裝完成

auto-save自動保存修改

這個插件在1秒沒有按鍵時會自動保存。個人感覺太頻繁，可根據需求選擇

也可以啟動sublime text的自動保存功能：

菜單： Sublime Text -> Preferences -> Settings - user

在配置文件中加上： "save_on_focus_lost": true 這樣當前文檔失去焦點時會自動保存

quoteHTML將HTML拼接為js字符串

轉載請注明出處: http://qiudeqing.com/tools/2015/05/31/sublime-text-3.html