如何優雅地使用 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: 德淸 deqing.qdq@alibaba-inc.com ]]></content> <tabTrigger>author</tabTrigger> </snippet>

在author以後按tab鍵會擴展爲@author: 德淸 deqing.qdq@alibaba-inc.com

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