首頁 > web前端 > js教程 > vs code開發Nodejs程式的程式碼分享

vs code開發Nodejs程式的程式碼分享

小云云
發布: 2018-02-07 11:31:52
原創
1940 人瀏覽過

本文主要跟大家介紹使用vs code開發Nodejs程式的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

最近再研究nodejs,苦苦再選一款輕量級的編輯器,由於本人一直從事.net開發,雖然微軟推出了Visual Studio 開發node js的插件,而且用著也不錯,但是總覺得這個編輯器體量太大(一裝就是幾個G)! webstore是目前最受歡迎的Nodejs開發IDE之一。受歡迎的原因,當然是對於Nodejs IDE的整合開發環境,集專案創建、編輯、調試於一體,簡單的配置,強大的智慧提示。因為前面說過我一直做.net開發,剛好微軟在2016年推出了vs code 一款輕量級的文本編輯器,可以編寫各種語言的程序並進行調試,為了熟悉這款編輯器方便後續的開發,所以這次選用了vs code作為這次開發的編輯器(儘管VScode看起來更像是Uedit、Noteplus等強大文件編輯器,但它也提供了可擴展的、強大的提示功能(特別是文件間js引用提示),以及內建Nodejs調試功能,讓它有別於一般的編輯工具。編輯器和nodejs環境,如果沒有安裝,請自行下載安裝!


 

一、使用Express建立專案[這兩個步驟都在dos 模式下執行]


#1,安裝全域的Express! (已安裝請忽略)

npm install -g express
登入後複製

2,建立專案


#建立專案(建立資料夾名稱ExpressApp)

express ExpressApp
登入後複製

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


3,下載第三方套件

##(1)cmd命令列切換到專案目錄

cd d:\nodejs\ExpressApp
登入後複製

(2)依需求編輯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指令會自動執行node ./bin/www


在瀏覽器中輸入http://localhost:3000,可存取Express歡迎頁面


二、使用VSCode開發Nodejs


1、VSCode開啟Nodejs


code d:\nodejs\ExpressApp 
code.
登入後複製

附註:在目前專案下建立ExpressApp.bat,輸入「code .」即可,下次直接此檔案直接使用VSCode開啟Nodejs專案

2 、新增智慧提示


VSCode開啟Nodejs項目,預設是沒有智慧提示。


(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參數後可以空格分隔簡寫為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標準並使用commonjs規範,發VScode下有此配置之後,可以實作在檔案中對require引用js檔案的智慧提示。 (我測試時無此配置也會有智慧提示,不清楚什麼原因)

三、偵錯


1、建立VSCode調度設定檔

###點擊偵錯面板,並點擊執行(F5)按鈕時,右側出現下拉框,選擇「Node.js」######然後會在專案目錄下建立launch.json檔案### ######ExpressAppp ###|–.vscode ###|– launch.json######可依需求編輯launch.json,修改啟動設定項目######2、建立斷點: #########根據需要建立斷點:在js檔案編輯區域左側,會新增/移除斷點######3、調度#########在調試面板上點選運行或按快捷鍵F5,單步調試按F10就可以了!###

其實這些在微軟的官方文件裡面有,打算有的小細節或者步驟會被開發者無形無視,這樣會給後期開發造成一定的影響,所以請大家嚴格按照配置需求進行配置!

相關推薦:

使用vs code寫入php及偵錯

以上是vs code開發Nodejs程式的程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板