Sublime是一款功能非常強大的輕量級的代碼及文本編輯工具,有關它的介紹和下載可以從官網http://www.sublimetext.com獲取。盡管Sublime並非是一款完全免費的IDE開發工具,要獲取商業許可和License你需要支付一定的費用,盡管很便宜!不過這並不影響你使用Sublime的所有功能。我相信以下的10個理由足夠讓你很快喜歡上它!
- 無任何學習難度,快速上手,不需要掌握任何編程相關的背景知識。因為它本身就是一款文本編輯工具。
- 強大的編輯功能,支持多點編寫。允許在文檔中的不同位置存在多個光標,在同一時間對文檔的不同位置進行編輯。
- 基於Package Control的強大包管理工具,允許你以插件的形式快速擴展Sublime編輯器。插件完全免費,通過命令自動下載安裝,非常方便。
- 閃電一樣的速度。無論是啟動,還是在整個項目中進行查找,Sublime都會在一瞬間完成用戶的所有操作,非常便捷。
- 深度可定制。其配置方式繼承了UNIX簡約透明的原則,所有的配置內容都是純文本的,而且都存放在統一的位置,方便備份和分享。
- 快速文件切換。在Ctrl+P快捷鍵打開的浮動面板中直接輸入文件名的部分內容,文件即被打開,同時你也可以在下拉列表中快速選擇你想要打開的文件,非常直觀。
- 強大的Ctrl+Shift+P命令面板。有了這個面板,你再也不用為找不到某個菜單的位置而煩惱,也不用再去記那些紛繁復雜的快捷鍵了,你只需要在打開的浮動面板中輸入模糊的命令名,然后回車,Sublime即可幫你執行你想要的操作。在你輸入模糊的命令名的同時,浮動面板也會給出對應的快捷鍵。通過Ctrl+Shift+P,你完全可以釋放你的鼠標,讓鍵盤和命令行幫你搞定一切。
- 支持Linux下VIM編輯器模式,讓那些使用VIM的同學可以無縫過渡到Sublime編輯器。
- 快捷鍵和編輯風格遵守國際慣例,無論你是從其它流行的編輯器轉向Sublime,亦或是將來放棄Sublime使用其它編輯器,都可以快速上手毫無障礙。
- 強大的社區支持,遇到任何常見問題都可以通過百度或者Google來搜索並解決問題。
我在做Web前端開發之前很多年都一直從事.net開發,微軟的IDE Visual Studio從2002版一直用到2015版,甚至在.net出示之前的版本都用過(那時候叫做Visual Basic和Visual C++)。毋庸置疑,Visual Studio確實是一款功能非常強大的開發工具,在代碼編寫、智能感知、項目編譯以及快速框架搭建方面支持得都很好!不過在提供方便的同時,你會越來越感覺到Visual Studio很臃腫,啟動太慢,占用過多的系統資源,混亂的插件管理,功能難以擴展,繁雜的快捷鍵等。難以想象當你需要同時打開2個以上的Visual Studio時你的電腦的內存會被瞬間撐爆。后來在從事Node.js開發時又接觸了WebStorm編輯器,WebStorm對Web前端開發支持得很好,HTML和JavaScript的語法高亮,JavaScript對象查找和代碼自動補全,以及對JavaScript的在線調試等功能都很好用。不過WebStorm貌似比Visual Studio更占系統資源,這可能跟它的緩存有關,默認情況下WebStorm會保存用戶對代碼和文件做的所有操作,方便用戶下次打開的時候可以繼續編輯(其實Sublime也有這個特性,但是比WebStorm啟動更快,響應更迅速)。
好了,說了一大堆的廢話,還是讓我們來看看Sublime的一些常用特性和快捷鍵的使用吧!
這里我以自己的使用習慣來介紹一些常用操作和插件的安裝及使用,后續有新的發現再陸續補充。
Sublime的安裝就不贅述了,直接去官網下載安裝就可以了。有一點需要說明下,官網默認只提供了Sublime2的下載地址,如果你想安裝最新版Sublime3,可直接訪問http://www.sublimetext.com/3,Sublime3目前還只是beta版。另外,官網上也提供了說明文檔,在http://www.sublimetext.com/docs/3/可以查看。
常用快捷鍵
Ctrl + D 選中一個單詞,繼續Ctrl + D可以直接選中下一個相同的單詞進入多光標模式,在多光標模式下可以在多處位置同時進行編輯。
Ctrl + L 選中當前光標所在的行。可以快速選中一行,而不用通過鼠標點擊行首來選中一行。
多行選擇。按住Ctrl鍵同時鼠標左鍵點擊你想要選擇的行的行首。
多光標模式。按住Ctrl鍵同時鼠標左鍵點擊你想要編輯的位置,可以在代碼中插入多個光標,同時進行編輯。
列選擇模式。按住Shift鍵同時鼠標右鍵選擇列,同時進入多光標模式進行多行編輯。
Shift + Delete 直接刪除一行。或者Ctrl + Shift + K
Ctrl + Delete 向前刪除,即刪除光標所在位置內容的剩余部分。
Ctrl + Backspace 向后刪除,即刪除光標所在位置之前的內容。
Alt - / Alt + Shift - 向后或者向前導航跳轉。該快捷鍵在配合Ctrl + P時十分有用,類似於Visual Studio中的Ctrl-和Ctrl+Shift-快捷鍵。
Ctrl + [ 或 ] 代碼縮進。
Ctrl + Shift + Up 或 Down 將當前行向上移動一行或向下移動一行。
Ctrl + Shift + D 快速復制一行。
Ctrl + / 注釋或去掉注釋。
Ctrl + K + K 從當前光標位置直接刪除到行末。
Ctrl + K + Backspace 從當前光標位置直接刪除到行首(不常用)。
Ctrl + Shift + Enter 在當前光標所在的行之前插入一行。
Ctrl + Enter 在當前光標所在的行之后插入一行。
Ctrl + K + U 將光標所在的內容變成大寫字母(不用選中單詞)。
Ctrl + K + L 將光標所在的內容變成小寫字母(不用選中單詞)。
Alt + Left/Right 向左或向右移動光標時,每次移動一個單詞的位置。如果不加Alt鍵每次只移動一個字符的位置。
Alt + Shift + Left/Right 從當前光標所在位置向左或向右選擇整個內容。
Ctrl + Shift + V 在當前光標所在位置粘貼代碼,並保持代碼縮進和格式不變。
Ctrl + P 打開快速文件切換面板。
Ctrl + W 關閉當前tab。
Ctrl +/- 放大或縮小字體。
Ctrl + K + B 隱藏或顯示side bar
常用插件
Package Control
有了Package Control你才能安裝和管理你的Sublime插件,並讓它的功能強大起來。對使用Sublime編輯器的用戶來說,該插件是必須要安裝的。打開官網https://packagecontrol.io/installation 按照說明將Python的代碼復制到Sublime的Console面板中,安裝會自動進行。如果安裝失敗,可嘗試官網上介紹的手動安裝方式。Package Control在Github上有項目,感興趣的話可以去查看它的源代碼https://github.com/wbond/package_control
通過Ctrl + Shift + P快捷鍵來打開Package Control面板,在Package Control面板中,你可以輸入任何你想要執行的命令名,然后回車,Sublime即可執行。命令名支持模糊匹配。例如輸入pci執行Package Control: Install Package命令用來安裝Sublime插件(執行該命令通常需要翻牆,否則Sublime會告訴你無法找到安裝包)。
Package Control的命令幾乎涵蓋了所有的Sublime功能,例如通過Package Control: List Packages來列出所有已安裝的插件包。通過Package Control: Key Bindings來查看和修改快捷鍵配置文件。其中Default是Sublime默認的快捷鍵設置,User則是用戶自定義的快捷鍵設置,User設置的優先級要高於Default的設置。另外,按照官方文檔的說明,你可以針對特定的項目進行配置,項目的配置文件優先級要高於User設置。具體的配置方法可以看這里,http://www.sublimetext.com/docs/3/projects.html 你可以將項目的配置文件分享給項目組的所有成員,這樣大家就可以擁有相同的Sublime設置了,非常方便。
對於一個新創建的文件,我們可以直接在Package Control中輸入語言類型來添加語法高亮顯示,如JavaScript。當然你也可以通過鼠標點擊Sublime右下角的語言類型選擇列表來手動切換語法高亮顯示。同時注意到該區域左邊還有一個列表可以用來切換默認的代碼縮進,你可以選擇用幾個tab作為縮進,或者是用空格作為縮進。
有時候我們想一鍵格式化所有的代碼,在Package Control中輸入Reindent Lines即可。當然,如果你不想每次都這么麻煩,可以將該命令設置成快捷鍵,方法是打開Package Control: Key Bindings - User,在里面加入你自己的快捷鍵設置。如果不知道配置文件的格式,可以參考Key Bindings - Default。還有一個問題是如何才能知道命令的精確名稱是什么?可以在Sublime中打開控制台(View>Show Console或者Ctrl + `),然后輸入下面這行命令:
sublime.log_commands(True)
然后重新在Package Control中執行Reindent Lines命令,在控制台中就可以看到精確的命令名了。
對於用慣了Visual Studio的用戶來說,我們將該命令綁定到快捷鍵Ctrl + K + D上,所以我們需要在Key Bindings - User文件中進行下面的設置:
[ { "keys": ["ctrl+k", "ctrl+d"], "command": "reindent", "args": { "single_line": false } } ]
Sublime所有的設置都保存在Packages目錄下,通過菜單Preferences>Browse Packages可以打開Packages目錄,進入User目錄,可以查看所有的配置文件。
另外,通過Package Control: Toggle Minimap命令來隱藏或顯示窗口右側的Minimap面板。其對應的菜單為View>Hide Minimap/Show Minimap。
SideBarEnhancements
默認情況下Sublime編輯器沒有對Side bar面板提供任何上下文菜單,通過安裝SideBarEnhancements插件可以增強Side bar面板的功能。安裝方法是通過快捷鍵Ctrl + Shift + P打開命令面板,輸入Package Control: Install Package,然后輸入SideBarEnhancements,回車即可完成安裝過程。SideBarEnhancements插件的Github地址是https://github.com/titoBouzout/SideBarEnhancements/tree/st3
SyncedSideBar
SyncedSideBar插件用來自動展開你所打開的文件所在的目錄,這樣當你通過命令在不同的文件之間快速切換的時候可以非常直觀地看到當前文件輸入哪個目錄下。
Sass
安裝Sass插件用來對Sass文件進行語法提示和高亮顯示。
Insert Callback和JavaScript & NodeJS Snippets
由於Node.js是基於事件驅動的,這使得我們在編寫Node.js代碼時會經常用到回調函數。Insert Callback插件通過Alt + C快捷鍵迅速地在光標所在的位置插入回調函數,並自動添加函數的第一個參數err,第二個參數d,通常情況下這正是我們想要的。例如下面這個回調函數的生成:
PersonModule.find({name: 'Wang'},function(err, d) { // do something });
安裝JavaScript & NodeJS Snippets插件可以幫助你在編寫Node.js代碼時給出提示和代碼補全。Sublime同時還有許多的code snippet,在Package Control的官方網站https://packagecontrol.io主頁點擊Labels,可以按照不同的分類標簽找到你感興趣的插件,例如snippets,theme等。
AdvancedNewFile
AdvancedNewFile插件能讓你快速地將新文件創建到指定的目錄下。通過快捷鍵Ctrl + Alt + N打開創建文件浮動面板,然后直接輸入路徑及文件名即可在指定的目錄下創建新文件。對於不存在的目錄,Sublime會自動為你創建,非常方便。
DocBlockr
通過DocBlockr插件可以快速地在代碼中添加各種不同風格的注釋。嘗試在代碼中輸入"/*"或者"/**",然后回車,DocBlockr會自動生成注釋行。如果在函數體前面輸入"/**"類型的注釋,DocBlockr還會自動生成函數的說明。
SublimeLinter和SublimeLinter-jshint
如果你使用Sublime進行Node.js項目開發,使用SublimeLinter和SublimeLinter-jshint插件可以幫助你進行js語法校驗,以減少代碼編寫過程中出錯的幾率。但前提是你需要全局安裝jshint:
npm install -g jshint
紅色的表示語法錯誤,需要修改。黃色的表示警告,以提示你使用良好的編碼風格來編寫代碼。jshint的語法校驗規則是可以自定義的,通過在項目根目錄下創建.jshint文件,添加配置信息即可生效。詳細的規則設置可以參考jshint官方站點http://jshint.com/
Emmet
Emmet是一款功能非常強大的HTML代碼補全插件。嘗試在Sublime中創建一個新文件,並將文件類型設置為html(Ctrl + Shift + P,輸入html回車即可將文件類型設置為html) ,然后輸入一個!,使用Tab鍵或者快捷鍵Ctrl + E即可快速生成一個標准的HTML5頁面框架。
Emmet還有許多非常便捷的HTML標記生成片段,這些片段我們稱之為作弊條,從Emmet官網http://docs.emmet.io/cheat-sheet/可以了解到所有作弊條的用法。這些作弊條不僅適用於生成html,同時也適用於css的編寫。
Emmet插件對編寫HTML和CSS來說是一款必備的插件,它可以大大提高代碼編寫的效率,強烈推薦安裝。
GitGutter
如果你打算用git作為項目開發的版本控制工具,GitGutter插件可以更好地幫助你在Sublime編輯器中查看文件的改動和差異。查看github上的項目地址https://github.com/jisaacks/GitGutter
Sublime編輯器還有許多非常實用的功能,可以參考官方網站的文檔http://sublime-text-unofficial-documentation.readthedocs.org/en/sublime-text-3/獲取到更詳細的內容,其中有關snippets代碼補全和build systems編譯系統在日常工作中都可以大大降低重復工作,從而提高工作效率。
關於Node.js的代碼調試
其實最簡單有效的調試方式莫過於在代碼中插入console.log()語句,將需要查看的變量或對象通過console.log()語句輸出,然后執行代碼,在控制台查看輸出的結果即可幫忙診斷程序的運行情況。但有時我們仍然希望能通過斷點來跟蹤代碼的執行情況,並實時查看變量或對象的值。在WebStrom中可以非常方便地在線調試Node.js代碼,但它的控制台和監視窗口我實在用不習慣,加上WebStrom啟動緩慢占用系統資源又多,所以並不推薦。Sublime中還沒有發現比較好用的調試Node.js的插件(或許我還不知道),不過使用node-inspector通過Chrome瀏覽器的js調試工具來調試Node.js代碼還是挺方便的。
首先你需要安裝node-inspector。使用npm將其安裝到全局:
npm install -g node-inspector
然后啟動node-inspector。默認情況下node-inpector監聽8080端口,可以通過參數--web-port=[port]來設置端口。啟動之后在控制台復制鏈接,例如http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858,打開Chrome瀏覽器訪問,這時還不會加載任何代碼。
再打開另一個控制台,切換到Node.js代碼的目錄,然后運行Node.js代碼,並加上--debug或--debug-brk參數,如:
程序運行之后在Chrome中輸入Web程序的訪問地址,這時你會發現之前打開的node-inspector窗口已經自動加載了Node.js的代碼,然后你可以在其中加入斷點並進行調試了。調試方式和在Chrome中調試前端JavaScript代碼一樣,非常方便。注意調試窗口可能需要一些時間來加載代碼,所以當你在Chrome中沒看到代碼時需要耐心等待一會兒。