运行 JavaScript 在 Visual Studio 代码中

Question

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

例如，脚本文件包含：

console.log('hello world');

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

By Visual Studio Code I mean the new Code Editor from Microsoft - Not code written using Visual Studio.

Answer 1

非常简单，当您在 VS Code 中创建一个新文件并运行它时，如果您还没有配置文件，它会为您创建一个，您唯一需要设置的是"program" 值，并将其设置为您的主 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
        }
    ]
}

Answer 2

此解决方案旨在运行当前在节点中打开文件并在 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 菜单中，转到 'Code' > 'Preferences' > 'Keyboard Shortcuts'。将此添加到您的键盘快捷键：

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

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

更新：

假设您正在运行将 JavaScript 代码测试，您可以将您的任务标记为测试任务，方法是将其 isTestCommand property to true and then you can bind a key to the 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"
}

Answer 3

好吧，只需运行代码并在控制台上显示输出，您就可以创建一个任务并执行它，就像@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 键。

Answer 4

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

安装 Code Runner Extension
在文本编辑器中打开 JavaScript 代码文件，然后使用快捷键 Control+Alt+ N（或 ⌃ Control+⌥ Option+N on macOS），或按 F1 然后 select/type Run Code，代码将运行并且输出将显示在输出 Window.

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

为此需要 NodeJS，否则它将无法工作。

Answer 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"
}
]

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

Answer 6

我使用了 Node Exec，无需配置，构建您当前正在结束的文件或已选择的文件并在 VSCode.

中输出

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

通过一些配置，您可以添加 Babel 来进行一些动态转译。

Answer 7

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

您需要做的是在用户设置[=]中设置node.js路径42=]

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

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

As I have a Space in my File Directory Name

请参阅下面的图片。我一开始运行代码失败了，因为我在 路径名 中犯了一个错误

希望对您有所帮助。

当然，您的问题对我有帮助，因为我也来这里是为了运行 JS 在我的 VS代码

Answer 8

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

只需在 VS Code 中打开有问题的 .js 文件，切换到 'Debug Console' 选项卡，点击左侧导航栏中的调试按钮，然后单击运行图标（播放按钮)!

需要安装nodejs！

Answer 9

我认为这是您最快的方法；

在 visual studio 代码 (View > Integrated Terminal)
输入'node filename.js'
按回车键

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

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

祝你有愉快的一天。

Answer 10

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

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

使用您自己的键绑定。

参见发行说明：sendSequence and variables。

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

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

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

Answer 11

另一种方法是打开终端 ctrl+` 执行 node。现在您有一个节点 REPL 处于活动状态。您现在可以将文件或选定的文本发送到终端。为此，请打开 VSCode command pallete（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 pallete 命令键绑定到您想要的任何键。

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

Answer 12

在Visual Studio代码中运行javascript有很多方法。

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

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

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

的文件

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

当您选择"Nodemon Test File"时，您需要将您的代码放入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",
        },
    ]
}

Answer 13

另一种选择是在 Visual Studio 代码中使用开发者工具控制台。只需从帮助菜单中 select "Toggle Developer Tools"，然后 select 弹出的开发人员工具中的 "Console" 选项卡。从那里，您拥有与 Chrome.

中相同的开发工具 REPL

Answer 14

无需为运行设置 javascript、python 等 visual studio 代码中的代码环境，您只需要做的就是安装 Code Runner Extension，然后 select 您想要运行的代码部分，然后点击右上角的运行按钮。

Answer 15

对于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".

Answer 16

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

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

screenshot of starting debugging

screenshot of output of js code in terminal

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

Answer 17

我建议您使用一个名为 Quokka 的简单易用的插件，它现在非常流行，可以帮助您随时随地调试代码。 Quokka.js。使用这个插件的一个最大的好处是你可以节省很多时间去浏览器和评估你的代码，在这个帮助下你可以看到 VS 代码中发生的一切，这节省了很多时间。

Answer 18

只需安装 nodemon 和运行

nodemon your_file.js

在 vs 代码终端上。

Answer 19

如果你的机器上安装了node

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

Answer 20

使用 npm 安装 nodemon：npm install nodemon -g
初始化nodemon：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

Answer 21

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

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

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

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

运行 JavaScript 在 Visual Studio 代码中

Run JavaScript in Visual Studio Code

javascript

node.js

visual-studio-code