最近再研究nodejs，苦苦再選一款輕量級的編輯器，由于本人一直從事.net開發(fā)，雖然微軟推出了Visual Studio 開發(fā)node js的插件，而且用著也不錯，但是總感覺這個編輯器體量太大(一裝就是幾個G)！webstore是目前最受歡迎的Nodejs開發(fā)IDE之一。受歡迎的原因，當(dāng)然是對于Nodejs IDE的集成開發(fā)環(huán)境，集項目創(chuàng)建、編輯、調(diào)試于一體，簡單的配置，強大的智能提示。因為前面說過我一直做.net開發(fā)，剛好微軟在2016年推出了vs code 一款輕量級的文本編輯器，可以編寫各種語言的程序并進(jìn)行調(diào)試，為了熟悉這款編輯器方便后續(xù)的開發(fā)，所以這次選用了vs code作為這次開發(fā)的編輯器（盡管VScode看起來更像是Uedit、Noteplus等強大文件編輯器，但它也提供了可擴展的、強大的提示功能（特別是文件間js引用提示），以及內(nèi)置Nodejs調(diào)試功能，讓它有別于一般的編輯工具。）!當(dāng)然也跟微軟未來的戰(zhàn)略有關(guān)!

創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為臥龍企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都做網(wǎng)站，臥龍網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

本文的前提是你已經(jīng)安裝了vs code代碼編輯器和nodejs環(huán)境，如果沒有安裝，請自行下載安裝!

 一、使用Express創(chuàng)建項目[這兩步都在dos 模式下執(zhí)行]

1,安裝全局的Express！(已安裝請忽略)

npm install -g express

2,創(chuàng)建項目

創(chuàng)建項目（創(chuàng)建文件夾名稱ExpressApp）

express ExpressApp

小插曲：如果你習(xí)慣了Linux下的環(huán)境，你可以在自己電腦上安裝cmder(不知道是什么東西，請自行百度),這個命令行工具排版漂亮，不像微軟的dos 那么枯燥!我用的是Mini版本，如果你想體驗linux下的全部功能，可以下載full版本。

3，下載第三方包

（1）cmd命令行切換到項目目錄

cd d:\nodejs\ExpressApp

（2）根據(jù)需要編輯package.json，運行如下指令安裝第三方包

npm install

在項目目錄下node_modules可見安裝好的第三方包

ExpressApp
|– node_modules

（3）運行項目

npm start

輸出如下：

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp
node ./bin/www
注：npm start指令會自動執(zhí)行node ./bin/www

在瀏覽器中輸入http://localhost:3000，可訪問Express歡迎頁面

二、使用VSCode開發(fā)Nodejs

1、VSCode打開Nodejs

code d:\nodejs\ExpressApp 
code.

注：在當(dāng)前項目下創(chuàng)建ExpressApp.bat，輸入“code .”即可，下次直接此文件直接使用VSCode打開Nodejs項目

2、添加智能提示

VSCode打開Nodejs項目，默認(rèn)是沒有智能提示。

（1）使用TypeScript Definition Manager(TSD)在項目中下載所需的tsd文件，VSCode中打開時有智能
全局安裝tsd（如已安裝忽略）

npm install -g tsd

下載所需的組件提示（以下載node、express、requirejs提示為例）

tsd query node --action install
tsd query express --action install
tsd install require

注：

①多個提示組件在query參數(shù)后可以空格分隔簡寫為tsd query node express –action install

②組件會項目目錄下添加typings文件夾

|– typings
|– node
|– express
|– require

（2）添加js文件引用的智能提示

假如在文件引用另外一個文件common.js時，文件頭添加如下

{
  // 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，那么你的編輯器右下方會顯示一個“燈泡”的提示，你只要點燈泡就不用自己苦逼的寫這個配置文件了）

此配置表示代碼服從ES5標(biāo)準(zhǔn)并使用commonjs規(guī)范，發(fā)VScode下有此配置之后，可以實現(xiàn)在文件中對require引用js文件的智能提示。（我測試時無此配置也會有智能提示，不清楚什么原因）

三、調(diào)試

1、創(chuàng)建VSCode調(diào)度配置文件

點擊調(diào)試面板，并點擊運行（F5）按鈕時，右側(cè)出現(xiàn)下拉框，選擇“Node.js”

然后會在項目目錄下創(chuàng)建launch.json文件

ExpressAppp
|–.vscode
|– launch.json

可根據(jù)需要編輯launch.json，修改啟動配置項

2、創(chuàng)建斷點：

根據(jù)需要創(chuàng)建斷點：在js文件編輯區(qū)域左側(cè)，會添加/移除斷點

3、調(diào)度

在調(diào)試面板上點擊運行或按快捷鍵F5，單步調(diào)試按F10就可以了!

其實這些在微軟的官方文檔里面有，打算有的小細(xì)節(jié)或者步驟會被開發(fā)者無形無視，這樣會給后期開發(fā)造成一定的影響，所以請大家嚴(yán)格按照配置需求進(jìn)行配置!

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：使用vscode開發(fā)Nodejs程序的使用方法
文章URL：http://jinyejixie.com/article0/jjjhoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、做網(wǎng)站、軟件開發(fā)、網(wǎng)站設(shè)計公司、虛擬主機、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)