使用VSCode开发Nodejs

最新推荐文章于 2025-07-28 09:52:22 发布

gezhonglei2007

最新推荐文章于 2025-07-28 09:52:22 发布

阅读量5w

点赞数 3

CC 4.0 BY-SA版权

文章标签：工具 Nodejs VSCode

本文链接：https://blog.youkuaiyun.com/gezhonglei2007/article/details/50574652

本文介绍了如何使用Visual Studio Code（VSCode）来开发Node.js项目。通过创建项目文件夹ExpressApp并配置批处理文件，可以便捷地用VSCode打开Node.js项目。在VSCode中，可以通过在文件上右键打开命令提示符，或者利用调试面板和F5快捷键进行调试。虽然VSCode的智能提示功能相对于Visual Studio尚有不足，但它仍然是一个高效开发Node.js的工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://code.visualstudio.com/Docs/runtimes/nodejs

webstore是目前最受欢迎的Nodejs开发IDE之一。受欢迎的原因，当然是对于Nodejs IDE的集成开发环境，集项目创建、编辑、调试于一体，简单的配置，强大的智能提示。
实际上使用Visual Studio开发Nodejs也不逊于WebStore，但是Visual Studio这种集成开发环境的软件过于庞大，电脑配置不好的话，多开启几个VS项目动不动就崩掉了或机器卡死。
本文本介绍是Nodejs一种轻量级的开发工具——使用VSCode。尽管VScode看起来更像是Uedit、Noteplus等强大文件编辑器，但它也提供了可扩展的、强大的提示功能（特别是文件间js引用提示），以及内置Nodejs调试功能，让它有别于一般的编辑工具。

一、使用Express创建项目
1、全局安装Express（如已安装忽略此步骤）

npm install -g express

2、创建项目

创建项目（创建文件夹名称ExpressApp）

express ExpressApp

3、下载第三方包
（1）cmd命令行切换到项目目录

cd e:\nodejs\ExpressApp

（2）根据需要编辑package.json，运行如下指令安装第三方包

npm install

在项目目录下node_modules可见安装好的第三方包
ExpressApp
|-- node_modules
（3）运行项目

npm start

输出如下：
> ExpressApp@0.0.0 start E:\Nodejs_Workspace\ExpressApp
> node ./bin/www
注：npm start指令会自动执行node ./bin/www

在浏览器中输入http://localhost:3000，可访问Express欢迎页面

二、使用VSCode开发Nodejs
1、VSCode打开Nodejs

   code e:\nodejs\ExpressApp   
或
   cd e:\nodejs\ExpressApp
   code .

注：在当前项目下创建ExpressApp.bat，输入“code .”即可，下次直接此文件直接使用VSCode打开Nodejs项目

@echo off
code.

打开VsCode后，在左侧导航栏上的任意文件上右键，可以快捷打开CMD命令，也可以打开文件所在文件夹。

2、添加智能提示

VSCode打开Nodejs项目，默认是没有智能提示。
（1）使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件，VSCode中打开时有智能
全局安装tsd（如已安装忽略）

npm install -g tsd

下载所需的组件提示（以下载node、express提示为例）

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

注：
①多个提示组件在query参数后可以空格分隔简写为tsd query node express --action install
②组件会项目目录下添加typings文件夹
|-- typings
|-- node
|-- express

（2）添加js文件引用的智能提示
假如在文件引用另外一个文件common.js时，文件头添加如下

/// <reference path="common.js"/>

（3）添加js标准智能提示
在项目根目录下添加jsconfig.json文件，文件内容如下：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs"
    }
}

此配置表示代码服从ES5标准并使用commonjs规范（什么是commonjs请参考http://www.cnblogs.com/fullhouse/archive/2011/07/15/2107416.html），发VScode下有此配置之后，可以实现在文件中对require引用js文件的智能提示。（我测试时无此配置也会有智能提示，不清楚什么原因）

三、调试

1、创建VSCode调度配置文件
点击调试面板，并点击运行（F5）按钮时，右侧出现下拉框，选择“Node.js”

然后会在项目目录下创建launch.json文件
ExpressAppp
|--.vscode
|-- launch.json

可根据需要编辑launch.json，修改启动配置项

2、创建断点：
根据需要创建断点：在js文件编辑区域左侧，会添加/移除断点

3、调度

在调试面板上点击运行或按快捷键F5

四、VSCode编辑js常用快捷方式

快捷键	说明
F5	调试运行程序
F8	查看警告、错误信息
F12	快速定义到声明
Ctrl + P	快捷查找文件（输入?显示所有指令）
Ctrl + F	文件中快速查找
Ctrl + B	toggle左侧导航栏
Ctrl + Shift + M	显示警告和错误，相当于Ctrl + P,输入!
Ctrl + Shift + O	根据类型符号查找，相当于Ctrl + P,输入@: