VSCode怎么运行JavaScript VSCode调试Node.js项目的完整教程

vscode运行javascript的步骤如下：1.安装node.js和vscode，并验证安装是否成功；2.打开js文件后通过“运行和调试”按钮运行代码；3.创建launch.json文件配置node.js调试器，并根据入口文件修改runtimeexecutable；4.使用断点、查看变量、单步执行等技巧进行调试；5.安装并配置nodemon实现代码修改后自动重启服务，提升开发效率。

VSCode运行JavaScript其实并不难，特别是调试Node.js项目时，只要配置得当，效率能提升很多。下面我会从基础讲起，逐步带你走完整个流程。

安装必要的环境

在开始之前，确保你已经安装好了以下两个工具：

• Node.js：这是运行JavaScript后端代码的基础，建议安装LTS版本，稳定又兼容。
• VSCode：轻量级且功能强大的编辑器，支持丰富的插件生态。

安装完之后，打开终端（Terminal）输入以下命令验证是否安装成功：

立即学习“Java免费学习笔记（深入）”；

node -v
npm -v

如果能看到版本号输出，说明安装没问题。

在VSCode中运行JavaScript文件

如果你只是想运行一个简单的.js文件，比如写个练习脚本，那操作非常直接。

1. 打开你的JS文件
2. 点击右上角的“运行和调试”按钮（或者按快捷键 Ctrl+Shift+D）
3. 点击“运行和调试”面板中的“运行代码”按钮（或者直接按 F5）

这样就能直接运行当前打开的JS文件了。如果你没看到“运行代码”按钮，可能是没有配置好调试器，我们下面会详细讲。

配置调试器调试Node.js项目

对于一个完整的Node.js项目来说，我们需要配置一个 launch.json 文件，来告诉VSCode怎么启动调试。

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

40

查看详情

1. 打开你的项目文件夹
2. 点击左侧的“运行和调试”图标
3. 点击“创建 launch.json 文件”
4. 选择环境为 Node.js
5. VSCode会自动生成一个默认的配置文件

生成的文件内容大致如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeExecutable": "${workspaceFolder}/index.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

你可以根据自己的入口文件修改 "runtimeExecutable" 的值，比如改成 app.js 或者其他。

调试时常用的小技巧

调试不只是运行，更重要的是可以设置断点、查看变量、单步执行等。

• 设置断点：在代码行号左边的空白处点击，会出现红点，这就是断点。
• 查看变量值：断点停下时，左侧“变量”面板会显示当前作用域内的变量。
• 单步执行：使用调试工具栏的“下一步”按钮（F10）可以逐行执行代码。
• 跳过函数：不想进入某个函数内部，就按 F10；想进去就按 F11。

如果你调试时发现无法命中断点，检查一下是不是配置文件路径写错了，或者是不是用 nodemon 运行的（如果是开发环境，推荐用 nodemon）。

使用nodemon提升开发效率

如果你在开发阶段，每次修改代码都要手动重启服务，会很麻烦。这时候可以用 nodemon，它会自动监听文件变化并重启服务。

1. 安装nodemon（全局或者本地）：

npm install -g nodemon

2. 修改 launch.json，把 "runtimeExecutable" 改成 nodemon：

"runtimeExecutable": "nodemon",

3. 加上 "restart": true 和 "console": "integratedTerminal"，这样你就能在终端看到输出。

这样配置之后，每次保存代码，服务就会自动重启，调试体验更流畅。

基本上就这些，整个流程看起来有点多，但其实配置一次之后，后续开发调试就方便很多了。关键是理解每个配置项的作用，别照搬不改，要根据自己的项目结构调整。

以上就是VSCode怎么运行JavaScript VSCode调试Node.js项目的完整教程的详细内容，更多请关注php中文网其它相关文章！