在"Visual Studio代码"中运行Javascript

Question

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

例如,包含的脚本文件

console.log('hello world');

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

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

Visual Studio代码

Answer 1

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

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

此外,您可以选择部分JavaScript代码并运行代码段.很方便!

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菜单中,转到"代码">"首选项">"键盘快捷键".将其添加到键盘快捷键:

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

当然,您可以选择任何您想要的组合键.

更新:

假设你正在运行的JavaScript代码来测试它,你可以标记你的任务作为检验其设置的任务isTestCommand属性来true,然后你可以绑定一个关键workbench.action.tasks.test命令用于单动作调用.

换句话说,您的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

我很惊讶这还没有提到:

只需在VS Code中打开相关的.js文件,切换到"Debug Console"选项卡,点击左侧导航栏中的调试按钮,然后单击运行图标(播放按钮)!

需要安装nodejs!

Answer 4

集成终端的快捷方式是(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",但您仍然必须使用鼠标键入或选择要运行的任务,在本例中为节点.第二个快捷方式切换输出面板,已经有一个快捷方式,但这些键彼此相邻,更易于使用.

Answer 5

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

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

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

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

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

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

看到这个图片的下方.我最初没有运行代码,因为我在路径名中犯了一个错误

希望这会帮助你.

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

Answer 7

在 VS 代码中执行这些步骤。 [在 windows 操作系统中执行]

1. 创建新文件

2. 在其中编写 javascript 代码

3. 将文件另存为 filename.js

4. 进入调试菜单

5. 点击开始调试

6. 或者直接按F5

启动调试截图

终端js代码输出截图

Answer 8

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

Answer 9

我认为这是最快的方法。

• 在Visual Studio代码（View > Integrated Terminal）上打开集成终端
• 类型 'node filename.js'
• 按Enter

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

注2：强烈建议您使用家酿和节点（如果尚未安装）。

祝你今天愉快。

Answer 10

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

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

使用您自己的键绑定。

请参阅发行说明：sendSequence 和变量。

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

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

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

Answer 11

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

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