Getting Started With Electron in Visual Studio Code

Update June 27, 2016: As some of this is out of date with Electron 1.0+ and new versions of VSCode, I decided to livestream a run through of this post with some updates. Check out the video here: https://www.youtube.com/watch?v=tY8dIdToJjQ

Visual Studio Code has quickly become one of my favorite editors. I use regular Visual Studio for a lot of my development, but at times I feel it is way too heavy for what I am doing. Visual Studio Code is a lot lighter, and much better for these occasions. If you haven't taken a look at it yet I highly recommend you do.

VS Code is built on Electron, formerly Atom-shell, a cross-platform Chromium-based shell for building desktop apps with HTML, CSS, and JavaScript. It was created by the people over at GitHub for use with their Atom editor, and is now the foundation for a slew of cross-platform desktop applications.

I thought it would be fun to give a little tutorial on how to get started with Electron development in Visual Studio Code. To do this tutorial you will need to install Visual Studio Code and Node.js. You can download VS Code here: https://code.visualstudio.com/ and Node.js here: https://nodejs.org/.

Setup

The first thing you should do is set up a folder for your new app. This is a pretty simple step. I would follow the following structure:

/my_app_name

     /app

Next open up your command prompt and navigate to the folder you just created. Once you are there issue the following command:

npm install electron-prebuilt --save-dev

This will download a pre-built version of the Electron shell into your project folder. Your directory structure should now look something like this:

/my_app_name

     /app

     /node_modules

          /.bin

          /electron-prebuilt

               /dist

                    /electron.exe

                    /...

               /...

The path to Electron becomes important when we want to run our app.

Creating Your App

Open your /my_app_name folder in Visual Studio Code. The folder name should be visible in the Explore panel. Right-click on the /app folder and add a file named package.json. Copy the following code into it:

{

 "name" : "my_app_name",

 "version" : "0.1.0",

 "main" : "main.js"

}

You can name main.js whatever you want, but this seems to be the standard convention. When Electron loads your app it looks for the package.json file. It parses the contents and executes the JavaScript file assigned to the "main" property.

Next, right-click on the /app folder again and add a main.js file. Copy the following code into it:

var app = require('app');

var BrowserWindow = require('browser-window');



var mainWindow = null;



app.on('window-all-closed', function() {

 if (process.platform != 'darwin')

 app.quit();

});



app.on('ready', function() { 

 mainWindow = new BrowserWindow({width: 800, height: 600}); 

 mainWindow.loadUrl('file://' + __dirname + '/index.html'); 

 mainWindow.on('closed', function() {

 mainWindow = null;

 }); 

});

The loadUrl method can be modified to load from a file other than index.html. It will even load webpages if you want. I was able to load my blog into it :).

Finally, right-click on the /app folder a third time and add a index.html file. Copy the following code into it:

<!DOCTYPE html>

<html>

 <head>

 <title>Hello World!</title>

 </head>

 <body>

 I learned about Electron in Visual Studio Code<br />

 from <a href="http://www.mylifeforthecode.com">My Life For The Code</a>.

 </body>

</html>

From index.html you can create an html app as normal. Visit the Electron documentation to learn about the additional capabilities of the shell. Your VS Code instance should look something like this:

Configure VS Code To Run Your App

UPDATE: you can read through below if you like, but I find a better method for launching and debugging Electron in Visual Studio Code and wrote about it in A Better Way to Launch Electron From Visual Studio Code.

Press Ctrl+Shift+B, you should get a message stating that there is no task runner configured with a Configure Task Runner button.

Click the Configure Task Runner button. This will create a .settings folder containing tasks.json and will open tasks.json in the editor. Comment out the default task runner that calls the TypeScript compiler, and add the following json:

{

 "version": "0.1.0",

 "command": "node_modules\electron-prebuilt\dist\electron.exe",

 "args": ["app"]

}

Now, save the file and press Ctrl+Shift+B again, and Electron should launch with your new app!

Setting Up The Debugger

To set up the debugger, click on the debugger icon, followed by the settings/config icon (pointed to by the red arrow in the picture below).

This is open launch.json. Remove or comment out the launch app.js configuration as this does not work with Electron at this time.

Next, open the .settings/tasks.json file that is used to run your app. Modify the "args" property to include "--debug=5858" like so:

 "args": ["--debug=5858", "app"]

This will configure Electron to run with debugging enabled. You now have everything you need to debug your Electron app in VS Code. To test this, set a break point in your main.js to catch when the application closes like so:

Now press F5 to launch the attach process and Ctrl+Shift+B to run your app. After it is launched the debugger should successfully attach to Electron and you have a debugger! Close your app to test the break point. You should get something like this:

The credit on how to do the debugging goes to the author of this blog post: http://floatincode.net/post/debugging-electron-application-with-visual-studio-code. I just adapted his tutorial to this one.

In Closing

This should be enough to get you started. I am starting work on a small project that I am currently planning to host in Electron and develop in VS Code. As I learn more about these tools I'll make sure to share anything I think might help someone else trying to do similar work. So check back sometime in the future! :-)