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”.
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:
VSCode leverages the GUI in a way I never felt Atom or Sublime did, it starts with a prominent side-bar:
The items in this bar are respectively:
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.
const in your code gets flagged as an error.
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.
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.
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
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.
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.
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
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.
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.
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.