用Visual Studio Code寫Node.js

visual studio code（如下簡稱vsc）最近更新到了0.8.0版本，新加的一些特性都很nice。多了幾個配色方案（流行的monokai配色也有了，雖然效果並很差），也支持自定義安裝目錄了。最讓我感動的是對jsx文件作了語法高亮，寫react的時候不再是一片黑色了。

今天來了興致，推薦一下，但願有更多的同窗來使用這個編輯器。

介紹

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

2. 若是不想本身手工引入，也能夠在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就不會這樣。

結語

vsc和其餘編輯器（sublime text,atom,webstorm等）相比，某些方面還存在不少問題。對於一個前端工程師來講，它已經足夠好了。

固然了，它在不斷改進。等着它支持插件系統，支持vim模式。