在 Visual Studio Code 中运行 JavaScript答案

【问题标题】：Run JavaScript in Visual Studio Code在 Visual Studio Code 中运行 JavaScript
【发布时间】：2021-12-15 13:02:19
【问题描述】：

有没有办法使用 Visual Studio Code 执行 JavaScript 并显示结果？

例如，一个脚本文件包含：

console.log('hello world');

我认为需要 Node.js，但不知道该怎么做？

Visual Studio Code 我指的是来自 Microsoft 的新代码编辑器 - 不是使用 Visual Studio 编写的代码。

【问题讨论】：

这听起来像是 A/B 问题。你真正想要解决的问题是什么？
@Chris 他指的是一个软件。 VSCode 是一个编辑器
我刚刚为此创建了一个新的 VS Code 扩展，试试“Node.JS REPL”。 marketplace.visualstudio.com/…
查看结果的最简单方法是转到 View => Integrated Terminal 并输入：node .js
您是否找到任何允许从浏览器角度运行 JavaScript 的 anwser？就像您在空白 HTML 页面上使用浏览器控制台一样？

标签： node.js visual-studio-code

【解决方案1】：

有一种更简单的方式来运行 JavaScript，无需配置：

安装Code Runner Extension
在文本编辑器中打开 JavaScript 代码文件，然后使用快捷键 Control+Alt+N（或 ⌃ Control kbd>+⌥ Option+N 在 macOS 上），或者按 F1 然后选择/键入Run Code，代码将运行并且输出将显示在输出窗口中。

此外，您可以选择部分 JavaScript 代码并运行代码 sn-p。该扩展还适用于未保存的文件，因此您只需创建一个文件，将其更改为 Javascript 并快速编写代码（当您只需要快速尝试时）。很方便！

NodeJS 是必需的，否则它将无法工作。

【讨论】：

我还需要 3- 安装 Node.js nodejs.org/en 4- 转到环境变量并添加“节点”，其值为：“C:\Program Files\nodejs\node.exe”跨度>
为所有开发文件夹工作的最快方法！干杯！！
我对 JavaScript 开发和 VSCode 比较陌生，到目前为止，这是最简单的解决方案。
完美运行！正是我想要的。
安装后别忘了重启VS code！ :)

【解决方案2】：

我很惊讶这还没有被提及：

只需在 VS Code 中打开有问题的 .js 文件，切换到“调试控制台”选项卡，点击左侧导航栏中的调试按钮，然后单击运行图标（播放按钮）！

需要安装nodejs！

【讨论】：

并且无需使用此解决方案安装扩展！调试器是否具有与 Code Runner 相同的功能？
这个最有意义
嗯，问题不是要求运行程序，而是要求“执行 javascript 并显示结果”，这两者都有 :)
@tenwest - 你不需要一个使用 node.js 的调试配置吗？我目前只有 chrome 浏览器的调试配置。这会打开我不需要的 chrome 浏览器，因为我的代码不会调用任何浏览器函数。
今天不能开箱即用。需要某种调试配置：Chrome、Edge、Node.js、VS Code Extension。似乎都不合适。

【解决方案3】：

此解决方案旨在在节点中运行当前打开的文件并在 VSCode 中显示输出。

我有同样的问题，发现新引入的tasks 对这个特定的用例很有用。这有点麻烦，但这是我所做的：

在项目的根目录下创建一个.vscode 目录，并在其中创建一个tasks.json 文件。将此任务定义添加到文件中：

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

然后你可以： press F1 > type `run task` > enter > select `runFile` > enter 运行您的任务，但我发现添加自定义键绑定以打开任务列表更容易。

要添加键绑定，在 VSCode UI 菜单中，转到“代码”>“首选项”>“键盘快捷键”。将此添加到您的键盘快捷键中：

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

当然你可以选择任何你想要的组合键。

更新：

假设您正在运行 JavaScript 代码来 test 它，您可以通过将其 isTestCommand property 设置为 true 来将您的任务标记为 test 任务，然后您可以将键绑定到 workbench.action.tasks.test command 以进行单操作调用。

换句话说，您的tasks.json 文件现在将包含：

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

...您的keybindings.json 文件现在将包含：

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

【讨论】：

OP 没有说有任何项目。看起来他们想要执行当前打开的单个文件，这对于文本编辑器来说是一件非常合理的事情。

【解决方案4】：

在我看来，这是最快捷的方式；

在 Visual Studio 代码上打开集成终端 (View > Integrated Terminal)
输入'node filename.js'
按回车

注意：需要设置节点。（如果您有自制软件，只需在终端上输入“brew install node”）

注意 2：如果您还没有自制程序和节点，强烈推荐。

祝你有美好的一天。

【讨论】：

【解决方案5】：

集成终端的快捷键是ctrl + `，然后输入node <filename>。

您也可以创建一个任务。这是我的 tasks.json 中唯一的代码：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

从这里创建一个快捷方式。这是我的 keybindings.json：

// Place your key bindings in this file to overwrite the defaults
[
{   "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{   "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]

这将在命令面板中打开“运行”，但您仍需要使用鼠标键入或选择要运行的任务，在本例中为节点。第二个快捷方式切换输出面板，已经有一个快捷方式，但是这些键彼此相邻并且更易于使用。

【讨论】：

【解决方案6】：

在 VS 代码中执行这些步骤。[在 windows os 中执行]

创建新文件
在里面写javascript代码
将文件另存为 filename.js
进入调试菜单
点击开始调试
或者直接按 F5

screenshot of starting debugging

screenshot of output of js code in terminal

编辑：阅读此文档以了解有关 JS for VSCode 的最新配置和功能：https://code.visualstudio.com/docs/languages/javascript

【讨论】：

对我来说，i）“开始调试”在“运行”下，ii）VSCode 要求我选择一个（浏览器！）环境，而不是一个简单的程序。
是的，我可以在我当前版本的 vscode 中看到这一点。在您发表评论后，我尝试运行 js。它要求选择浏览器。它还在列表中显示 Nodejs，如果您在此处选择 Nodejs，它将运行该文件并在调试控制台上显示输出，而无需离开 vscode 或任何其他配置。此外，当它要求选择浏览器时，它还提供了安装扩展程序的选项，这将使您的任务更轻松
我不想在浏览器中运行它。如果 Inseect nodejs，编译器错误没有报告（至少，我在输出中看不到 - 奇怪的是，如果我选择输出窗口，CTRL-A，CTRL-C，并在编辑器中粘贴，错误被粘贴. 嘿嘿。
我认为您应该发布一个新问题并在那里详细解释，以便我正确回答。
结帐 2021 年 8 月变更日志。现在他们提供内置调试器code.visualstudio.com/updates/v1_60#_javascript-debugging

【解决方案7】：

好吧，要简单地运行代码并在控制台上显示输出，您可以创建一个任务并执行它，就像@canerbalci 提到的那样。

这样做的缺点是你只会得到输出，仅此而已。

我真正喜欢做的是能够调试代码，比如说我尝试解决一个小算法或尝试一个新的 ES6 功能，然后我运行它，它有一些可疑之处，我可以调试它在 VSC 内。

因此，我没有为它创建任务，而是修改了此目录中的 .vscode/launch.json 文件，如下所示：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": true,
        "args": [],
        "cwd": "${fileDirname}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }
]
}

它的作用是在 VSC 的调试器中启动您当前所在的任何文件。它设置为在启动时停止。

要启动它，请在要调试的文件中按 F5 键。

【讨论】：

好，但是最后需要按Shift+F5来停止调试器
你也可以在你的代码中添加一个 process.exit() :D

【解决方案8】：

当我第一次开始使用扩展名为 Code Runner 的 VS Code 时，我遇到了这个问题

你需要做的是在用户设置中设置node.js路径

您需要在 Windows 机器上安装时设置路径。

我的是 \"C:\\Program Files\\nodejs\\node.exe\"

因为我的文件目录名称中有空格

请看下面的图片。我未能运行代码一开始因为我在路径名中犯了一个错误

希望对你有所帮助。

当然，你的问题帮助了我，因为我也来到这里寻求帮助，以便在我的 VS CODE

中运行 JS

【讨论】：

提醒一下，您的设置中不需要所有这些\\，在Windows 中，简单的/ 也可以。

【解决方案9】：

我建议您使用一个名为 Quokka 的简单易用的插件，它现在非常流行，可以帮助您随时随地调试代码。 Quokka.js。使用此插件的一个最大优势是您可以节省大量时间来浏览网页并评估您的代码，借助此插件您可以看到 VS 代码中发生的一切，从而节省大量时间。

【讨论】：

【解决方案10】：

现在这可能是最简单的了，从 v1.32 开始：

{
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "node '${file}'\u000D" }
  }

使用您自己的键绑定。

请参阅发行说明：sendSequence and variables。

使用 vscode v1.32，您可以使用${file} 等变量将sendSequence 发送到终端，这是当前文件。如果您想要其他路径，请在上面的键绑定中将 ${file} 替换为您的路径名。

\u000D 是一个返回，所以它会立即运行。

我在${file} 变量周围添加了's，以防您的文件路径中有空格，喜欢c:Users\Some Directory\fileToRun

【讨论】：

不错！我只是将其粘贴到File > Preferences > keyboard shortcuts

【解决方案11】：

只需安装 nodemon 并运行

nodemon your_file.js

在 vs 代码终端上。

【讨论】：

什么是nodemon我需要安装它
Nodemon 是一个节点包。如果你已经有像 npm 或 yarn 这样的 packahe 管理器：从 NPM 的 Nodemon 页面中删除： npm install -g nodemon 并且 nodemon 将全局安装到你的系统路径。您还可以将 nodemon 作为开发依赖项安装： npm install --save-dev nodemon
如果我已经有节点节点 MyJSFileName.js，我可以简单地写

【解决方案12】：

我使用 Node Exec，无需配置，构建您当前正在结束的文件或曾经选择的文件，并在 VSCode 中输出。

https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node

通过一些配置，您也可以添加 Babel 来进行一些即时转译。

【讨论】：

【解决方案13】：

这很简单，当您在 VS Code 中创建一个新文件并运行它时，如果您还没有配置文件，它会为您创建一个，您唯一需要设置的是“程序”值，并将其设置为您的主 JS 文件的路径，如下所示：

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    // ABSOLUTE paths are required for no folder workspaces.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // ABSOLUTE path to the program.
            "program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
            "cwd": "",
            // ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

【讨论】：

它有效，但每次创建新文件时都必须修改此文件，我认为这不是 OP 所要求的

【解决方案14】：

在Visual Studio代码中无需设置运行javascript，python等代码的环境，您只需安装Code Runner Extension，然后只需选择您要运行的代码部分并点击右上角的运行按钮。

【讨论】：

【解决方案15】：

如果您的机器上安装了节点

只需在VSCODE 中打开终端并输入node yourfile.js 即可

【讨论】：

这本身并不是一个解决方案。如果您在 VSCODE 的终端中键入“node”，它会在终端中打开交互式 shell，并显示“欢迎使用 Node.js v14.15.4”。 ..（至少在 os x 上）
这是否允许在 VSCode 中进行调试和断点？

【解决方案16】：

另一种选择是使用 Visual Studio Code 中的开发人员工具控制台。只需从帮助菜单中选择“切换开发人员工具”，然后在弹出的开发人员工具中选择“控制台”选项卡。从那里您可以使用与 Chrome 中相同的开发工具 REPL。

【讨论】：

【解决方案17】：

对于 windows：只需将 .js 文件的文件关联更改为 node.exe

1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".

【讨论】：

【解决方案18】：

有很多方法可以在 Visual Studio Code 中运行 javascript。

如果你使用 Node，那么我建议使用 VSC 中的标准调试器。

我通常会创建一个虚拟文件，例如我在其中进行外部测试的 test.js。

在存放代码的文件夹中，创建一个名为“.vscode”的文件夹并创建一个名为“launch.json”的文件

在此文件中粘贴以下内容并保存。现在您有两个选项来测试您的代码。

当您选择“Nodemon 测试文件”时，您需要将代码放入 test.js 中进行测试。

要安装 nodemon 以及有关如何在 VSC 中使用 nodemon 进行调试的更多信息，我建议阅读此article，其中更详细地解释了 launch.json 文件的第二部分以及如何在 ExpressJS 中进行调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Nodemon Test File",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/test.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

【讨论】：

【解决方案19】：

您必须设置 Node.js 环境变量才能在 VS 代码中运行 JavaScript 代码。按照这些设置并创建路径。

--打开控制面板->系统->高级系统设置->环境变量 --find 变量 PATH 并将 node.js 文件夹路径添加为值。通常它是 C:\Program Files Nodejs;。如果变量不存在，则创建它。 --重启你的IDE或电脑。

如果您想知道节点可执行文件应该在您的 C:\Program Files\nodejs 文件夹中。

如果您需要检查 PATH，您可以通过右键单击文件资源管理器中的计算机或控制面板中的安全设置来查看它。在那里选择高级系统设置。将打开一个对话框，其中选择了“高级”选项卡。底部是一个按钮，环境变量。

【讨论】：

【解决方案20】：

使用 npm 安装 nodemon：npm install nodemon -g
初始化节点：npm init

打开 package.json 并将其更改为：

{
  "name": "JavaScript",
  "version": "1.0.0",
  "description": "",
  "main": "{filename}.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "nodemon {filename}.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

转到终端并编写以下命令：npm start

【讨论】：

这会允许调试和断点吗？

【解决方案21】：

另一种方法是打开终端ctrl+`执行node。现在您有一个节点 REPL 处于活动状态。您现在可以将文件或选定的文本发送到终端。为此，请打开 VSCode 命令托盘（F1 或 ctrl+shift+p）并执行 >run selected text in active terminal 或 >run active file in active terminal。

如果您在执行代码之前需要一个干净的 REPL，则必须重新启动节点 REPL。这是在终端中使用节点 REPL ctrl+c ctrl+c 退出并键入 node 以开始新的。

您可能可以将 command Pallet 命令键绑定到您想要的任何键。

PS：node 应该安装在你的路径中

【讨论】：