Sublime介紹

1、 前言

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#。

前言到此結束，下面進入正題。

2、 界面

1、概況：

一、從上到下：標題欄Title、菜單欄Menu、標籤欄Tab、編輯區Editing Area、控制檯Console、狀態欄Status Bar。

二、從作到右：側邊欄（可關閉、文件、文件夾視圖）、編輯區（代碼編輯）、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後，更是如虎添翼，後面再講到

二、多列編輯：按住ctrl點擊鼠標，會出現多個閃爍的光標，這時可同時修改多處，或者按住鼠標中鍵拖拽，

三、代碼註釋功能：ctrl+/、ctrl+shift+/分別未行註釋和塊註釋，再按一下就能去掉註釋，ST2可以自動識別是html、css仍是js文件，給出不一樣類型的註釋。

四、行操做：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標後插入空行，ctrl+d選擇類似，能夠參考後面的快捷鍵列表。

五、右鍵功能：

前3個，你們都知道，第4個，show unsaved changes，顯示未保存的修改，紅色減號表示刪去的內容，綠色加號表示新增的內容

Open Containing Folder…，打開包含此文件的文件夾，這個很方便找到相關的文件

Copy File Path，複製文件路徑，方便咱們複製路徑到瀏覽器中查看

Auto-Format Tags on Selection 格式化選中的文檔，方便咱們更清晰的查看代碼結構，雖然ST2有自動縮進功能，可是當咱們粘貼進一段沒有格式化過的代碼，就須要這個能了，這個功能要安裝了Tag這個插件纔會出現。

六、人性化設計：

ST2雖然仍是beta版中，可是有不少設計細節仍是值得稱讚的，好比點擊一個標籤或者括弧，會在起始處顯示下劃點線，方便看清代碼結果，每一層嵌套代碼間都有豎線，起到視覺輔助的做用。

3、 設置

自定製，數據被保存在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能夠對代碼進行調試。

4、快捷鍵

若稍有英文基礎，則更建議打開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）的內容

查找&替換（Finding&Replacing）

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：上一個書籤

5、插件

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這個插件能在左側高亮顯示匹配的括號、引號和標籤，能匹配的[] , () , {} , "" , '' , <tag></tag>等甚至是自定義的標籤，當看到密密麻麻的代碼分不清標籤之間包容嵌套的關係時，這款插件就能很好地幫你理清楚代碼結構，快速定位括號，引號和標籤內的範圍。

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鍾類型的文件，快捷鍵在這裏\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在這裏\Packages\SublimeTmpl\templates，可修改。 好比下邊簡單的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（輸入框不更隨着光標）

6、主題（Themes）

Sublime Text有大量第三方主題：theme - Labels

一、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",

效果以下：

7、最後購買：

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 ------

8、漢化：

能夠網上找些中文包放進去就好了。

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=bpEp0ePIOEM&list=PLuwqxbvf3olpLsnFvo06gbrkcEB5o7K0g

原文地址：https://www.zhihu.com/question/37342465