IT工程師數位筆記本

介紹

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就不會這樣。

結語

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

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