Visual Studio Code

標籤：

介紹

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 tsdtsd 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模式。

Visual Studio Code