ChatGPT解决这个技术问题 Extra ChatGPT

在 Visual Studio Code 中运行 JavaScript

有没有办法使用 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 页面上使用浏览器控制台一样?

C
Community

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

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

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

为此需要NodeJS,否则它将无法正常工作。


我还需要 3- 安装 Node.js nodejs.org/en 4- 转到环境变量并添加带有值的“节点”:“C:\Program Files\nodejs\node.exe”
为所有开发文件夹工作的最快方法!干杯!!
我对 JavaScript 开发和 VSCode 比较陌生,到目前为止,这是最简单的解决方案。
@MasterJoe2 - VS Code 中有调试功能。老实说,我已经好多年没有这样做了。但是尝试设置一个断点并单击“运行和调试”。如果它不起作用 - 谷歌围绕“如何在 VS Code 中调试 JS”
安装后别忘了重启 VS Code! :)
A
Aliaksandr Sushkevich

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

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

需要安装nodejs!


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

该解决方案旨在在节点中运行当前打开的文件并在 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没有说任何关于有一个项目的事情。看起来他们想要执行当前打开的单个文件,这对于文本编辑器来说是一件非常合理的事情。
s
schrodingerscatcuriosity

在我看来,这是你最快的方法;

在 Visual Studio 代码上打开集成终端(查看 > 集成终端)

输入“节点文件名.js”

按回车

注意:需要设置节点。 (如果您有自制软件,只需在终端上输入“brew install node”)

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

祝你今天过得愉快。


感谢您的回答 :) 这个 run js in vscode 教程也几乎解释了同样的事情。
如果 js 文件包含像 sessionStorage 这样的客户端脚本,则会在终端中引发错误。
A
Aliaksandr Sushkevich

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

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


C
CrackerKSR

在 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
l
lebobbi

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

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

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

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

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

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

https://i.stack.imgur.com/mDTrL.png

希望这会帮助你。

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


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

从 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} 变量周围添加了 ',以防您的文件路径中有空格,例如 c:Users\Some Directory\fileToRun


好的!我只是将其粘贴到 File > Preferences > keyboard shortcuts
S
Srijan Chaudhary

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


d
dmo

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

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

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


d
davimdantas

只需安装 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
A
Abhijit Chakra

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

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


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

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


J
João Marcelo Brito

这很简单,当您在 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 所要求的
A
Alex Broadwin

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


H
Harikrishnan

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

I
Isak La Fleur

在 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",
        },
    ]
}

J
Jiban Krisna Das

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

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

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

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


E
Edwin Babu

使用 npm 安装 nodemon: npm install nodemon -g init 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


这将允许调试和断点吗?
K
Kasthuri Shravankumar

使用这个文件名 tempCodeRunnerFile 运行 java 文件而不被保存

public class tempCodeRunnerFile{
    public static void main(String[] args) {
        System.out.println("aaaaaa");
    }
}

h
h3dkandi

另一种方法是打开终端 ctrl+` 执行 node。现在您有一个节点 REPL 处于活动状态。您现在可以将文件或选定的文本发送到终端。为了做到这一点,打开 VSCode command PalleteF1ctrl+shift+p)并执行 >run selected text in active terminal>run active file in active terminal

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

您可能可以将命令调色板命令键绑定到您想要的任何键。

PS:node 应该已安装并在您的路径中