关于node.js：在Visual Studio Code中运行JavaScript


Run JavaScript in Visual Studio Code

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

例如包含

1
console.log('hello world');

我认为需要nodejs，但无法解决该怎么做？

编辑：" Visual Studio代码"是指Microsoft的新代码编辑器-不是使用Visual Studio编写的代码

Visual Studio程式码

相关讨论

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

  • 安装Code Runner扩展
  • 在文本编辑器中打开JavaScript代码文件，然后使用快捷方式Control + Alt + N(或在MacOS上为？Control + ？Option + N)，或??按F1，然后选择/键入Run Code，代码将运行输出将显示在"输出"窗口中。

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

    相关讨论

    该解决方案旨在在节点中运行当前打开的文件，并以VSCode显示输出。

    我有同样的问题，发现新引入的tasks对于此特定用例很有用。这有点麻烦，但这是我所做的：

    在项目的根目录中创建一个.vscode目录，并在其中创建一个tasks.json文件。将此任务定义添加到文件中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
       "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菜单中转到"代码">"首选项">"键盘快捷键"。将此添加到键盘快捷键：

    1
    2
    3
    4
    {
       "key":"cmd+r",
       "command":"workbench.action.tasks.runTask"
    }

    当然，您可以选择任何您想要的键组合。

    更新：

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

    换句话说，您的tasks.json文件现在将包含：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
       "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文件现在将包含：

    1
    2
    3
    4
    {
       "key":"cmd+r",
       "command":"workbench.action.tasks.test"
    }
    相关讨论

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

    只需在VS Code中打开有问题的.js文件，切换到"调试控制台"标签，点击左侧导航栏中的调试按钮，然后单击运行图标(播放按钮)即可！

    需要安装nodejs！

    相关讨论

    集成终端的快捷方式是ctrl + `，然后键入node 。

    或者，您可以创建一个任务。这是我的task.json中的唯一代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
    // 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：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 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"
    }
    ]

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

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

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

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

    对于我来说是\"C:\\Program Files\
    odejs\
    ode.exe\"

    As I have a Space in my File Directory Name

    请参阅下面的这张图片。我最初无法运行代码，原因是我在路径名中输入了错误
    enter image description here

    希望这会帮助你。

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

    我认为这是最快的方法。

    • 在Visual Studio代码(View > Integrated Terminal)上打开集成终端
    • 输入'node filename.js'
    • 按Enter

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

    注2：如果您还没有的话，强烈建议您使用自制软件和节点。

    祝你今天愉快。

    好吧，只需运行代码并在控制台上显示输出，就可以创建并执行任务，就像@canerbalci提到的一样。

    这样做的缺点是您只会得到输出而已。

    我真正想做的是能够调试代码，比如说我正在尝试解决一个小的算法或尝试一个新的ES6功能，然后运行它，但有些麻烦，我可以在VSC中对其进行调试。

    因此，我没有为其创建任务，而是按如下所示修改了此目录中的.vscode / launch.json文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    {
    "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等上运行代码的环境，只需安装Code Runner Extension，然后选择要运行的代码部分并点击右上角显示运行按钮。

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

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

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

    这很简单，当您在VS Code中创建一个新文件并运行它时，如果您还没有配置文件，它将为您创建一个配置文件，您唯一需要设置的就是" program"值，并进行设置到主JS文件的路径，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    {
       "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
            }
        ]
    }
    相关讨论

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

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

    使用您自己的键盘绑定。

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

    使用vscode v1.32，您可以使用${file}这样的变量(当前文件)sendSequence到终端。如果您需要其他路径，请在上面的绑定中用您的路径名替换$ {file}。

    \u000D是返回值，因此它将立即运行。

    我在${file}变量周围添加了'，以防文件路径中包含空格，
    像c:Users\Some Directory\fileToRun

    对于Windows：只需将.js文件的文件关联更改为node.exe

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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
    odejs
    ode.exe"
    8) Click"Open" and you can just see cmd flashing
    9) Restart vscode and open the file -> Terminal Menu ->"Run active file".

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

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

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

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

    在具有代码的文件夹中，创建一个名为" .vscode"的文件夹，并创建一个名为" launch.json"的文件

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

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

    要安装nodemon以及有关如何在VSC中使用nodemon进行调试的更多信息，我建议阅读本文，该文章将更详细地解释launch.json文件的第二部分以及如何在ExpressJS中进行调试。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {
       "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",
            },
        ]
    }

    另一种方法是打开终端ctrl + execute 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以开始新操作时，将完成此操作。

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

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