沉淀，再出發：sublime中快捷鍵和html標簽的使用和生成以及使用markdown
一、前言
工欲善其事，必先利其器。在軟件代碼的編寫中，一定要知道IDE或者編輯器的快捷鍵的使用，這樣可以提高很多的效率，特別是在前端代碼的編寫之中，很容易的就出現了HTML標簽，若是每次都一個個敲出來，不僅不美觀，反而非常浪費時間，因此我們需要學習一套快捷生成HTML以及標簽的方法，無疑sublime text是當下非常流行的編輯器軟件，非常強大和好用。那么讓我們來看一下強大的sublime text吧。
二、sublime text中的快捷鍵
2.1、基本的快捷鍵
1 選擇類
2 Ctrl+D 選中光標所占的文本，繼續操作則會選中下一個相同的文本。 3 Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。舉個栗子：快速選中並更改所有相同的變量名、函數名等。 4 Ctrl+L 選中整行，繼續操作則繼續選擇下一行，效果和 Shift+↓ 效果一樣。 5 Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，即可同時編輯這些行。 6 Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內里的內容。 7 Ctrl+M 光標移動至括號內結束或開始的位置。 8 Ctrl+Enter 在下一行插入新行。舉個栗子：即使光標不在行尾，也能快速向下插入一行。 9 Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即使光標不在行首，也能快速向上插入一行。 10 Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。 11 Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。 12 Ctrl+K+0 展開所有折疊代碼。 13 Ctrl+← 向左單位性地移動光標，快速移動光標。 14 Ctrl+→ 向右單位性地移動光標，快速移動光標。 15 shift+↑ 向上選中多行。 16 shift+↓ 向下選中多行。 17 Shift+← 向左選中文本。 18 Shift+→ 向右選中文本。 19 Ctrl+Shift+← 向左單位性地選中文本。 20 Ctrl+Shift+→ 向右單位性地選中文本。 21 Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行之前）。 22 Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行之后）。 23 Ctrl+Alt+↑ 向上添加多行光標，可同時編輯多行。 24 Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行。 25 26 27 編輯類 29 Ctrl+J 合並選中的多行代碼為一行。舉個栗子：將多行格式的CSS屬性合並為一行。 30 Ctrl+Shift+D 復制光標所在整行，插入到下一行。 31 Tab 向右縮進。 32 Shift+Tab 向左縮進。 33 Ctrl+K+K 從光標處開始刪除代碼至行尾。 34 Ctrl+Shift+K 刪除整行。 35 Ctrl+/ 注釋單行。 36 Ctrl+Shift+/ 注釋多行。 37 Ctrl+K+U 轉換大寫。 38 Ctrl+K+L 轉換小寫。 39 Ctrl+Z 撤銷。 40 Ctrl+Y 恢復撤銷。 41 Ctrl+U 軟撤銷，感覺和 Gtrl+Z 一樣。 42 Ctrl+F2 設置書簽 43 Ctrl+T 左右字母互換。 44 F6 單詞檢測拼寫 45 46 47 搜索類 48 49 Ctrl+F 打開底部搜索框，查找關鍵字。 50 Ctrl+shift+F 在文件夾內查找，與普通編輯器不同的地方是sublime允許添加多個文件夾進行查找，略高端，未研究。 51 Ctrl+P 打開搜索框。舉個例子：1、輸入當前項目中的文件名，快速搜索文件，2、輸入@和關鍵字，查找文件中函數名，
3、輸入：和數字，跳轉到文件中該行代碼，4、輸入#和關鍵字，查找變量名。 52 Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位。 53 Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數。 54 Ctrl+： 打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等。 55 Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件。 56 Esc 退出光標多行選擇，退出搜索框，命令框等。 57 58 59 顯示類 60 61 Ctrl+Tab 按文件瀏覽過的順序，切換當前窗口的標簽頁。 62 Ctrl+PageDown 向左切換當前窗口的標簽頁。 63 Ctrl+PageUp 向右切換當前窗口的標簽頁。 64 Alt+Shift+1 窗口分屏，恢復默認1屏（非小鍵盤的數字） 65 Alt+Shift+2 左右分屏-2列 66 Alt+Shift+3 左右分屏-3列 67 Alt+Shift+4 左右分屏-4列 68 Alt+Shift+5 等分4屏 69 Alt+Shift+8 垂直分屏-2屏 70 Alt+Shift+9 垂直分屏-3屏 71 Ctrl+K+B 開啟/關閉側邊欄。 72 F11 全屏模式 73 Shift+F11 免打擾模式
2.2、快速創建新文件
在preferences中點擊“package control”(如果沒有，在下面有安裝方式)
然后輸入AdvancedNewFile，點擊安裝即可：
之后我們是用ctrl+alt+n即可快速創建文件：
2.3、代碼格式化
sublime中自帶的代碼格式化工具（indent和unindent，快捷鍵為 Ctrl+[ 和 Ctrl+] ）其實能力有限，只能進行簡單的格式化，對於不同的語言來說是不一樣的，因此我們需要使用插件，同樣的在package control中安裝相應語言的格式化插件（搜索format,然后選擇即可），這樣就可以了。
但是對於html/css/js這些代碼美化來說還是力有不逮，因此我們可以安裝一下HTML-CSS-JS Prettify，這個插件是一款集成了格式化（美化）html、css、js三種文件類型的插件，插件依賴於nodejs，因此需要事先安裝nodejs，然后才可以正常運行。使用同樣的方法搜索安裝即可。安裝之后右鍵即可看到了。選擇“plugin options->default”,修改相應的nodejs路徑即可，當然我們需要下載安裝nodejs了。
最后使用的時候全選文件-》右鍵，選擇這個插件，然后使用pretty code即可格式化代碼了。
三、安裝sublime text插件emmet
在使用這些功能之前，我們需要安裝一個插件emmet，插件的安裝方法如下：
3.1、打開Sublime text3，點擊View找到Show Console（這兩步可以用快捷鍵ctrl+~代替），則會出現以下界面將以下內容粘貼到控制台輸入框，然后按enter鍵，下面的代碼就是安裝pageage control的：
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
3.2、再點擊Preferences中的Package Control，找到Package Control Install Package，點擊進入，在輸入框中輸入emmet，選擇第一個（注意：筆者這里已經安裝過了，因此顯示的是emmet css，如果沒有安裝就是emmet），則會自動安裝。
3.3、測試：新建一個HTML文檔，在其中輸入html:xt+Tab鍵，看是否出現以下界面，如果出現則安裝成功。
3.4、其他安裝方法
上面的安裝方法是最簡單的了，但是還有其他的安裝方法，比如我們從官網上下載emmet的安裝包，解壓之后到文件夾之中，然后將該安裝包導入到sublime之中。
點擊browser package，將下載的文件解壓到Packages目錄下：
此時也可以使用emmet，但是卻沒有安裝package control，其實並不方便。
四、sublime text中的HTML快速生成方法
下面我們總算可以愉快的使用emmet了：
4.1、新建文檔xhtml、html5等
接着按下tab鍵觸發emmet進行生成：
生成HTML5：
接着按下tab鍵觸發emmet進行生成：
或者可以這樣生成HTML5文件：
接着按下tab鍵觸發emmet進行生成：
4.2、生成HTML標簽
1 輸入任何標記、雙標記按下tab出現正常標簽對 2 style 3 4 創建html標簽含Id、多個類名的標記：創建格式和css選擇器命名方式一致 5 創建id名為box的div標記 6 輸入： div#box 7 創建類名為box的div標記 8 輸入： div.box 9 同時創建兩個div標記id為box1,類名為box2 10 輸入：div#box1+div.box2 11 創建兩個div標記 Id為box1,包含類名為box2 12 輸入：div#box1>div.box2 13 創建id為box1的標記包含兩個類名為box2的標記 14 輸入：div#box1>div.box2*2 15 創建5個div類名為box、內容為1-5 16 輸入：div.box{$}*5 17 創建5個div類名為box1-5 18 輸入：div.box$*5 19 創建1個div類名為box，內容為’Hellow world!’ 20 輸入：div.box{Hellow world!}
五、在sublime中使用markdown插件
5.1、首先我們安裝這幾個插件
Markdown Editing 支持markdown編輯和語法高亮 Markdown Preview 支持markdown導出html預覽支持,ctrl+shift+p輸入mp一般會跳出 auto-save 可自定義的自動保存功能 Markdown Extended 和 Monokai Extended：markdown 代碼高亮插件,兩者配合使用效果最佳。
5.2、創建md文件並測試
之后我們首先創建后綴為.md的文件，然后寫入markdown語法的內容，然后使用Markdown Preview測試：
# zyr
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
- 文本1
- 文本2
- 文本3
1. 文本1
2. 文本2
3. 文本3
[Deadpool](http://img31.mtime.cn/mg/2016/02/05/145836.38850143_210X210X4.jpg)
*一盞燈*， 一片昏黃；**一簡書**， 一杯淡茶。 守着那一份淡定， 品讀屬於自己的寂寞。 保持淡定， 才能欣賞到最美麗
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
使用``` xxx 開頭 ，```結尾的代碼塊； xxx 代表了語言，比如：Java、xml、js等；
示例：
``` java
system.out.print("zyr!")
this is java code space
```
在彈出的框之中選擇markdown，之后就會打開瀏覽器並生成html了：
六、sublime text3破解
6.1、首先將sublime text3的請求的域名定位到本地，偽裝從而避免聯網驗證
windows: c:/windows/system32/drivers/etc/hosts
hosts文件需要管理員權限，因此我們使用管理員方式打開cmd，並且使用notepad記事本打開該文件並修改即可：
127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com
6.2、其次查找當前版本的破解碼
比如3.1.1的 3176 版本可用注冊碼：
----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------
6.3、最后我們禁用更新
禁用 Sublime Text 3 檢測新版本，設置 Preferences -> Settings-User，添加 "update_check": false
注意：其實我們設置了hosts之后，sublime text就已經連不上網了，也不會更新了。
七、sublime text 打開文檔出現亂碼的解決辦法
其實也是非常的簡單，只需要安裝一個插件ConvertToUTF8就可以了。
八、總結
學習了sublime的快捷方式之后，對我們的代碼的編寫是非常有用的，可以節省我們大量的時間和精力，最重要的是要熟練的使用，多練習才能熟能生巧。