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?
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
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:
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.