Visual Studio Code (VSCode) is by far my favourite editor. I've got nothing against Sublime or Atom, but the first one is not free and the second one tends to get a bit slow. I use all 3, in case you think of accusing me of favouritism, but my Go-To editor is VSCode. One of its biggest strengths is obviously the debugging experience.
This week I decided to start rewriting my password application (PasswordDefence) with Electron. This will mean that once finalized, I will have a mobile and desktop presence and it also gives me a good opportunity to play around with a couple of new frameworks.
What is Electron?
Electron (formerly known as Atom) is a framework that runs on top of node.js and allows you to create beautiful desktop applications using web technologies. The HTML, CSS and JavaScript that you got to love over the years, can now be used to write some really solid and robust desktop application for the Mac and Windows ecosystems. GitHub and Slack are both apps written with Electron. On top of that, you can use Flux, React etc to enhance your application and get to your "destination" faster.
Environment Setup
To work with Electron, you need to install it. Fire up a node command prompt and type the following:
# Install the `electron` command globally in your $PATH
npm install electron-prebuilt -g
# Install as a development dependency
# navigate to your project folder first
npm install electron-prebuilt --save-dev
With the binaries installed, we can start coding. I initially wrote my code in Atom. Atom works fine and doesn't require any special setup. You do, however, have to use the the node console to launch the application by navigating to your app directory and typing electron .
Setup VSCode to work with Electron
Open your application folder in VSCode. Press Ctrl+Shift+B to build the project. This will prompt you to setup a tasks.json, which in effect tells VSCode what to do when you issue this command. Comment all the tasks out and add the following settings:
The next time you issue a Ctrl+Shift+B command, you should get a nice build and have your application launched.
Debugging Electron with VSCode
VSCode takes the development experience one step further by allowing you to debug your code. Go to the debugger window and click on settings. This will prompt you to create a launch.json. Accept it and open the file. Paste the following settings in it:
Make sure you point to the right entry JavaScript file for your application, if it's different than mine.
These 2 settings should be enough to get you started. After that, it's all fun working with the same tools and frameworks you already know to create really cool applications. Let me know in the comments if you have any problems with this setup.