Martin Willitts

# Switching from Atom to VSCode

I've used IDEs for years including Eclipse, vi, IntelliJ, NetBeans, VisualC++ etc. Currently I use Atom which seemed cleaner and less cluttered than Eclipse but I've muddied that with the addition of various plugins.

Beyond text editing the main features I use:

  • Code folding
  • Built-in folder view for finding and manipulating files
  • Prettifying JSON
  • Code colouring

I use SourceTree for git management of the files, occasionally resorting to the command line plus the Bitbucket web app for Pull Requests.

For debugging I use console.log or print depending on the language in use plus the breakpoint support in Chrome and ad-hoc SQL queries via DBeaver. That has been surprisingly sufficient almost all the time. I've used more sophisticated debugging like counter-based breakpoints in C++ IDEs in the past and, on a few occasions, dipped into debug support with Node but rarely needed it. Also, I've used tools in the past that made it easy to jump to definitions of methods directly from where they are called which would be more efficient than searching; it's hardly ever taken long enough to warrant even looking for an Atom plug-in to support this in the language I'm using at the time though.

The list of features that could be useful directly in the IDE is extended then to include:

  • Bitbucket integration for managing pull requests
  • Node-based breakpoint debugging
  • Direct link to method definition from where it's called

First step, install VSCode. That was as simple as you would expect. Next, load a 'project'. That's simple too, just open up the folder in VSCode as in Atom. I can see the folder list on the left with hierarchical view and I can click on a specific file to edit it. It even does the same thing as Atom of replacing the current file when I click a different one unless I double click on the file title if I want to 'pin' it. There's code folding clearly there and easy to use too.

I see code colouring for javascript files but not my vue files. The IDE is suggesting an extension to add though. Oooh, I've just seen the mini-map of the file on the right-hand side which is very handy. Yes, the extension suggested works and colours the vue file now.

Right-clicking on a function call in a vue file gives me the option to go to definition. This takes me there, opening up the file holding the function. It doesn't work for going to a reference Vue component but there's possibly another extension for that if it becomes an issue (or piques my interest enough at some point).

Loading up a Python project I see I'm offered an extension automatically and a wizard for picking a Python interpreter for some other features. That's convenient. It suggests a Python linter too. Perhaps that project should have linting but I'll leave it for now - that would open up a can of worms or at least a load of text editing potentially and re-testing; something for another day.

Go to definition works for a class reference and for a function call.

One feature I often used in Atom is selecting a number of lines and indenting or outdenting in one go. Sure enough VSCode offers this as well and with the same keys as in Atom.

On one project there is data stored in a database column in JSON format. I copy and paste that data into the IDE editor to prettify it. VSCode makes that easy too. It wasn't immediately obvious but simple once I spotted how. After setting format to JSON as in Atom, I looked for a prettify option. In VSCode it's right click in the file and choose 'Format document'.

That's all my usual Atom activity covered. Extras like the mini-map are handy and the code definition jump are convenient. I expect Atom has plugins for that but these are in there already so I might as well switch to VSCode now.

Now looking at the source code control aspect. This came to my attention in VSCode by the badge on the network-like symbol indicating the number of files ready to commit. Clicking on that symbol lists the files affected. I see the input box for a commit message. This should streamline committing updates. It took a moment to see how to switch branch. That's done by looking at the bottom left of the window where the current branch is show. Clicking on that label shows a dialog through which to carry out branch level actions.

Still in the source code control view, clicking on a file that's been changed shows the differences. This is the settings.json file in .vscode though so I need to add .vscode to the .gitignore file. I can right click on the .vscode folder in the source code control list and choose 'Add to .gitignore'. That adds the settings.json file though. I expected the settings.json file to be removed from the list of changed files but it wasn't. It isn't in Sourcetree either though. Ah, it's because there was a .vscode folder in the repository already.

I see 'NPM scripts' in the Explorer view where the folders and files are shown. Interesting, there's a 'run' option so I've clicked on that. This is for a sub-directory or sub-repository for the backend code. It's now running from within VSCode. Stopping it and right-clicking on the npm script shows a 'Debug' option but that gives an error message about not being to read a property 'match'. I added an npm script for debug roughly like "node --inspect=0.0.0.0:9929 ./node_modules/..." and right-clicked on that to run it. This worked and I was in debug mode, able to set a breakpoint and step through the javascript. Excellent, this will be useful.

The last item I identified that I would be interested in currently was Bitbucket PR integration. Sure enough, there's an extension from Atlassian for Jira and Bitbucket integration. Installing that adds an Atlassian icon on the left hand side. I do like it when I'm surprised with something extra - the integration with Jira is very convenient since that's another tool I use and I was only looking for Bitbucket integration at this point! After jumping through the security hoops I now see Jira issues assigned to me right there in VSCode. That's convenient. More security checks but now I can see Bitbucket pull requests and a button create a new pull request. All in VSCode. That's everything I had identified I needed and more!

That's me converted from Atom to VSCode. For now at least.