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 打開搜索框。舉個栗子：一、輸入當前項目中的文件名，快速搜索文件，二、輸入@和關鍵字，查找文件中函數名，三、輸入：和數字，跳轉到文件中該行代碼，四、輸入#和關鍵字，查找變量名。
• 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 免打擾模式