VS Code怎么一键运行Js脚本？Code Runner插件配置步骤

在Visual Studio Code中运行JavaScript文件，最直接且高效的方法是借助Code Runner插件。默认情况下，VS Code仅作为代码编辑器，并不自带独立的JavaScript脱机执行引擎；安装Code Runner后，只需在打开的.js脚本中按下快捷键或点击运行按钮，插件便会自动调用系统已安装的Node.js解释器并输出执行结果。本文详细介绍准备工作、插件安装、一键运行操作以及关键配置项调优，帮助读者完成顺畅的本地执行环境配置。

图 0：VS Code 配合 Code Runner 运行 JavaScript 脚本全流程链路

一、运行前置准备：安装与校验 Node.js 运行时

Code Runner 本身并不包含 JavaScript 的解析器或虚拟机。在浏览器环境外独立执行 JavaScript 文件时，底层的执行依赖于 Node.js 引擎。如果在没有安装 Node.js 的情况下直接触发运行，Code Runner 会直接报出类似 'node' 不是内部或外部命令（Windows）或 node: command not found（macOS/Linux）的错误。

在开始配置插件前，请按以下步骤确认系统环境：

1. 访问 Node.js 官方网站下载并安装长期支持版（LTS）。
2. 安装完成后，打开操作系统的系统终端（或在 VS Code 中使用 Ctrl + ` 打开集成终端）。
3. 执行版本检测命令，若能正确输出版本号，则表明 Node.js 已经就绪：

node -v
# 正确返回示例：v20.18.0 或更高版本
npm -v
# 正确返回示例：10.8.2

二、Code Runner 插件的安装步骤

确认 Node.js 可用后，进入 VS Code 扩展市场安装 Code Runner。具体操作步骤如下：

1. 启动 VS Code，点击左侧活动栏的扩展（Extensions）图标，或直接按下快捷键 Ctrl + Shift + X（macOS 上为 Cmd + Shift + X）。
2. 在扩展搜索框中输入 Code Runner。
3. 在搜索结果列表中找到由 Jun Han 发布的 Code Runner 插件。
4. 点击该插件条目右侧的 安装（Install） 按钮。安装过程通常仅需几秒钟，安装完成后按钮状态将显示为“已安装（Installed）”或齿轮状管理图标。

图 1：Code Runner 插件完整操作与落地流程路径图

三、一键运行 JavaScript 的三种操作方式

安装完成后，新建或打开任意扩展名为 .js 的文件（例如 test.js），写入测试代码：

// test.js
const appName = "VS Code Code Runner";
console.log(`正在运行: ${appName}`);
console.log("执行时间:", new Date().toLocaleTimeString());

你可以通过以下三种等效方式中的任意一种触发代码执行：

四、关键运行机制对比：输出面板 (Output) 与 集成终端 (Terminal)

很多初学者在运行含有用户交互输入的脚本时（例如使用 readline 模块等待命令行输入），会发现程序卡住且无法在面板中输入任何字符。这是因为 Code Runner 默认使用的是 VS Code 的 “输出（Output）” 面板，该面板本质上是只读的输出缓冲区，不支持任何输入流（stdin）。

理解这两种面板的底层机制差异，对于正确配置插件至关重要：

图 2：Code Runner 运行容器机制对比与特性分析

五、优化体验的关键配置（settings.json）

虽然安装后即可直接运行，但默认设置存在三个体验痛点：

• 修改代码后若忘记按 Ctrl + S 保存，直接运行执行的仍然是磁盘上的旧代码；
• 多次运行后输出面板会不断追加历史内容，难以辨识最新结果；
• 默认在只读的 Output 面板执行，遇到输入语句无法响应。

通过调整 VS Code 的 settings.json 配置文件，可以一次性解决上述所有问题。

1. 如何打开 settings.json

1. 按下快捷键 Ctrl + Shift + P（macOS: Cmd + Shift + P）打开命令面板。
2. 在输入框中键入 Preferences: Open User Settings (JSON) 并回车。
3. 在打开的 JSON 文件中加入 Code Runner 对应的配置键值对。

2. 推荐核心配置代码

{
  // 1. 运行前自动保存当前编辑的文件，避免运行旧代码
  "code-runner.saveFileBeforeRun": true,

  // 2. 每次运行前自动清空之前的输出内容，保持视窗干净
  "code-runner.clearPreviousOutput": true,

  // 3. 在集成终端中运行代码，支持 readline、输入交互与彩色输出
  "code-runner.runInTerminal": true,

  // 4. 执行前先保存工作区所有打开的文件（可选）
  "code-runner.saveAllFilesBeforeRun": false,

  // 5. 自定义语言执行器配置（例如自定义 Node 路径或启用特定标志）
  "code-runner.executorMap": {
    "javascript": "node",
    "typescript": "ts-node"
  }
}

图 3：Code Runner 核心配置项映射与调优逻辑

六、进阶配置：支持 ES Module 与自定义 Node 路径

在现代前端开发中，若在 JavaScript 代码中直接使用 import / export 语法，Node.js 默认可能会抛出错误：SyntaxError: Cannot use import statement outside a module。

解决该问题有两种主流方式：

• 方式 A（推荐）：在项目根目录新建或修改 package.json，在根节点下添加 "type": "module" 声明。
• 方式 B：直接修改 Code Runner 的 executorMap，指定 Node.js 执行参数：

"code-runner.executorMap": {
  // 增加 --input-type=module 参数或 experimental 标志
  "javascript": "node --input-type=module",
  // 若系统同时安装了多个 Node 版本，也可显式指定绝对路径
  // "javascript": "C:\\Program Files\\nodejs\\node.exe"
}

七、常见报错与故障排查指南

如果在实际运行过程中出现异常，可对照下表和排查流程图逐项解决：

图 4：常见报错原因排查与解决方案决策图

八、全文总结

要在 VS Code 中实现 JavaScript 脚本的一键运行，最简且稳健的技术组合是“Node.js 运行时 + Code Runner 扩展 + settings.json 自动化配置”：

• 核心基础：保证本地操作系统已安装 Node.js 并正确配置环境变量。
• 触发通道：安装由 Jun Han 维护的 Code Runner 插件，熟练掌握快捷键 Ctrl + Alt + N（macOS: Cmd + Option + N）与 Ctrl + Alt + M（强制停止）。
• 运行配置：开启 saveFileBeforeRun 保证每次运行均为最新代码；根据需要开启 runInTerminal 以支持终端键盘互动及真实执行环境。

完成上述配置后，无需每次手动打开终端敲击 node xxx.js，即可在编辑区内高效完成日常逻辑验证、算法调试与脚本测试。