用Visual Studio Code寫Node和調試代碼

介紹

vsc的宣傳語是：

一個運行於 Mac OS X、Windows和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器。

按它說的，vsc特別適合來做爲前端開發編輯器。

內置html開發神器emmet(zencoding),對css及其相關編譯型語言Less和Sass都有很好的支持。

固然，最nice的仍是寫js代碼了，這也是我接下來要着重介紹的功能。

智能提示

由於以前微軟推出了typescript語言，結合tsd文件，用visual studio寫typescript代碼是至關爽的，智能提示的功能很是nb。

這個功能理所應當也被vsc繼承了。

目前主流的前端類庫/框架，包括node.js及其模塊/框架都有相應的tsd文件，能夠去DefinitelyTyped上找一下。

在項目中引入對應文件，就能夠有智能提示了。

這裏以angular爲例，使用步驟以下：

1. 全局安裝tsd，經過tsd安裝.d.ts文件。這樣會在項目下面生成.typings目錄，目錄下面就是下載的.d.ts文件，再寫代碼的時候就會有智能提示了。具體用法參考tsd用法。

npm install -g tsd tsd query angular --action install 

1. 若是不想本身手工引入，也能夠在angular變量後面按ctrl+k，會有個燈泡圖片，點擊燈泡圖片就會有對應提示，選擇下載xx.d.ts文件就能夠了,編輯器會下載對應文件放在.typings目錄。

過程以下圖：

再來個node.js的：

說完智能提示，再說代碼調試。

調試Node

以前寫過文章介紹過node.js的調試方案（Node.js調試）。從vsc發佈後，我就一直用它寫代碼，也是用它來調試node.js代碼。

使用方法也很簡單,步驟以下：

1. 打開要調試的文件，按f5,編輯器會生成一個launch.json
2. 修改launch.json相關內容，主要是name和program字段，改爲和你項目對應的
3. 點擊編輯器左側長得像蜘蛛的那個按鈕
4. 點擊左上角DEBUG後面的按鈕，啓動調試
5. 打斷點，盡情調試

過程以下圖：

最後，再贈送彩蛋一個。

Node API 查看

在寫node.js代碼的時候，有時會忘記某個模塊中有哪些方法及其用法，常常要去官網翻一下api文檔。

這裏介紹下怎麼使用vsc來搞定這一問題。

1. 打開vsc控制檯（Help > Toggle Developer Tools > Console）
2. 在控制檯寫代碼，查詢模塊方法。

過程以下圖：

vsc是用atom-shell(如今叫electron)寫的，這玩意和node-webkit（如今叫nw.js）同樣，都是把node.js和chrome結合起來的工具，因此能夠這麼使用。

不過vsc使用到的node.js模塊並很少，好比引用util和vm等會報錯，用node-webkit就不會這樣。