Visual Studio Code Electron

Posted By admin  On 02.05.21



Build system for Electron Builder.

Installation

Extension Marketplace

Electron at that time needed street credibility and exposure as a new web development tool. It is a hybrid tool that grants web developers the ability to create desktop applications in a web environment, with ease of use. Microsoft was happy to champion their cause to get more exposure in web development circles. WPF and UWP are good enough. Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free. 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.

Studio

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. Electron has a launch flag -remote-debugging-port, which lets you specify a port for remote debugging. The language spoken at this port is Chrome Debugging Protocol, and VS Code has an extension that just handles that: Debugger for Chrome.

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:

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

Visual Studio Code Electron App

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: Deezer app download mac.

  • 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

Type: string[]
Default: []

Custom arguments for electron builder

Related

License

This work is licensed under The MIT License

Here is a guide to debugging Electron App with VS Code. It uses Electron 2.0, works on all platforms, and includes instruction for debugging both Main and Renderer process.

I'll be using electron/electron-quick-start.Clone and open the project in VS Code. Then go to the Debug View and click the configure iconto make an empty launch.json.

You can also skip this tutorial and grab the code at: octref/vscode-electron-debug

Main Process

Fill launch.json with the following.

Visual Studio Code Electron Extension

The setting is pretty self-explanatory, use the electron in node_modules to run main.js.If you go to the Debug View and run Debug Main Process, you should see the code stoppingat the breakpoints in main.js.

Renderer Process

Making Renderer process work involves more effort, but as most of Electron App's codelives in Renderer Process, it is of more interest.

First, a high-level explanation as to how we'll make it work. Electron has a launch flag--remote-debugging-port Creative suite 5 mac download. , which lets you specify a port for remote debugging. The languagespoken at this port is Chrome Debugging Protocol,and VS Code has an extension that just handles that: Debugger for Chrome.

Setting up

Go to main.js and comment out this line:

Remote debugging doesn't work with multiple DevTools clients. We'll use the debugger in VS Codeinstead of Electron's DevTools.

Install Debugger for Chrome

Launch Quick Open, and enter ext install debugger-for-chrome.

Add a new configuration in launch.json

Most of the configuration is straightforward. 9222 is the port Debugger for Chrome usesby default, and webRoot tells Debugger for Chrome the location of the source code thatwe want to debug for.

Add some code to renderer.js

Visual Studio Code Electron Debug

Now we are ready to go.

Debugging

I added two breakpoints in renderer.js, and ran Debug Renderer Process in the Debug View.

Electron will stop on the second breakpoint if I click anywhere in the window:

However, it wouldn't hit the first breakpoint. The reason is Debugger for Chrome wouldfirst launch Electron, and try to attach to the running process to debug it. When itsuccessfully attached itself, the first console.log had already been executed.

The solution is to go to the Electron window and press cmd+r to reload, Electron willre-execute the renderer and hit the breakpoint.

Transpiling

Most modern Web apps are written in languages that transpile to JavaScript. If sourcemaps aregenerated during transpilation, we can debug the original code in VS Code.

I modified electron/electron-quick-startto use Babel and Webpack to transpile ES6 code. Here I'm debugging the un-transpiled code:

Details are in this commit: 4bb4a93

Why all the hassle?

You get all the nice features in VS Code while debugging, like:

  • Use Vim commands to jump around, thanks to VSCodeVim
  • Code folding

When inspecting DOM, I still need to go back to Chrome DevTools.But I find myself debugging much faster in VS Code, which I use everyday for coding.

Example Code

https://github.com/octref/vscode-electron-debug

Visual studio code for beginners

Open an issue if you have any question.

Vs Code Electron Version

  • 2017-02-18: Updated launch.json format
  • 2017-10-15: VSCode -> VS Code
  • 2018-06-10: Updated blog post for Electron 2.0