我在做Web前端開(kāi)發(fā)之前很多年都一直從事.net開(kāi)發(fā)，微軟的IDE Visual Studio從2002版一直用到2015版,，甚至在.net出示之前的版本都用過(guò)（那時(shí)候叫做Visual Basic和Visual C++）,。毋庸置疑，Visual Studio確實(shí)是一款功能非常強(qiáng)大的開(kāi)發(fā)工具,，在代碼編寫,、智能感知、項(xiàng)目編譯以及快速框架搭建方面支持得都很好,！不過(guò)在提供方便的同時(shí),，你會(huì)越來(lái)越感覺(jué)到Visual Studio很臃腫,，啟動(dòng)太慢，占用過(guò)多的系統(tǒng)資源,，混亂的插件管理，功能難以擴(kuò)展,，繁雜的快捷鍵等,。難以想象當(dāng)你需要同時(shí)打開(kāi)2個(gè)以上的Visual Studio時(shí)你的電腦的內(nèi)存會(huì)被瞬間撐爆。后來(lái)在從事Node.js開(kāi)發(fā)時(shí)又接觸了WebStorm編輯器,，WebStorm對(duì)Web前端開(kāi)發(fā)支持得很好,，HTML和JavaScript的語(yǔ)法高亮，JavaScript對(duì)象查找和代碼自動(dòng)補(bǔ)全,，以及對(duì)JavaScript的在線調(diào)試等功能都很好用,。不過(guò)WebStorm貌似比Visual Studio更占系統(tǒng)資源，這可能跟它的緩存有關(guān),，默認(rèn)情況下WebStorm會(huì)保存用戶對(duì)代碼和文件做的所有操作,，方便用戶下次打開(kāi)的時(shí)候可以繼續(xù)編輯（其實(shí)Sublime也有這個(gè)特性，但是比WebStorm啟動(dòng)更快,，響應(yīng)更迅速）,。

　　好了，說(shuō)了一大堆的廢話,，還是讓我們來(lái)看看Sublime的一些常用特性和快捷鍵的使用吧,！

　　這里我以自己的使用習(xí)慣來(lái)介紹一些常用操作和插件的安裝及使用，后續(xù)有新的發(fā)現(xiàn)再陸續(xù)補(bǔ)充,。

　　Sublime的安裝就不贅述了,，直接去官網(wǎng)下載安裝就可以了。有一點(diǎn)需要說(shuō)明下,，官網(wǎng)默認(rèn)只提供了Sublime2的下載地址,，如果你想安裝最新版Sublime3，可直接訪問(wèn)http://www./3,，Sublime3目前還只是beta版,。另外，官網(wǎng)上也提供了說(shuō)明文檔,，在http://www./docs/3/可以查看,。

常用快捷鍵

　　Ctrl + D 選中一個(gè)單詞，繼續(xù)Ctrl + D可以直接選中下一個(gè)相同的單詞進(jìn)入多光標(biāo)模式,，在多光標(biāo)模式下可以在多處位置同時(shí)進(jìn)行編輯,。

　　Ctrl + L 選中當(dāng)前光標(biāo)所在的行?？梢钥焖龠x中一行,，而不用通過(guò)鼠標(biāo)點(diǎn)擊行首來(lái)選中一行,。

　　多行選擇。按住Ctrl鍵同時(shí)鼠標(biāo)左鍵點(diǎn)擊你想要選擇的行的行首,。

　　多光標(biāo)模式,。按住Ctrl鍵同時(shí)鼠標(biāo)左鍵點(diǎn)擊你想要編輯的位置，可以在代碼中插入多個(gè)光標(biāo),，同時(shí)進(jìn)行編輯,。

　　列選擇模式。按住Shift鍵同時(shí)鼠標(biāo)右鍵選擇列,，同時(shí)進(jìn)入多光標(biāo)模式進(jìn)行多行編輯,。

　　Shift + Delete 直接刪除一行?；蛘逤trl + Shift + K

　　Ctrl + Delete 向前刪除,，即刪除光標(biāo)所在位置內(nèi)容的剩余部分。

　　Ctrl + Backspace 向后刪除,，即刪除光標(biāo)所在位置之前的內(nèi)容,。

　　Alt - / Alt + Shift - 向后或者向前導(dǎo)航跳轉(zhuǎn)。該快捷鍵在配合Ctrl + P時(shí)十分有用,，類似于Visual Studio中的Ctrl-和Ctrl+Shift-快捷鍵,。

　　Ctrl + [ 或 ] 代碼縮進(jìn)。

　　Ctrl + Shift + Up 或 Down 將當(dāng)前行向上移動(dòng)一行或向下移動(dòng)一行,。

　　Ctrl + Shift + D 快速?gòu)?fù)制一行,。

　　Ctrl + / 注釋或去掉注釋。

　　Ctrl + K + K 從當(dāng)前光標(biāo)位置直接刪除到行末,。

　　Ctrl + K + Backspace 從當(dāng)前光標(biāo)位置直接刪除到行首（不常用）,。

　　Ctrl + Shift + Enter 在當(dāng)前光標(biāo)所在的行之前插入一行。

　　Ctrl + Enter 在當(dāng)前光標(biāo)所在的行之后插入一行,。

　　Ctrl + K + U 將光標(biāo)所在的內(nèi)容變成大寫字母（不用選中單詞）,。

　　Ctrl + K + L 將光標(biāo)所在的內(nèi)容變成小寫字母（不用選中單詞）。

　　Alt + Left/Right 向左或向右移動(dòng)光標(biāo)時(shí),，每次移動(dòng)一個(gè)單詞的位置,。如果不加Alt鍵每次只移動(dòng)一個(gè)字符的位置。

　　Alt + Shift + Left/Right 從當(dāng)前光標(biāo)所在位置向左或向右選擇整個(gè)內(nèi)容,。

　　Ctrl + Shift + V 在當(dāng)前光標(biāo)所在位置粘貼代碼,，并保持代碼縮進(jìn)和格式不變。

　　Ctrl + P 打開(kāi)快速文件切換面板,。

　　Ctrl + W 關(guān)閉當(dāng)前tab,。

　　Ctrl +/- 放大或縮小字體。

　　Ctrl + K + B 隱藏或顯示side bar

常用插件

Package Control

　　有了Package Control你才能安裝和管理你的Sublime插件,，并讓它的功能強(qiáng)大起來(lái),。對(duì)使用Sublime編輯器的用戶來(lái)說(shuō),，該插件是必須要安裝的。打開(kāi)官網(wǎng)https:///installation 按照說(shuō)明將Python的代碼復(fù)制到Sublime的Console面板中,，安裝會(huì)自動(dòng)進(jìn)行,。如果安裝失敗，可嘗試官網(wǎng)上介紹的手動(dòng)安裝方式,。Package Control在Github上有項(xiàng)目,，感興趣的話可以去查看它的源代碼https://github.com/wbond/package_control

　　通過(guò)Ctrl + Shift + P快捷鍵來(lái)打開(kāi)Package Control面板，在Package Control面板中,，你可以輸入任何你想要執(zhí)行的命令名，然后回車,，Sublime即可執(zhí)行,。命令名支持模糊匹配。例如輸入pci執(zhí)行Package Control: Install Package命令用來(lái)安裝Sublime插件（執(zhí)行該命令通常需要FQ,，否則Sublime會(huì)告訴你無(wú)法找到安裝包）,。

　　Package Control的命令幾乎涵蓋了所有的Sublime功能，例如通過(guò)Package Control: List Packages來(lái)列出所有已安裝的插件包,。通過(guò)Package Control: Key Bindings來(lái)查看和修改快捷鍵配置文件,。其中Default是Sublime默認(rèn)的快捷鍵設(shè)置，User則是用戶自定義的快捷鍵設(shè)置,，User設(shè)置的優(yōu)先級(jí)要高于Default的設(shè)置,。另外，按照官方文檔的說(shuō)明,，你可以針對(duì)特定的項(xiàng)目進(jìn)行配置,，項(xiàng)目的配置文件優(yōu)先級(jí)要高于User設(shè)置。具體的配置方法可以看這里,，http://www./docs/3/projects.html 你可以將項(xiàng)目的配置文件分享給項(xiàng)目組的所有成員,，這樣大家就可以擁有相同的Sublime設(shè)置了，非常方便,。

　　對(duì)于一個(gè)新創(chuàng)建的文件,，我們可以直接在Package Control中輸入語(yǔ)言類型來(lái)添加語(yǔ)法高亮顯示，如JavaScript,。當(dāng)然你也可以通過(guò)鼠標(biāo)點(diǎn)擊Sublime右下角的語(yǔ)言類型選擇列表來(lái)手動(dòng)切換語(yǔ)法高亮顯示,。同時(shí)注意到該區(qū)域左邊還有一個(gè)列表可以用來(lái)切換默認(rèn)的代碼縮進(jìn)，你可以選擇用幾個(gè)tab作為縮進(jìn),，或者是用空格作為縮進(jìn),。

　　有時(shí)候我們想一鍵格式化所有的代碼，在Package Control中輸入Reindent Lines即可,。當(dāng)然,，如果你不想每次都這么麻煩,，可以將該命令設(shè)置成快捷鍵，方法是打開(kāi)Package Control: Key Bindings - User,，在里面加入你自己的快捷鍵設(shè)置,。如果不知道配置文件的格式，可以參考Key Bindings - Default,。還有一個(gè)問(wèn)題是如何才能知道命令的精確名稱是什么,？可以在Sublime中打開(kāi)控制臺(tái)（View>Show Console或者Ctrl + `），然后輸入下面這行命令：

sublime.log_commands(True)

　　然后重新在Package Control中執(zhí)行Reindent Lines命令,，在控制臺(tái)中就可以看到精確的命令名了,。

　　對(duì)于用慣了Visual Studio的用戶來(lái)說(shuō)，我們將該命令綁定到快捷鍵Ctrl + K + D上,，所以我們需要在Key Bindings - User文件中進(jìn)行下面的設(shè)置：

[
    { "keys": ["ctrl+k", "ctrl+d"], "command": "reindent", "args": { "single_line": false } }
]

 　　Sublime所有的設(shè)置都保存在Packages目錄下,，通過(guò)菜單Preferences>Browse Packages可以打開(kāi)Packages目錄，進(jìn)入U(xiǎn)ser目錄,，可以查看所有的配置文件,。

　　另外，通過(guò)Package Control: Toggle Minimap命令來(lái)隱藏或顯示窗口右側(cè)的Minimap面板,。其對(duì)應(yīng)的菜單為View>Hide Minimap/Show Minimap,。

SideBarEnhancements

　　默認(rèn)情況下Sublime編輯器沒(méi)有對(duì)Side bar面板提供任何上下文菜單，通過(guò)安裝SideBarEnhancements插件可以增強(qiáng)Side bar面板的功能,。安裝方法是通過(guò)快捷鍵Ctrl + Shift + P打開(kāi)命令面板,，輸入Package Control: Install Package，然后輸入SideBarEnhancements,，回車即可完成安裝過(guò)程,。SideBarEnhancements插件的Github地址是https://github.com/titoBouzout/SideBarEnhancements/tree/st3

SyncedSideBar

　　SyncedSideBar插件用來(lái)自動(dòng)展開(kāi)你所打開(kāi)的文件所在的目錄，這樣當(dāng)你通過(guò)命令在不同的文件之間快速切換的時(shí)候可以非常直觀地看到當(dāng)前文件輸入哪個(gè)目錄下,。

Sass

　　安裝Sass插件用來(lái)對(duì)Sass文件進(jìn)行語(yǔ)法提示和高亮顯示,。

Insert Callback和JavaScript & NodeJS Snippets

　　由于Node.js是基于事件驅(qū)動(dòng)的，這使得我們?cè)诰帉慛ode.js代碼時(shí)會(huì)經(jīng)常用到回調(diào)函數(shù),。Insert Callback插件通過(guò)Alt + C快捷鍵迅速地在光標(biāo)所在的位置插入回調(diào)函數(shù),，并自動(dòng)添加函數(shù)的第一個(gè)參數(shù)err，第二個(gè)參數(shù)d,，通常情況下這正是我們想要的,。例如下面這個(gè)回調(diào)函數(shù)的生成：

PersonModule.find({name: 'Wang'},function(err, d) {
    // do something
});

　　安裝JavaScript & NodeJS Snippets插件可以幫助你在編寫Node.js代碼時(shí)給出提示和代碼補(bǔ)全。Sublime同時(shí)還有許多的code snippet,，在Package Control的官方網(wǎng)站https://主頁(yè)點(diǎn)擊Labels,，可以按照不同的分類標(biāo)簽找到你感興趣的插件，例如snippets，theme等,。

AdvancedNewFile

　　AdvancedNewFile插件能讓你快速地將新文件創(chuàng)建到指定的目錄下,。通過(guò)快捷鍵Ctrl + Alt + N打開(kāi)創(chuàng)建文件浮動(dòng)面板，然后直接輸入路徑及文件名即可在指定的目錄下創(chuàng)建新文件,。對(duì)于不存在的目錄,，Sublime會(huì)自動(dòng)為你創(chuàng)建，非常方便,。

DocBlockr

　　通過(guò)DocBlockr插件可以快速地在代碼中添加各種不同風(fēng)格的注釋,。嘗試在代碼中輸入"/*"或者"/**"，然后回車,，DocBlockr會(huì)自動(dòng)生成注釋行,。如果在函數(shù)體前面輸入"/**"類型的注釋，DocBlockr還會(huì)自動(dòng)生成函數(shù)的說(shuō)明,。

SublimeLinter和SublimeLinter-jshint

　　如果你使用Sublime進(jìn)行Node.js項(xiàng)目開(kāi)發(fā),，使用SublimeLinter和SublimeLinter-jshint插件可以幫助你進(jìn)行js語(yǔ)法校驗(yàn)，以減少代碼編寫過(guò)程中出錯(cuò)的幾率,。但前提是你需要全局安裝jshint：

npm install -g jshint

　　紅色的表示語(yǔ)法錯(cuò)誤，需要修改,。黃色的表示警告,，以提示你使用良好的編碼風(fēng)格來(lái)編寫代碼。jshint的語(yǔ)法校驗(yàn)規(guī)則是可以自定義的,，通過(guò)在項(xiàng)目根目錄下創(chuàng)建.jshint文件,，添加配置信息即可生效。詳細(xì)的規(guī)則設(shè)置可以參考jshint官方站點(diǎn)http:///

Emmet

　　Emmet是一款功能非常強(qiáng)大的HTML代碼補(bǔ)全插件,。嘗試在Sublime中創(chuàng)建一個(gè)新文件,，并將文件類型設(shè)置為html（Ctrl + Shift + P，輸入html回車即可將文件類型設(shè)置為html） ,，然后輸入一個(gè)!,，使用Tab鍵或者快捷鍵Ctrl + E即可快速生成一個(gè)標(biāo)準(zhǔn)的HTML5頁(yè)面框架。

　　Emmet還有許多非常便捷的HTML標(biāo)記生成片段,，這些片段我們稱之為作弊條,，從Emmet官網(wǎng)http://docs./cheat-sheet/可以了解到所有作弊條的用法。這些作弊條不僅適用于生成html,，同時(shí)也適用于css的編寫,。

　　Emmet插件對(duì)編寫HTML和CSS來(lái)說(shuō)是一款必備的插件，它可以大大提高代碼編寫的效率,，強(qiáng)烈推薦安裝,。

GitGutter

　　如果你打算用git作為項(xiàng)目開(kāi)發(fā)的版本控制工具，GitGutter插件可以更好地幫助你在Sublime編輯器中查看文件的改動(dòng)和差異。查看github上的項(xiàng)目地址https://github.com/jisaacks/GitGutter

　　Sublime編輯器還有許多非常實(shí)用的功能,，可以參考官方網(wǎng)站的文檔http://sublime-text-unofficial-documentation./en/sublime-text-3/獲取到更詳細(xì)的內(nèi)容,，其中有關(guān)snippets代碼補(bǔ)全和build systems編譯系統(tǒng)在日常工作中都可以大大降低重復(fù)工作，從而提高工作效率,。

關(guān)于Node.js的代碼調(diào)試

　　其實(shí)最簡(jiǎn)單有效的調(diào)試方式莫過(guò)于在代碼中插入console.log()語(yǔ)句,，將需要查看的變量或?qū)ο笸ㄟ^(guò)console.log()語(yǔ)句輸出，然后執(zhí)行代碼,，在控制臺(tái)查看輸出的結(jié)果即可幫忙診斷程序的運(yùn)行情況,。但有時(shí)我們?nèi)匀幌Ｍ芡ㄟ^(guò)斷點(diǎn)來(lái)跟蹤代碼的執(zhí)行情況，并實(shí)時(shí)查看變量或?qū)ο蟮闹?。在WebStrom中可以非常方便地在線調(diào)試Node.js代碼,，但它的控制臺(tái)和監(jiān)視窗口我實(shí)在用不習(xí)慣，加上WebStrom啟動(dòng)緩慢占用系統(tǒng)資源又多,，所以并不推薦,。Sublime中還沒(méi)有發(fā)現(xiàn)比較好用的調(diào)試Node.js的插件（或許我還不知道），不過(guò)使用node-inspector通過(guò)Chrome瀏覽器的js調(diào)試工具來(lái)調(diào)試Node.js代碼還是挺方便的,。

　　首先你需要安裝node-inspector,。使用npm將其安裝到全局：

npm install -g node-inspector

　　然后啟動(dòng)node-inspector。默認(rèn)情況下node-inpector監(jiān)聽(tīng)8080端口,，可以通過(guò)參數(shù)--web-port=[port]來(lái)設(shè)置端口,。啟動(dòng)之后在控制臺(tái)復(fù)制鏈接，例如http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858,，打開(kāi)Chrome瀏覽器訪問(wèn),，這時(shí)還不會(huì)加載任何代碼。

　　再打開(kāi)另一個(gè)控制臺(tái),，切換到Node.js代碼的目錄,，然后運(yùn)行Node.js代碼，并加上--debug或--debug-brk參數(shù),，如：

　　程序運(yùn)行之后在Chrome中輸入Web程序的訪問(wèn)地址,，這時(shí)你會(huì)發(fā)現(xiàn)之前打開(kāi)的node-inspector窗口已經(jīng)自動(dòng)加載了Node.js的代碼，然后你可以在其中加入斷點(diǎn)并進(jìn)行調(diào)試了,。調(diào)試方式和在Chrome中調(diào)試前端JavaScript代碼一樣,，非常方便。注意調(diào)試窗口可能需要一些時(shí)間來(lái)加載代碼,，所以當(dāng)你在Chrome中沒(méi)看到代碼時(shí)需要耐心等待一會(huì)兒,。