Visual Studio Code: the editor I didn’t think I needed

It’s the small things that make a difference.

Visual Studio Code combines the ease of use of a classic lightweight text editor with more powerful IDE-type features with very minimal configuration, it “just works”.

I’ve done a lot of PHP, JavaScript and all-round development (HTML, CSS, React, Python, Ruby) over the past couple of years. As a developer, your code editor is one of the most important parts of your setup. It can save your wrists and fingers from repetitive strain injuries. It can save your eyes from going blind after a coding marathon.

As web developers do, I started off on Sublime… at a time when there wasn’t much competition in the code editor space. When Atom became more mature I switched to that. In Atom, I quickly started using Nuclide to help with React and PHP development. I also dabbled with using very barebones VIM setups. For a brief period I tried Eclipse and IntelliJ but I was so used to the Atom/Sublime keybindings that they didn’t feel as nice to use. That’s the short version of my quest to pick my ideal tool for the job of writing code. As developers, we sometimes like to take the long route. I mean, it’s just an editor at the end of the day right?

My latest code editor tinkering adventure (or lack thereof) has been with Visual Studio Code.

My latest code editor tinkering adventure (or lack thereof) has been with Visual Studio Code and I recommend it. It brings IDE-like features that I didn’t know I wanted, with the straightforwardness of a classic lightweight code editor and some features I thought I may want but never got round to adding to Atom.

It’s cross-platform, free and open-source, download it here:

Visual Studio Code - Code Editing. Redefined_Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…_code.visualstudio.com

Working out of the box: the small things that make a difference

A well-thought GUI

VSCode leverages the GUI in a way I never felt Atom or Sublime did, it starts with a prominent side-bar:

VSCode Sidebar

The items in this bar are respectively:

Explorer (file-tree)
Search
Git
Debug
Extensions

From this menu you can search and find extensions that do what you need. I never used extension search in Atom, but because this is so prominent, I’ve installed a few extensions from the menu.

This is a recurring theme with VSCode. Features that you want to use seem to always be visible when you need them. This means that you don’t have to know the keyboard shortcuts to be a power-user.

Powerful defaults

As someone who writes a lot of JavaScript these days, the fact that VSCode ships with IntelliSense for ‘JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass out of the box’ was a nice touch. In Atom I didn’t actually use a code-hinting plugin, so VSCode felt quite verbose but at the same time this is something I didn’t even know I missed. It informs you which parts of your code are invalid according to the set of extensions you have installed. This means you realise quite quickly that it doesn’t understand ES6 when every const in your code gets flagged as an error.

Highly discoverable extensions

When you realise you need an ES6 plugin, it actually suggests you an extension depending on your current workspace, for example for the ES5/ES6 issue it suggested I install the ‘Babel ES6/ES7’ extension. This is a lot nicer than having to hunt around the internet to figure out what to install.

VSCode has very little fragmentation in its ecosystem. This is probably because it’s newer. You usually only find 1 package to do a certain job (like ES6 highlighting and hinting), which is great.

The things I never knew I needed

Easy split-screen

I never remember the shortcut for split-screen. So it’s helpful that VSCode has an icon to toggle this in the top right of the open documents tab-bar. I find that I use this when writing tests, it means I can have my application code and my tests open at the same time. This also helps when porting code from one framework (or language) to another.

I never realised that I wanted to do this. Remembering a keyboard shortcut for something that I only use a couple times per hour maximum isn’t useful but having that feature available could save me a lot of moving back and forth through tabs. This means less context switches, better focus which leads to higher productivity.

Git diff view

I don’t use a git GUI, that’s generally not a big issue for me. Most of the git commands (pull, commit, add, status, rebase) are fine to use in the terminal. What’s not so nice to use is git diff. Thanks to VSCode diff view, I find that I write better commit messages as a result of seeing the full code diff for each file instead of running a git diff and then trying to remember what was in the diff when using git commit.

Click-through on package imports

I never bothered to set up click-through on Atom. I find that I don’t want to use click-through often, but when I do, being able to do it without having to re-type the filename is great.

Built-in terminal/debugger

I split-screen iTerm with Atom. It turns out that I didn’t use iTerm all that much. With VSCode you’re always just a cmd + ` or ctrl + ` away from a terminal instance.

IntelliSense

Being able to view typed function definitions is extremely useful. Before, whenever I was a bit rusty I would have to look up a function like array_push (in PHP) in the API documentation to figure out what order to pass the arguments in. Now I can now keep focused on the task I’m trying to complete since VSCode tells me what to pass it as I type.

You can also inspect references to your own variables and imports by holding cmd or ctrl on an instance of said variable/import in your code.

All these features have something in common: they’re part of the development workflow without being used all the time. They’re nice to have and help your productivity when you do use them.

A few plugins

VSCode is very useable out of the box, but it’s quite customisable and extendable. These are a few extensions that I currently have installed.

I use a VSCode Atom keymap: https://github.com/waderyan/vscode-atom-keybindings.

Auto Close Tag in Sublime 3 mode. This allows you to type </ and autocomplete the matching tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag.

EditorConfig for VSCode, to enforce number of spaces per tab or trim that trailing whitespace: https://github.com/editorconfig/editorconfig-vscode.

PHP IntelliSense (this is just an example of a language-specific IntelliSense extension): https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense.

Babel ES6/ES7 for colouring modern JavaScript code: https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring.

Conclusion

It’s cross-platform, free and open-source. It brings back features that get average use in a well-packaged, well-thought format.

Give VSCode a try, even if you’re a die-hard Atom or Sublime fan. It might surprise you. It’s low-maintenance, just works and brings some cool features that you might like to use.

Remember to give this post some 💚 if you liked it. Follow me Hugo Di Francesco or @hugo__df for more webdev content :).