在 Visual Studio Code 中运行 JavaScript

Question

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

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

console.log('hello world');

我假设需要 Node.js 但不知道该怎么做？

我所说的Visual Studio Code是指 Microsoft 的新代码编辑器——不是使用 Visual Studio 编写的代码。

Answer 1

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

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

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

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

Answer 2

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

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

需要安装nodejs！

Answer 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 代码来测试它，您可以通过将其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 4

在我看来，这是你最快的方法；

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

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

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

祝你今天过得愉快。

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

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

Answer 6

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

1. 创建新文件

2. 在里面写javascript代码

3. 将文件另存为 filename.js

4. 转到调试菜单

5. 点击开始调试

6. 或者直接按 F5

开始调试的截图

终端中js代码输出截图

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

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

Answer 8

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

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

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

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

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

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

希望这会帮助你。

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

Answer 9

["

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

Answer 10

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

Answer 11

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

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

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

Answer 12

只需安装 nodemon 并运行

nodemon your_file.js

在 vs 代码终端上。

Answer 13

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

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

Answer 14

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

Answer 15

这很简单，当您在 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
        }
    ]
}

Answer 16

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

Answer 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".

Answer 18

在 Visual Studio Code 中运行 javascript 的方法有很多种。

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

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

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

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

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

要安装 nodemon 以及有关如何在 VSC 中使用 nodemon 进行调试的更多信息，我建议阅读这篇文章，其中更详细地解释了 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 19

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

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

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

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

Answer 20

1. 使用 npm 安装 nodemon： npm install nodemon -g

2. 初始化节点： npm init

3. 打开 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" }

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

Answer 21

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

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

Answer 22

程序

*（前言）

• 以下步骤是：
  1. 根据我的 memory，没有严格测试步骤......（可能会遗漏一些东西？）
  2. 以后的版本可能会有一些不同的变化
  3. 事物的自动设置（例如：环境路径）可能不同
  4. Win10下

运行纯 js

• 1. 下载并安装 Vscode
  2. 从官方网站下载并安装Node.js ，例如：在G:\nodejs\node.exe
  3. 打开 Vscode -> 打开你的工作区文件夹 eg: MyTestSpace -> 创建一个新的文件调用 eg: test.js
  4. 写一段代码console.log('-----test-----'); 在test.js
  5. go 到Run and Debug面板 (ctrl+shift+d) > 顶部的Run drop down list > Add Config (MyTestSpace) > 应该为您自动生成launch.json
  6. > 在自动完成弹出窗口 > select Node.js: Launch Program >自动完成配置填写 > 将program重命名为你的test.js所在的路径
     • 你的launch.json应该看起来像这样：

      { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/test.js", }, ], }

  7. go 回到Run drop down list > select Launch Program (MyTestSpace) > 单击Run按钮
  8. 在您的Debug Console中应该看到以下内容::

      G:\nodejs\node.exe.\test.js -----test-----

• 演示图
  • 
  • 命名可能不同
    • （只是一个丑陋的演示草稿[[（只是尝试发布一个不费吹灰之力写的答案......）]]）
    • （忽略不必要的工作人员...）

运行js & html（简单说说）

• 1. 有一个 eg: main.html文件，带有<script>标签引用test.js
  2. 在“ Run drop down list > 添加配置 > select Chrome > 自动完成launch.json > 将路径更改为main.html
     • 例如：

      { "type": "chrome", "request": "launch", "name": "Open test.html", "file": "h:\\Book\\debug\\LXPI\\OEBPS\\lib_new2\\libNt\\crossFileHtse\\build_HighlightTypeset_ReadHtse\\test.html", },

  3. select chrome launch config > 运行 > html 在您的浏览器和控制台日志中打开

Answer 23

另一种方法是打开终端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以开始新的。

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

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

Answer 24

只需在谷歌上搜索“Mozilla javascript 参考”。 打开第一个链接 (developer.mozilla)，然后打开该页面中的任何链接。 它提供了“试一试”示例代码，您可以在那里删除并编写和测试您自己的代码。 简单的。 不需要 VS 代码:-)