Electron Builder for Visual Studio Code. Build system for Electron Builder. Installation Extension Marketplace. Launch Quick Open, paste the following command, and press Enter. Ext install electron-builder. Packaged Extension. Download the package extension from the the release page and install it from the command-line: $ code -install-extension path/to/electron-builder-.vsix.

1. Visual Studio Code Electron
2. Visual Studio Code Electron.exe
3. Visual Studio Code Without Electron

A VS Code extension to debug your JavaScript code in Electron. This is a fork of vscode-chrome-debug which automatically downloads and runs Electron. This extension does nothing which fundamentally can not be done via vscode-chrome-debug and a proper launch configuration and exists purely for convenience. Welcome to the March 2021 release of Visual Studio Code. There are a number of updates in this version that we hope you will like, some of the key highlights include: Accessibility improvements - Multi-cursor support and increased line limit. Updated icons for macOS Big Sur - Brand icons that match the visual.

This guide goes over how to set up VSCode debugging for both your own Electron project as well as the native Electron codebase.

Debugging your Electron app

Main process

1. Open an Electron project in VSCode.

2. Add a file .vscode/launch.json with the following configuration:

3. Debugging

Set some breakpoints in main.js, and start debugging in the Debug View. Google app for macbook air. You should be able to hit the breakpoints.

Here is a pre-configured project that you can download and directly debug in VSCode: https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Debugging the Electron codebase

If you want to build Electron from source and modify the native Electron codebase, this section will help you in testing your modifications.

For those unsure where to acquire this code or how to build it, Electron's Build Tools automates and explains most of this process. If you wish to manually set up the environment, you can instead use these build instructions.

Windows (C++)

1. Open an Electron project in VSCode.

2. Add a file .vscode/launch.json with the following configuration:

Configuration Notes

• cppvsdbg requires the built-in C/C++ extension be enabled.
• ${workspaceFolder} is the full path to Chromium's src directory.
• your-executable-location will be one of the following depending on a few items:
  • Testing: If you are using the default settings of Electron's Build-Tools or the default instructions when building from source.
  • Release: If you built a Release build rather than a Testing build.
  • your-directory-name: If you modified this during your build process from the default, this will be whatever you specified.
• The args array string 'your-electron-project-path' should be the absolute path to either the directory or main.js file of the Electron project you are using for testing. In this example, it should be your path to electron-quick-start.

3. Debugging

Set some breakpoints in the .cc files of your choosing in the native Electron C++ code, and start debugging in the Debug View.

Build system for Electron Builder.

Installation

Extension Marketplace

Launch Quick Open, paste the following command, and press Enter

ext install electron-builder

Packaged Extension

Visual Studio Code Electron

Download the package extension from the the release page and install it from the command-line:

Alternatively, you can download the packaged extension from the Open VSX Registry or install it using the ovsx command-line tool:

Clone Repository

Change to your Visual Studio Code extensions directory:

Clone repository as electron-builder:

Usage

Prerequisites

By default, electron-builder is expected to be installed as a local dependency. Alternatively, you can specify the path to electron-builder in your user settings.

Electron Builder expects your project to include the electron module as a devDependency. Likewise, if you want to work with TOML configurations, you need to install the toml module as a devDependency.

Building

You can run the Electron Builder: Build from the command-palette or from the title menu when opening a configuration file. When no such file has been opened, your workspace will be scanned for eligible configurations.

Configuration Precedence:

• extension settings using --config option
• package.json with build field
• electron-builder.yml
• electron-builder.yaml
• electron-builder.json
• electron-builder.toml
• electron-builder.js

Options

pathToElectronBuilder

Type: string
Default: ${workspaceFolder}/node_modules/.bin/electron-builder

Path to your electron-builder, defaults to your locally installed dependency

electronBuilderArguments

Burn for osx. Type: string[]
Default: []

Custom arguments for electron builder

Visual Studio Code Electron.exe

Related

License

Visual Studio Code Without Electron

This work is licensed under The MIT License