Sublime Text3 常用快捷鍵動畫演示及優秀外掛分享

Sublime Text 是前端的一個神器，以其精簡和可DIY而讓廣大fans瘋狂。好吧不吹了直入正題 -_-!!

首先是安裝，如果你有什麼軟體管家的話搜一下就好，一鍵安裝。然後，有錢的土豪就自己買個吧，窮逼就搜下註冊碼看下有沒有土豪共享咯。

既然是神器，肯定有你不知道的東西不是，下面這部分來講操作。PS：大部分圖片和文字來自網路，這裡只是略微排版方便查閱。

測試作業系統：Win10
測試軟體版本：Sublime Text3 3059

Sublime Text3 操作部分

1. 就近選擇相同項: ctrl+d

把游標放在一個單詞上，按下ctrl+d，將選擇這個單詞。一直按住ctrl且按D多次，將選擇當前選中項的下一個匹配項。通過按住ctrl，再按D三次，將選擇三個相同的文字。

2. 選擇當前檔案所有匹配項: alt+f3

選擇檔案中的所有匹配項。小心使用這個，因為它能選擇一個檔案中的所有匹配項. .

3. 選擇文字的包裹標籤: ctrl+shift+` （ESC鍵下面的那個）

這是一個法寶。也許你希望所有屬性保持不變，但只是想選擇標籤。這個快捷鍵為你這樣做，會注意到你可以在一次操作多個標籤。ps：需要Emmet外掛（可以直接到後面看外掛的安裝）

4. 向上擴充套件一層: ctrl+shift+a

如果你把游標放在文字間再按下上面的鍵將選擇文字，就像ctrl+d。但是再次按下它，將選擇父容器，再按，將選擇父容器的父容器。ps：需要Emmet外掛（可以直接到後面看外掛的安裝）

5. 選擇括號內的內容: ctrl+shift+m

這有助於選擇括號之間的一切。同樣適用於CSS。

6. 整行的上下移動: ctrl+shift+↑或 ctrl+shift+↓

7. 複製行或選中項: ctrl+shift+d

如果你已經選中了文字，它會複製你的選中項。否則，把游標放在行上，會複製整行。

8. 增加和減少縮排: ctrl+[ 或 ]

9. 單行剪輯或選中項: ctrl+x

10. 貼上並複製格式: ctrl+shift+v

11. 用標籤包裹行或選中項: alt+shift+w

12. 移除未閉合的容器元素: ctrl+shift+;

這會移除與你的游標相關的父標籤。對清除標記很有幫助。

13. 大寫和小寫: 大寫ctrl+k+u、小寫ctrl+k+l

14. 註釋選中項/行: ctrl+/

這個在所有語言下都可用， 對行和選中項都可用

15. 刪除一行: ctrl+shift+k

這個就不用圖了吧

Sublime Text3 外掛部分

首先是安裝包管理器Package Control，Sublime Text3的指令已經更新了，Sublime Text2更新上來的童鞋注意下
Ctrl+`開啟控制檯或者View->Show Console選單開啟命令列

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

就是上面這串東西了，然後就可以接下來的安裝外掛了

Tips: 外掛名字連結到github，網路不好的童鞋自行下載包扔到Preferences->Browse Packages開啟的資料夾下面，然後解壓，重啟Sublime就行

1. emmet

這個沒有什麼好說的，類似jQuery的語法，編碼蹭蹭往上提。不過要求PyV8環境（安裝完後你會看到有一個資料夾），最好還是選擇線上裝吧。

ctrl+shift+P 輸入 install Package 等待讀取伺服器列表，輸入emmet第一個就是了

ps：最好看一下 github裡面的簡單教程

2. 側邊欄增強外掛SideBarEnhancements

這個也沒有什麼好說的，誰用誰知道，大大增強右鍵列表的功能，裝上就能用。

3. 控制檯撥出外掛Terminal

用node，Grunt等等要調出控制檯的娃知道的，簡直神奇有木有，裝上就能用。

Tips:快捷鍵 ctrl+shift+T撥出當前檔案路徑的控制檯

4. 程式碼提示外掛SublimeCodeIntel

這個也沒什麼廢話吧，支援多語言的高速編碼的程式碼提示工具。
裝上後還不能直接使用，查了一下原因要配置
你可以點選 Preferences->Browse Packages->SublimeCodeIntel然後新增一個.codeintel資料夾再再在資料夾裡面新增一個config檔案（Windows建立.codeintel資料夾需要輸入.codeintel.）

config檔案配置：

{
    "PHP": {
        "php": '/usr/bin/php',
        "phpExtraPaths": [],
        "phpConfigFile": 'php.ini'
    },
    "JavaScript": {
        "javascriptExtraPaths": []
    },
    "Perl": {
        "perl": "/usr/bin/perl",
        "perlExtraPaths": []
    },
    "Ruby": {
        "ruby": "/usr/bin/ruby",
        "rubyExtraPaths": []
    },
    "Python": {
        "python": '/usr/bin/python',
        "pythonExtraPaths": []
    },
    "Python3": {
        "python": '/usr/bin/python3',
        "pythonExtraPaths": []
    }
}

其實只要有JS就夠了，不過或許某天你要寫PHP了呢是吧，留著吧。

然後開啟Sublime建立個檔案試一下，如果還不行就按下 ctrl+shift+space 開啟提示功能

5. 程式碼排版外掛Sublime-HTMLPrettify

以前用的是什麼TAG，CssComb和JSFormat，但是某一天發現這款整合prettify的外掛後就一直沒換過了,不要被外掛的HTML迷惑，這是一款可以用於HTML，CSS，Javascript的整合排版外掛

Tips:安裝完快捷鍵ctrl+shift+h 一鍵格式化程式碼

6. CSS3字首補充外掛Autoprefixer

ctrl+shift+P輸入install Package等待讀取伺服器列表，輸入autoprefixer第一個就是了

要裝Node.js，沒有的話去下載安裝吧

外掛使用CanIUse資料庫，能精準判斷哪些屬性需要什麼字首

Tips:使用方法：在輸入CSS3屬性後（冒號前）按Tab鍵

Sublime Text3 新增右鍵選單和快捷開啟瀏覽器

新增右鍵選單

有時候要開個檔案要開個Sublime Text3，又要拉檔案，麻煩。這裡介紹將Sublime新增到右鍵選單。

1. 開啟登錄檔，開始→執行→regedit
2. 在 HKEY_CLASSSES_ROOT→ * → Shell 下面新建項命名為Sublime Text
3. 右鍵Sublime Text項，新建字串值，命名為Icon，值為 “sublime_text.exe所在路徑,0”，例如：C:\Program Files\Sublime Text 3\sublime_text.exe,0
4. 右鍵Sublime Text項，新建項，命名為command，預設值為 “sublime_text.exe所在路徑 %1”，例如：C:\Program Files\Sublime Text 3\sublime_text.exe %1

搞定後隨便右擊個文字檔案試試，是不是看到了Sublime開啟的選項了捏？Perfect

一鍵瀏覽檔案

Preferences->Key Bindings - User開啟使用者快捷鍵設定，copy下面的設定

[
    //firefox
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
            "extensions": ".*"
        }
    },
    //chorme
    {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\manfr\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions": ".*"
        }
    },
    //IE
    {
        "keys": ["f3"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
            "extensions": ".*"
        }
    },
    //safari
    {
        "keys": ["f4"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Safari\\Safari.exe",
            "extensions": ".*"
        }
    }
]

稍微解釋下，keys是按鍵，application是瀏覽器應用程式路徑，注意反斜槓的要轉義。extensions是匹配所有的檔案字尾格式。

Tips:查了下預設的快捷鍵，Sublime Text3中f1-f12中只有f11被預設為全屏命令，其他的沒設定。也就是說，你可以裝十個八個瀏覽器一字排開按過去測試。

Sublime Text3 問題部分（自己遇到過的）

1.自動更新

有時候會彈出自動更新的框，解決方法：

1. 找到Preferences -> Settings-User（設定使用者）
2. 在最後一個花括號結尾（“｝”）前新增一句："update_check":false
3. 然後請關閉Submine Text並重啟，即不會再彈出更新提醒了

2.不能獲取外掛列表 Package Control：There are no packages available for installation

1. cmd下輸入ping sublime.wbond.net連結一下看下sublime.wbond.net這個域名的ip
2. 開啟C:\Windows\system32\drivers\etc\hosts檔案。
   在最後面加上例如 50.116.34.243 sublime.wbond.net這樣的對應關係，IP是上面測試的
3. 然後請關閉Submine Text並重啟，即不會再彈出更新提醒了

參考:

Sublime Text 3前端開發常用優秀外掛介紹——黃映焜
Gif多圖：我常用的 16 個 Sublime Text 快捷鍵 | 氪星人