使用VS Code開發(fā)Node.js應(yīng)用環(huán)境搭建

簡介

  • Node.js是一個幫助開發(fā)應(yīng)用的JavaScript運(yùn)行平臺, 它快速且靈活
  • NPM是一個Node.js模塊的包管理程序
  • VS Code 支持JavaScript 和TypeScript語言--以及 Node.js 及時調(diào)試, 要想運(yùn)行一個Node.js應(yīng)用, 你需要安裝Node.js的運(yùn)行時環(huán)境

操作系統(tǒng): OS X 10.11.6
版本:
VS Code 1.4
node 6.2.2
code 1.4.0
tsc 1.8.10
npm 3.9.5


  • VS Code 提供了一個 code 命令纯丸,用來在 shell 環(huán)境下調(diào)用編輯器萎羔。使用快捷鍵 ??P(或 F1) 喚起命令面板,輸入以下命令即可完成安裝。
mkdir Hello
cd Hello
code .
  • 您可以直接從命令行打開文件或文件夾贾陷。這里 '.' 是指到當(dāng)前文件夾,因此 VS Code將啟動并打開當(dāng)前文件夾概说。

代碼提示

  • 通過tsd或者typings這兩個工具安裝(兩個工具的作者是同一個人网梢,目前tsd已經(jīng)廢棄了)震缭。
  • tsd 和 typings 用法:
  • tsd:
//全局安裝
npm install tsd -g
  • typings:
//全局安裝
npm install typings -g
  • 如果你的電腦上沒有安裝TypeScript Compiler的話,是無法使用tsc這個指令的战虏。要安裝也很簡單
npm install  typescript -g

node express拣宰、lodash等的自動補(bǔ)全

typings install dt~node --global
typings install dt~express --global
typings install dt~lodash --global

//vscode官方文檔上express的typings使用的是
typings install dt~express dt~serve-static dt~express-serve-static-core --global

其中”dt~”為使用DefinitelyTyped類型定義的意思,vscode可以識別這種定義烦感。

配置jsconfig.json

  • 在使用typings之前巡社,需要在vscode里面配置一下名為jsconfig.json的文件, VS Code通過這個文件找到自動補(bǔ)全文件。配置方法很簡單手趣,隨便選中一個js文件重贺,vscode右下角會彈出一個綠色的小燈泡,如圖所示:

創(chuàng)建package.json

package.json 文件就是定義了項目的各種元信息回懦,包括項目的名稱气笙,git repo 的地址,作者等等怯晕。最重要的是潜圃,其中定義了我們項目的依賴,這樣這個項目在部署時舟茶,我們就不必將 node_modules
目錄也上傳到服務(wù)器谭期,服務(wù)器在拿到我們的項目時,只需要執(zhí)行 npm install
吧凉,則 npm 會自動讀取 package.json 中的依賴并安裝在項目的 node_modules
下面隧出,然后程序就可以在服務(wù)器上跑起來了。

npm init
  • 如果只是測試項目或者練習(xí)用阀捅,沒有倉庫地址
  • 只需在package.json里面做如下配置即可:
{
    ...
    "private": true,
    ...
}

以這種方式把項目聲明為私有胀瞪,這樣npm就不會再提示配置repository及readme了

  • 否則會遇到這個錯誤
npm WARN package.json xxx@0.0.0 No repository field.
npm WARN package.json xxx@0.0.0 No README data
  • 需要配置倉庫路徑
{
    ...
    "repository": {
        "type": "git",
        "url": "http://github.com/yourname/repositoryname.git"
    },
    ...
}
  • 配置完成后就可以隨意安裝模塊了
npm install utility express lodash --save

--save 的作用,就是會在你安裝依賴的同時,自動把這些依賴寫入 package.json凄诞。命令執(zhí)行完成之后圆雁,查看 package.json,會發(fā)現(xiàn)多了一個 dependencies
字段


運(yùn)行

  • VS Code內(nèi)置調(diào)試器支持調(diào)試Node.js運(yùn)行時帆谍,同時也可以調(diào)試JavaScript伪朽、TypeScript以及其他JS轉(zhuǎn)譯語言。
    點(diǎn)擊



    圖標(biāo)來到調(diào)試界面

  • 單擊調(diào)試視圖頂部欄中的齒輪圖標(biāo)汛蝙,并選擇好調(diào)試環(huán)境烈涮,VS Code會在.vscode目錄下為你生成一份launch.json。

  • 來看launch.json

這里的program 設(shè)置的是啟動文件, index.js

  • 此時回到文件界面, 按 F5 就可以運(yùn)行了

延伸:
NodeSchool(推薦)
Node.js 包教不包會
七天學(xué)會Node.js
參考:
VS Code 官方文檔
[譯]Visual Studio Code文檔其4—調(diào)試
vscodevscode 配置TypeScript開發(fā)node環(huán)境
npm模塊管理器

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窖剑,一起剝皮案震驚了整個濱河市跃脊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌酪术,老刑警劉巖绘雁,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件住拭,死亡現(xiàn)場離奇詭異滔岳,居然都是意外死亡摊求,警方通過查閱死者的電腦和手機(jī)室叉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門恼除,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人秋忙,你說我怎么就攤上這事堵幽∑酉拢” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵报强,是天一觀的道長力惯。 經(jīng)常有香客問我,道長诱建,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任凯肋,我火速辦了婚禮圈盔,結(jié)果婚禮上铁蹈,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布稿湿。 她就那樣靜靜地躺著包斑,像睡著了一般再姑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上讨永,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天遇革,我揣著相機(jī)與錄音卿闹,去河邊找鬼揭糕。 笑死,一個胖子當(dāng)著我的面吹牛锻霎,可吹牛的內(nèi)容都是我干的著角。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼旋恼,長吁一口氣:“原來是場噩夢啊……” “哼吏口!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蚌铜,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤锨侯,失蹤者是張志新(化名)和其女友劉穎嫩海,沒想到半個月后冬殃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叁怪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年审葬,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奕谭。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡涣觉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出血柳,到底是詐尸還是另有隱情官册,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布难捌,位于F島的核電站膝宁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏根吁。R本人自食惡果不足惜员淫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望击敌。 院中可真熱鬧介返,春花似錦、人聲如沸沃斤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衡瓶。三九已至徘公,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鞍陨,已是汗流浹背步淹。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工从隆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缭裆。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓键闺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親澈驼。 傳聞我的和親對象是個殘疾皇子辛燥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 使用 Visual Studio Code 和 TypeScript 開發(fā)微信小程 看我大 Visual Stud...
    Tatinic閱讀 16,967評論 1 41
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)缝其,斷路器挎塌,智...
    卡卡羅2017閱讀 134,628評論 18 139
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,276評論 4 31
  • 一點(diǎn)說明:本文中“導(dǎo)航控制器”區(qū)別于“視圖控制器”存在 UINavigationController UINavi...
    WeiHing閱讀 5,047評論 0 11
  • 今千里,酒一杯内边,聲聲喋喋催榴都。 問君此去幾時還,來時莫徘徊漠其。
    挽念閱讀 259評論 0 0