Sublime Text 3 web 開發常用配置

前沿

Sublime Text 是一個代碼編輯器（Sublime Text 2是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。Sublime Text是由程序員Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim。是目前應用最廣泛的編程工具之一，受到眾多程序猿的追捧。網絡上已有很多關於Sublime Text3的配置文章，但很多都不太適合本人的需求，很多插件在前端開發中很少會用到或者不能恰當的使用。由於每次重裝一次Sublime Text3都需要在各種文章中搜尋適合自己的插件並安裝，做了很多無用功，特寫出本文總結一下，以備下次使用。

Sublime Text3 注冊

Sublime Text3是一款收費軟件，需要注冊后才能使用。注冊方式如下：

打開Sublime Text3-->Help-->Eenter License-->輸入注冊碼。

限於國人知識產權的薄弱意思和貪婪心理，很少有人真會去買注冊碼，以下是3個注冊碼：

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

—– BEGIN LICENSE —–
K-20
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
—— END LICENSE ——

—– BEGIN LICENSE —–
J2TeaM
2 User License
EA7E-940282
45CB0D8F 09100037 7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA 65758D3B 2EED551F A3E3478C
C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
CFDA1551 51B05B5D 2D3C8CFE FA8B4285
051750E3 22D1422A 7AE3A8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
—— END LICENSE ——

Sublime Text 3安裝插件的方法：

直接安裝

安裝Sublime text 3插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->packages）。

使用Package Control組件安裝

也可以安裝package control組件，然后直接在線安裝：

1. 按Ctrl+`調出console；
2. 粘貼以下代碼到底部命令行並回車：

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( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

1. 重啟Sublime Text 3。
2. 如果在Perferences->package settings中看到package control這一項，則安裝成功。

如果這種方法不能安裝成功，可以進行手動安裝：

1. 先下載https://github.com/wbond/sublime_package_control中的zip文件，解壓后將文件夾名更改為package control。
2. 下載插件分支https://github.com/wbond/sublime_package_control/tree/python3中的zip文件，解壓后覆蓋到package control中，完成此插件API函數的更新。
3. 將package control文件夾放入C:\Users\Mr.DenGo(你的電腦名)\AppData\Roaming\Sublime Text 3\Packages中，重啟sublime text 3即可生效。

用Package Control安裝插件的方法：

1. 按下Ctrl+Shift+P調出命令面板
2. 輸入install 調出 Install Package 選項並回車，然后在列表中選中要安裝的插件。

常用插件列表

• Emmet

Emmet絕對的節省時間。您可以輕松快速地編寫HTML。

使用方法: ctrl + alt + enter，並且開始輸入Emmet風格的HTML.

詳細使用方法可以參考 Emmet指南 。

• DocBlockr

一個真正簡單的方式來輕松地創建許多語言包括JavaScript，PHP和CoffeeScript的文檔塊。只要在函數的上面輸入 /** ，按 Tab 就可以了。DocBlockr會觀察函數需要的變量名和類型，並創建文檔塊。

• Alignment （代碼對齊）

一個非常簡單和易於使用的插件,使你的代碼組織和美觀。當您重溫代碼時候非常有用。

使用方法：選中要調整的行，然后按 Ctrl + Alt + A。

• BracketHighlighter

該插件提供行數列高亮的各種配對的語法符號。（注：就是將配對的括號等顯示在行數列上）

• Sublime Prefixr

Prefixr，CSS3 私有前綴自動補全插件，顯然也很有用哇。

• JS Format

一個JS代碼格式化插件。

• SublimeLinter

一個支持lint語法的插件，可以高亮linter認為有錯誤的代碼行，也支持高亮一些特別的注釋，比如“TODO”，這樣就可以被快速定位。（IntelliJ IDEA的TODO功能很贊，這個插件雖然比不上，但是也夠用了吧）

• JsMinifier

該插件基於Google Closure compiler，自動壓縮js文件。

• jQuery

Sublime Text3支持jQuery。

• CSSComb

這是用來給CSS屬性進行排序的格式化插件。如果你想保持的代碼干凈整潔，並且希望按一定的順序排列（是不是有點強迫症了？），那么這個插件是一種有效解決的方案。特別是當你和其他有自己代碼編寫風格的開發者一同協作的時候。

• MarkDown Editing

SublimeText不僅僅是能夠查看和編輯 Markdown 文件，但它會視它們為格式很糟糕的純文本。這個插件通過適當的顏色高亮和其它功能來更好地完成這些任務。

• DocBlockr

DocBlockr 可以使你很方便地對代碼建立文檔。它會解析函數，變量，和參數，根據它們自動生成文檔范式，你的工作就是去填充對應的說明。

• Git

Git插件，提供Git常用的命令集合。

• FileDiffs

查找文檔不同。

• ColorPicker

如果你經常要查看或設置顏色值，這個插件可以很方便地調用你本機的調色板應用。這是一個雙向的功能，你既可以在調色板中選擇一個顏色，然后按“確定”按鈕把該值填寫到 SublimeText 中活動文檔的當前位置，也可以在活動文檔中選擇一個顏色的值，按此插件的快捷鍵就會在顯示的調色板中定位到該值所對應的顏色。

• CanIUse

如果您想檢查瀏覽器是否支持你包括在你的代碼中的CSS和HTML元素，那么這是你需要的插件。所有您需要做的就是選擇有疑問的元素，插件將為你做其余的事情。

附Sublime Text 3 快捷鍵列表：

精華版

• Ctrl+Shift+P：打開命令面板
• Ctrl+P：搜索項目中的文件
• Ctrl+G：跳轉到第幾行
• Ctrl+W：關閉當前打開文件
• Ctrl+Shift+W：關閉所有打開文件
• Ctrl+Shift+V：粘貼並格式化
• Ctrl+D：選擇單詞，重復可增加選擇下一個相同的單詞
• Ctrl+L：選擇行，重復可依次增加選擇下一行
• Ctrl+Shift+L：選擇多行
• Ctrl+Shift+Enter：在當前行前插入新行
• Ctrl+X：刪除當前行
• Ctrl+M：跳轉到對應括號
• Ctrl+U：軟撤銷，撤銷光標位置
• Ctrl+J：選擇標簽內容
• Ctrl+F：查找內容
• Ctrl+Shift+F：查找並替換
• Ctrl+H：替換
• Ctrl+R：前往 method
• Ctrl+N：新建窗口
• Ctrl+K+B：開關側欄
• Ctrl+Shift+M：選中當前括號內容，重復可選着括號本身
• Ctrl+F2：設置/刪除標記
• Ctrl+/：注釋當前行
• Ctrl+Shift+/：當前位置插入注釋
• Ctrl+Alt+/：塊注釋，並Focus到首行，寫注釋說明用的
• Ctrl+Shift+A：選擇當前標簽前后，修改標簽用的
• F11：全屏
• Shift+F11：全屏免打擾模式，只編輯當前文件
• Alt+F3：選擇所有相同的詞
• Alt+.：閉合標簽
• Alt+Shift+數字：分屏顯示
• Alt+數字：切換打開第N個文件
• Shift+右鍵拖動：光標多不，用來更改或插入列內容
• 鼠標的前進后退鍵可切換Tab文件
• 按Ctrl，依次點擊或選取，可需要編輯的多個位置
• 按Ctrl+Shift+上下鍵，可替換行

選擇類

• Ctrl+D 選中光標所占的文本，繼續操作則會選中下一個相同的文本。
• Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。舉個栗子：快速選中並更改所有相同的變量名、函數名等。
• Ctrl+L 選中整行，繼續操作則繼續選擇下一行，效果和 Shift+↓ 效果一樣。
• Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，即可同時編輯這些行。
• Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內里的內容。
• Ctrl+M 光標移動至括號內結束或開始的位置。
• Ctrl+Enter 在下一行插入新行。舉個栗子：即使光標不在行尾，也能快速向下插入一行。
• Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即使光標不在行首，也能快速向上插入一行。
• Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。
• Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。
• Ctrl+K+0 展開所有折疊代碼。
• Ctrl+← 向左單位性地移動光標，快速移動光標。
• Ctrl+→ 向右單位性地移動光標，快速移動光標。
• shift+↑ 向上選中多行。
• shift+↓ 向下選中多行。
• Shift+← 向左選中文本。
• Shift+→ 向右選中文本。
• Ctrl+Shift+← 向左單位性地選中文本。
• Ctrl+Shift+→ 向右單位性地選中文本。
• Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行之前）。
• Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行之后）。
• Ctrl+Alt+↑ 向上添加多行光標，可同時編輯多行。
• Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行。

編輯類

• Ctrl+J 合並選中的多行代碼為一行。舉個栗子：將多行格式的CSS屬性合並為一行。
• Ctrl+Shift+D 復制光標所在整行，插入到下一行。
• Tab 向右縮進。
• Shift+Tab 向左縮進。
• Ctrl+K+K 從光標處開始刪除代碼至行尾。
• Ctrl+Shift+K 刪除整行。
• Ctrl+/ 注釋單行。
• Ctrl+Shift+/ 注釋多行。
• Ctrl+K+U 轉換大寫。
• Ctrl+K+L 轉換小寫。
• Ctrl+Z 撤銷。
• Ctrl+Y 恢復撤銷。
• Ctrl+U 軟撤銷，感覺和 Gtrl+Z 一樣。
• Ctrl+F2 設置書簽
• Ctrl+T 左右字母互換。
• F6 單詞檢測拼寫

搜索類

• Ctrl+F 打開底部搜索框，查找關鍵字。
• Ctrl+shift+F 在文件夾內查找，與普通編輯器不同的地方是sublime允許添加多個文件夾進行查找，略高端，未研究。
• Ctrl+P 打開搜索框。舉個栗子：1、輸入當前項目中的文件名，快速搜索文件，2、輸入@和關鍵字，查找文件中函數名，3、輸入：和數字，跳轉到文件中該行代碼，4、輸入#和關鍵字，查找變量名。
• Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位。
• Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數。
• Ctrl+： 打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等。
• Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件。
• Esc 退出光標多行選擇，退出搜索框，命令框等。

顯示類

• Ctrl+Tab 按文件瀏覽過的順序，切換當前窗口的標簽頁。
• Ctrl+PageDown 向左切換當前窗口的標簽頁。
• Ctrl+PageUp 向右切換當前窗口的標簽頁。
• Alt+Shift+1 窗口分屏，恢復默認1屏（非小鍵盤的數字）
• Alt+Shift+2 左右分屏-2列
• Alt+Shift+3 左右分屏-3列
• Alt+Shift+4 左右分屏-4列
• Alt+Shift+5 等分4屏
• Alt+Shift+8 垂直分屏-2屏
• Alt+Shift+9 垂直分屏-3屏
• Ctrl+K+B 開啟/關閉側邊欄。
• F11 全屏模式
• Shift+F11 免打擾模式