Run Electron app with run button in VSCode?

Question

I'm fairly new to VSCode, and am building an HTML5 app with Electron. I find it annoying to have to switch windows and enter a command every time I want to test my application, and was wondering if there's a way to set up VSCode to run my Electron app by pushing the run button.

My file layout is as follows:

Project Directory
     |
     | -- index.js
     | -- src
           |
           | -- index.html
           | -- script.js

The project directory is where the electron. command is typically run, and I'll be mostly working inside the src directory while in VSCode. Does anybody know how this can be configured?

Answer 1

You can create a new run configuration in VSCode by selecting Run > Add configuration and select Node.js (or any template, you'll overwrite it anyway)

(Do this from the src directory, because that's where you're working most)

Put the this in the launch.json file it creates:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Run Electron app",
            "cwd": "${workspaceFolder}/..",
            "runtimeExecutable": "electron",
            "args": [
                "."
            ]
        }
    ]
}

This creates a launch configuration that will run electron. when you press the run button. Note the "cwd": "${workspaceFolder}/.." which runs the command one directory up so it's in your root project directory.

Answer 2

Have you made sure the Electron app has a main script defined in its package.json.

The main script should be set to the path of the main JavaScript file that runs your Electron app

package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^10.1.0"
  }
}