使用vs code開發(fā)Nodejs程序的使用方法
最近再研究nodejs，苦苦再選一款輕量級(jí)的編輯器，由于本人一直從事.net開發(fā)，雖然微軟推出了Visual Studio 開發(fā)node js的插件，而且用著也不錯(cuò)，但是總感覺(jué)這個(gè)編輯器體量太大(一裝就是幾個(gè)G)！webstore是目前最受歡迎的Nodejs開發(fā)IDE之一。受歡迎的原因，當(dāng)然是對(duì)于Nodejs IDE的集成開發(fā)環(huán)境，集項(xiàng)目創(chuàng)建、編輯、調(diào)試于一體，簡(jiǎn)單的配置，強(qiáng)大的智能提示。因?yàn)榍懊嬲f(shuō)過(guò)我一直做.net開發(fā)，剛好微軟在2016年推出了vs code 一款輕量級(jí)的文本編輯器，可以編寫各種語(yǔ)言的程序并進(jìn)行調(diào)試，為了熟悉這款編輯器方便后續(xù)的開發(fā)，所以這次選用了vs code作為這次開發(fā)的編輯器（盡管VScode看起來(lái)更像是Uedit、Noteplus等強(qiáng)大文件編輯器，但它也提供了可擴(kuò)展的、強(qiáng)大的提示功能（特別是文件間js引用提示），以及內(nèi)置Nodejs調(diào)試功能，讓它有別于一般的編輯工具。）!當(dāng)然也跟微軟未來(lái)的戰(zhàn)略有關(guān)!
本文的前提是你已經(jīng)安裝了vs code代碼編輯器和nodejs環(huán)境，如果沒(méi)有安裝，請(qǐng)自行下載安裝!
一、使用Express創(chuàng)建項(xiàng)目[這兩步都在dos 模式下執(zhí)行]
1,安裝全局的Express！(已安裝請(qǐng)忽略)
npm install -g express
2,創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目（創(chuàng)建文件夾名稱ExpressApp）
express ExpressApp
小插曲：如果你習(xí)慣了Linux下的環(huán)境，你可以在自己電腦上安裝cmder(不知道是什么東西，請(qǐng)自行百度),這個(gè)命令行工具排版漂亮，不像微軟的dos 那么枯燥!我用的是Mini版本，如果你想體驗(yàn)linux下的全部功能，可以下載full版本。
3，下載第三方包
（1）cmd命令行切換到項(xiàng)目目錄
cd d:\nodejs\ExpressApp
（2）根據(jù)需要編輯package.json，運(yùn)行如下指令安裝第三方包
npm install
在項(xiàng)目目錄下node_modules可見(jiàn)安裝好的第三方包
ExpressApp
|– node_modules
（3）運(yùn)行項(xiàng)目
npm start
輸出如下：
ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp
node ./bin/www
注：npm start指令會(huì)自動(dòng)執(zhí)行node ./bin/www
在瀏覽器中輸入http://localhost:3000，可訪問(wèn)Express歡迎頁(yè)面
二、使用VSCode開發(fā)Nodejs
1、VSCode打開Nodejs
code d:\nodejs\ExpressApp code.
注：在當(dāng)前項(xiàng)目下創(chuàng)建ExpressApp.bat，輸入“code .”即可，下次直接此文件直接使用VSCode打開Nodejs項(xiàng)目
2、添加智能提示
VSCode打開Nodejs項(xiàng)目，默認(rèn)是沒(méi)有智能提示。
（1）使用TypeScript Definition Manager(TSD)在項(xiàng)目中下載所需的tsd文件，VSCode中打開時(shí)有智能
全局安裝tsd（如已安裝忽略）
npm install -g tsd
下載所需的組件提示（以下載node、express、requirejs提示為例）
tsd query node --action install tsd query express --action install tsd install require
注：
①多個(gè)提示組件在query參數(shù)后可以空格分隔簡(jiǎn)寫為tsd query node express –action install
②組件會(huì)項(xiàng)目目錄下添加typings文件夾
|– typings
|– node
|– express
|– require
（2）添加js文件引用的智能提示
假如在文件引用另外一個(gè)文件common.js時(shí)，文件頭添加如下
{
// See https://go.microsoft.com/fwlink/?LinkId=759670
// for the documentation about the jsconfig.json format
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules",
"bower_components",
"jspm_packages",
"tmp",
"temp"
]
}
（小提示，如果你引入了rquire，那么你的編輯器右下方會(huì)顯示一個(gè)“燈泡”的提示，你只要點(diǎn)燈泡就不用自己苦逼的寫這個(gè)配置文件了）
此配置表示代碼服從ES5標(biāo)準(zhǔn)并使用commonjs規(guī)范，發(fā)VScode下有此配置之后，可以實(shí)現(xiàn)在文件中對(duì)require引用js文件的智能提示。（我測(cè)試時(shí)無(wú)此配置也會(huì)有智能提示，不清楚什么原因）
三、調(diào)試
1、創(chuàng)建VSCode調(diào)度配置文件
點(diǎn)擊調(diào)試面板，并點(diǎn)擊運(yùn)行（F5）按鈕時(shí)，右側(cè)出現(xiàn)下拉框，選擇“Node.js”
然后會(huì)在項(xiàng)目目錄下創(chuàng)建launch.json文件
ExpressAppp
|–.vscode
|– launch.json
可根據(jù)需要編輯launch.json，修改啟動(dòng)配置項(xiàng)
2、創(chuàng)建斷點(diǎn)：
根據(jù)需要?jiǎng)?chuàng)建斷點(diǎn)：在js文件編輯區(qū)域左側(cè)，會(huì)添加/移除斷點(diǎn)
3、調(diào)度
在調(diào)試面板上點(diǎn)擊運(yùn)行或按快捷鍵F5，單步調(diào)試按F10就可以了!
其實(shí)這些在微軟的官方文檔里面有，打算有的小細(xì)節(jié)或者步驟會(huì)被開發(fā)者無(wú)形無(wú)視，這樣會(huì)給后期開發(fā)造成一定的影響，所以請(qǐng)大家嚴(yán)格按照配置需求進(jìn)行配置!
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們常使用nvm來(lái)管理node.js的版本,這樣就可以根據(jù)自己的需要來(lái)回切換node.js版本,下面這篇文章主要給大家介紹了關(guān)于node版本過(guò)高該如何將node版本降低的相關(guān)資料,需要的朋友可以參考下2023-01-01
在本篇文章中給大家詳細(xì)講述了node字體壓縮插件font-spider的用法的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友參考下。2018-09-09
本篇文章主要介紹了快速使用node.js進(jìn)行web開發(fā)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
詳解PNPM?Monorepo依賴項(xiàng)管理功能模擬實(shí)現(xiàn)
這篇文章主要介紹了PNPM?Monorepo依賴項(xiàng)管理功能模擬實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Yarn是一個(gè)新的快速安全可信賴的可以替代NPM的依賴管理工具,下面這篇文章主要給大家介紹了關(guān)于如何使用npm安裝yarn的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
nodejs和npm版本不匹配報(bào)錯(cuò)的解決方法
當(dāng)公司要求使用固定nodejs的版本時(shí),自己不小心更新了npm，就會(huì)導(dǎo)致npm和nodejs不匹配,下面這篇文章主要給大家介紹了關(guān)于nodejs和npm版本不匹配報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2023-04-04
開發(fā)Node CLI構(gòu)建微信小程序腳手架的示例
這篇文章主要介紹了開發(fā)Node CLI構(gòu)建微信小程序腳手架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
目錄遍歷挺常見(jiàn),操作一個(gè)文件夾里的所有文件,替換或者添加刪除某些東西是非常普遍的操作,這篇文章主要給大家介紹了關(guān)于如何使用Node.js遍歷文件夾的相關(guān)資料,需要的朋友可以參考下2022-03-03
中間件在 Node.js 中被廣泛使用，它泛指一種特定的設(shè)計(jì)模式、一系列的處理單元、過(guò)濾器和處理程序，以函數(shù)的形式存在，這篇文章主要介紹了淺談Node.js 中間件模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
nodejs的HTML分析利器node-jquery用法淺析
這篇文章主要介紹了nodejs的HTML分析利器node-jquery用法,簡(jiǎn)單分析了node-jquery的功能并結(jié)合實(shí)例說(shuō)明了node-jquery控制臺(tái)輸出信息的操作技巧,需要的朋友可以參考下2016-11-11