在Visual Studio Code中运行JavaScript

node.js Node.js

Stafan

2020-03-26

有没有一种方法可以执行javascript并使用Visual Studio Code显示结果?

例如包含

console.log('hello world');

我认为将需要nodejs,但无法解决该怎么做?

编辑:“ Visual Studio代码”是指Microsoft的新代码编辑器-不是使用Visual Studio编写的代码

Visual Studio程式码

第3786篇《在Visual Studio Code中运行JavaScript》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

16个回答
樱Gil泡芙 2020.03.26

有很多方法可以在Visual Studio Code中运行javascript。

如果使用Node,则建议使用VSC中的标准调试器。

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

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

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

当选择“ Nodemon Test File”时,需要将代码放入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",
        },
    ]
}
Tony樱 2020.03.26

集成终端的快捷方式是ctrl+ `,然后键入node <filename>

或者,您可以创建一个任务。这是我的task.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"
}
]

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

null 2020.03.26

另一种方法是打开终端ctrl +` execute node现在,您有一个激活的节点REPL。现在,您可以将文件或选定的文本发送到终端。为此,请打开VSCode 命令面板F1ctrl + shift + p)并执行>run selected text in active terminal>run active file in active terminal

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

您可以将命令pallete命令绑定到所需的任何键。

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

斯丁 2020.03.26

只需安装nodemon并运行

nodemon your_file.js

在vs代码终端上。

DavaidTony宝儿 2020.03.26

对于Windows:只需将文件的文件关联更改.jsnode.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".
凯西里 2020.03.26

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

Eva西里蛋蛋 2020.03.26

有一种运行JavaScript的简便得多的方法,无需进行配置:

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

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

Gil伽罗小宇宙 2020.03.26

在VS代码中执行以下步骤。[在Windows操作系统中执行]

  1. 建立新档案

  2. 在其中编写JavaScript代码

  3. 将文件另存为filename.js

  4. 转到调试菜单

  5. 点击开始调试

  6. 或直接按F5

开始调试的屏幕截图

终端中js代码输出的屏幕截图

番长 2020.03.26

我建议您使用一个名为Quokka的简单插件,该插件在当今非常流行,可以帮助您随时随地调试代码。 Quokka.js使用此插件的最大优势在于,您可以节省大量时间在Web浏览器上评估代码,借助此插件,您可以看到VS代码中发生的所有事情,从而节省了很多时间。

Itachi 2020.03.26

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

老丝阿飞 2020.03.26

这很简单,当您在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
        }
    ]
}
樱卡卡西 2020.03.26

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

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

在Windows计算机中安装路径时需要设置路径

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

由于我的文件目录名称中有空格

请参阅下面的这张图片最初无法运行代码原因是我在路径名中输入了错误 在此处输入图片说明

希望这会帮助你。

当然,您的问题对我有帮助,因为我也来这里获得帮助,可以JS在我的VS CODE中运行

蛋蛋西里 2020.03.26

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

老丝阿飞 2020.03.26

我使用了Node Exec,不需要任何配置,即可构建您当前正在结束的文件或已选择的文件,并在VSCode内部进行输出。

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

只需进行一些配置,您就可以添加Babel来进行即时转译。

老丝阿飞 2020.03.26

该解决方案旨在在节点中运行当前打开的文件,并以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代码对其进行测试,则可以通过将其属性设置为将任务标记为测试任务,然后可以将键绑定到命令以进行单次操作。isTestCommandtrueworkbench.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"
}
Itachi 2020.03.26

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

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

需要安装nodejs!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android