用Visual Studio Code寫Node.j


介紹

vsc的宣傳語是:

一個運行於 Mac OS XWindowsLinux 之上的,針對於編寫現代 Web 和雲應用的跨平台源代碼編輯器。

按它說的,vsc特別適合來作為前端開發編輯器。

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

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

智能提示

因為之前微軟推出了typescript語言,結合tsd文件,用visual studiotypescript代碼是相當爽的,智能提示的功能非常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相關內容,主要是nameprogram字段,改成和你項目對應的
  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.jschrome結合起來的工具,所以可以這么使用。

不過vsc使用到的node.js模塊並不多,比如引用utilvm等會報錯,用node-webkit就不會這樣。

結語

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM