SublimeText3系列（1）-安裝、設置、快捷鍵、經常使用插件

工欲善其事，必先利其器！
對於程序猿們來講，一個方便、快捷、跨平臺的代碼編輯器可以大大提升工做效率。
在前端開發中，SublimeText是使用較爲普遍的編輯器。小夥伴們目前使用的版本主要爲SublimeText2與SublimeText3。SublimeText2咱們不提，文中針對的版本是SublimeText3，使用的是Windows版本。

1.SublimeText3的安裝

可到SublimeText的官方網站下載安裝包，有Mac OSX、Ubuntu、與Windows版本。各個系統版本安裝都不困難，Windows版本的安裝與其餘軟件安裝差很少，本身選好安裝目錄，「下一步」就OK！
這裏有個小技巧，在安裝好SublimeText3後，先不捉急打開Sublime程序，先在安裝目錄下新建一個Data文件夾，這樣以後安裝的插件就會放在Data文件夾中，而不是放在默認的%APPDATA%/SublimeText3/Packages中。這樣之後咱們換機器、重裝系統只須要把SublimeText3安裝目錄的文件直接Copy就能夠，避免了重複安裝配置。

2.經常使用設置

SublimeText3的默認設置也能夠，不過本身配置下，可讓本身的眼睛舒服一點，下面是個人配置，你們能夠參考。打開Preference->Setting-User能夠進行用戶自定義設置

{
  "ignored_packages":
  [
    "Vintage"
  ],
  // 設置字體
  /*"font_face": "Microsoft Yahei",*/
  "font_size": 16,
  // 使光標閃動更加柔和
  "caret_style": "phase",
  // 高亮當前行
  "highlight_line": true,
  // 高亮有修改的標籤
  "highlight_modified_tabs": true,
  // 焦點丟失後自動保存
  "save_on_focus_lost": true,
  // 顯示當前文件的編碼
  "show_encoding": true,
  // 設置tab鍵的大小
  "tab_size": 2,
  // tab轉換爲空格
  "translate_tabs_to_spaces": true,
  // 保存的時候把無用的空格去掉
  "trim_trailing_white_space_on_save": true,
  // 自動換行
  "word_wrap": false,
  // 拼寫檢查
  "spell_check": false,
  // 要不要滾過頭
  "scroll_past_end": true,
  // 加粗文件夾名稱
  "bold_folder_labels": true,
  // 寬度指導線
  "rulers": [80],
  // 顯示全路徑
  "show_full_path": true,
  //禁用 Emmet 的 tab 鍵功能（請使用 ctrl+e）
  "disable_tab_abbreviations": true
}

3.SublimeText3經常使用快捷鍵

Ctrl+D 選詞 （反覆按快捷鍵，便可繼續向下同時選中下一個相同的文本進行同時編輯）
Ctrl+G 跳轉到相應的行
Ctrl+J 合併行（已選擇須要合併的多行時）
Ctrl+L 選擇整行（按住-繼續選擇下行）
Ctrl+M 光標移動至括號內開始或結束的位置
Ctrl+T 詞互換
Ctrl+U 軟撤銷
Ctrl+P 查找當前項目中的文件和快速搜索；輸入 @ 查找文件主標題/函數；或者輸入 : 跳轉到文件某行；
Ctrl+R 快速列出/跳轉到某個函數
Ctrl+K Backspace 從光標處刪除至行首
Ctrl+K+B 開啓/關閉側邊欄
Ctrl+KK 從光標處刪除至行尾
Ctrl+K+T 摺疊屬性
Ctrl+K+U 改成大寫
Ctrl+K+L 改成小寫
Ctrl+K+0 展開全部
Ctrl+Enter 插入行後（快速換行）
Ctrl+Tab 當前窗口中的標籤頁切換

Ctrl+Shift+A 選擇光標位置父標籤對兒
Ctrl+Shift+D 複製光標所在整行，插入在該行以前
ctrl+shift+F 在文件夾內查找，與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找
Ctrl+Shift+K 刪除整行
Ctrl+Shift+L 鼠標選中多行（按下快捷鍵），便可同時編輯這些行
Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）
Ctrl+Shift+P 打開命令面板
Ctrl+Shift+/ 註釋已選擇內容
Ctrl+Shift+↑能夠移動此行代碼，與上行互換
Ctrl+Shift+↓能夠移動此行代碼，與下行互換
Ctrl+Shift+[ 摺疊代碼
Ctrl+Shift+] 展開代碼
Ctrl+Shift+Enter 光標前插入行

Ctrl+PageDown 、Ctrl+PageUp 文件按開啓的先後順序切換

Ctrl+Z 撤銷
Ctrl+Y 恢復撤銷
Ctrl+F2 設置/取消書籤
Ctrl+/ 註釋整行（如已選擇內容，同「Ctrl+Shift+/」效果）
Ctrl+鼠標左鍵 能夠同時選擇要編輯的多處文本

Shift+鼠標右鍵（或使用鼠標中鍵）能夠用鼠標進行豎向多行選擇
Shift+F2 上一個書籤
Shift+Tab 去除縮進
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+Shift+分屏序號 將當前焦點頁分配到分屏序號頁

Alt+. 閉合當前標籤
Alt+F3 選中文本按下快捷鍵，便可一次性選擇所有的相同文本進行同時編輯

Tab 縮進 自動完成
F2 下一個書籤
F6 檢測語法錯誤
F9 行排序(按a-z)
F11 全屏模式

4.SublimeText3插件

各類插件均可以到Package Control上去搜索

4.1 管理插件的插件PackageControl

第一個要安裝的插件就是Package Control，這是一個管理SublimeText3的插件，有了它，安裝、更新、刪除其餘插件都變得簡單。
安裝方法PackageControl網站已經給出，你們能夠戳這裏
其實就是使用Ctrl+`快捷鍵打開SublimeText3的命令行窗口，而後複製下面的代碼，回車便可。

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

PackageControl可能會出問題，你們能夠參考這裏的解決辦法。

4.2 側邊欄加強工具SideBarEnhancements

SublimeText3的側邊欄原始功能是比較少的，右鍵菜單隻有新建，刪除，重命名幾個基本的功能，SideBarEnhancements增長了「放入回收站」，「瀏覽器打開」等實用功能。
可以使用Ctrl+Shift+P打開命令面板，輸入Install Package使用PackageControl進行安裝。

SideBarEnhancements插件能夠自定義快捷鍵打開瀏覽器預覽頁面，免去了本身去文件目錄打開瀏覽器測試的麻煩，這個功能太好太強大~~~這裏要感謝 jeffjade童靴的分享
可經過preferences->package setting->side bar->Key Bindings-User，鍵入如下代碼：

[   
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     }
]

這裏設置按Ctrl+Shift+C複製文件路徑，按F2便可在Chrome瀏覽器預覽效果(若是須要的話，也能夠根據本身的須要爲Firefox，Safari，IE，Opera等加上)，固然你也能夠本身定義喜歡的快捷鍵，最後注意代碼中的瀏覽器路徑要以本身電腦裏的文件路徑爲準。

4.3 ZenCoding語法支持Emmet

安裝同上使用PackageControl進行安裝。Emmet使用CSS的語法簡化了HTML/CSS代碼的編寫，是猿類提升效率的好朋友。
Emmet的完整語法能夠參考這裏

4.4 括號高亮工具BracketLighter

安裝同上使用PackageControl進行安裝。
對括號、html標籤進行高亮顯示。

4.5 顏色顯示工具Color Highlighter

安裝同上使用PackageControl進行安裝。
對顏色代碼進行高亮顯示。

4.6 顏色拾取Color Picker

安裝同上使用PackageControl進行安裝。
安裝後，使用快捷鍵Ctrl+Shift+C能夠調出取色板

有了上面的設置和插件，基本SublimeText已經能夠玩的起來了，插件這東西少了不方便，多了機子卡，其實得不償失。後面文章會介紹一些其餘的插件