是否有一种方法来执行JavaScript和显示使用Visual Studio代码的结果?

例如,一个脚本文件包含:

console.log('hello world');

我假设Node.js是需要的,但不知道如何做到这一点?

通过Visual Studio Code,我指的是来自微软的新代码编辑器 不是用Visual Studio编写的代码。


当前回答

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

其他回答

你不需要在visual studio代码中设置运行javascript、python等代码的环境,你所要做的就是安装代码运行器扩展,然后选择你想要运行的代码的一部分,然后点击右上角的运行按钮。

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

过程

*(前言)

步骤如下: 根据我的记忆,没有严格测试步骤…(可能会错过一些东西?) 以后的版本可能会有一些不同的变化 事物的自动设置(例如:环境路径)可能是不同的 在Win10

运行纯js

download & install Vscode download & install Node.js from the the offical website, eg: in G:\nodejs\node.exe open Vscode -> open your workspace folder eg: MyTestSpace -> create a new file call eg: test.js write a code console.log('-----test-----'); in test.js go to the Run and Debug panel (ctrl+shift+d) > Run drop down list at the top > Add Config (MyTestSpace) > a launch.json should be auto generated for you > at the auto-completetion popup > select Node.js: Launch Program > auto complete config fill in > rename the program to the path where your test.js locate your launch.json should look something like this:: { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/test.js", }, ], } go back to the Run drop down list > select Launch Program (MyTestSpace) > click the Run button in your Debug Console should see the following:: G:\nodejs\node.exe .\test.js -----test----- a graph for demo naming might be different (just a ugly rough draft for demo [[(just try to post an answer wrote with little effort...)]]) (ignore unnecessary staff...)

运行js & html(简要介绍)

have a eg: main_test.html file, with a <script> tag refer to the test.js in the Run drop down list > add config > select Chrome > auto complete launch.json > change path to main_test.html eg: { "type": "chrome", "request": "launch", "name": "Open main_test.html", "file": "h:\\Book\\debug\\LXPI\\OEBPS\\lib_new2\\libNt\\crossFileHtse\\build_HighlightTypeset_ReadHtse\\main_test.html", }, select that chrome launch config > Run > html is opened up in your browser & console log printed

我很惊讶居然没有人提到这一点:

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

需要安装nodejs !

这个解决方案打算运行当前打开的文件在节点和显示输出在VSCode。

我也有同样的问题,并且发现新引入的任务对于这个特定的用例很有用。这有点麻烦,但我是这么做的:

在项目的根目录中创建一个.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菜单中,点击“Code”>“Preferences”>“Keyboard Shortcuts”。添加到你的键盘快捷键:

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

当然,你可以选择任何你想要的组合键。

更新:

假设您正在运行JavaScript代码来测试它,您可以通过将其isTestCommand属性设置为true来将您的任务标记为测试任务,然后您可以将一个键绑定到workbench.action.tasks.test命令以进行单动作调用。

换句话说,就是你的任务。Json文件现在将包含:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

...还有你的按键。Json文件现在将包含:

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