在Visual Studio代码中运行JavaScript

问题描述 投票：108回答：14

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

例如，包含的脚本文件

console.log('hello world');

我假设将需要nodejs，但无法解决如何做到这一点？

编辑：通过“Visual Studio代码”我的意思是来自Microsoft的新代码编辑器 - 不是使用Visual Studio编写的代码

Visual Studio Code

node.js visual-studio-code
14个回答
42
投票

此解决方案旨在在节点中运行当前打开的文件并在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代码来测试它，您可以通过将其isTestCommand property设置为true将您的任务标记为测试任务，然后您可以将密钥绑定到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"
}
1
投票

从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是一个返回，所以它会立即运行。

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

1
投票

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

0
投票

有很多方法可以在Visual Studio Code中运行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",
        },
    ]
}
0
投票

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

-1
投票

另一种方法是打开终端ctrl +`execute node。现在您有一个节点REPL处于活动状态。您现在可以将文件或所选文本发送到终端。为了做那个打开VSCode命令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以启动新的时间。

您可以将命令调色板命令重新绑定到您希望的任何键。

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

208
投票

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

  1. 安装Code Runner Extension
  2. 在文本编辑器中打开JavaScript代码文件，然后使用快捷方式Ctrl+Alt+N，或按F1然后选择/键入Run Code，代码将运行，输出将显示在输出窗口中。

此外，您可以选择部分JavaScript代码并运行代码段。很方便！

19
投票

我很惊讶这还没有提到：

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

需要安装nodejs！

9
投票

集成终端的快捷方式是（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"
}
]

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

6
投票

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

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

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

对我来说这是\"C:\\Program Files\\nodejs\\node.exe\"

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

见下图。我最初没有运行代码，因为我在路径名称enter image description here中犯了一个错误

希望这会帮助你。

当然，你的问题对我有帮助，因为我也来这里寻求帮助在我的VS代码中运行JS

5
投票

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

  • 在visual studio代码上打开集成终端（View > Integrated Terminal）
  • 键入'node filename.js'
  • 按回车键

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

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

祝你今天愉快。

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键。

2
投票

这很简单，当你在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
        }
    ]
}
2
投票

我使用Node Exec，不需要配置，构建您当前正在结束的文件或者已经选择的文件以及VSCode内部的输出。

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

通过一些配置，你可以添加Babel来做一些动态转换。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.