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, 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. JavaScript As web developers do, I started off on … at a time when there wasn’t much competition in the code editor space. When became more mature I switched to that. In Atom, I quickly started using 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? Sublime Atom Nuclide 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 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. Visual Studio Code It’s cross-platform, free and open-source, download it here: _Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…_code.visualstudio.com Visual Studio Code - Code Editing. Redefined 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 in your code gets flagged as an error. const 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 . 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 and then trying to remember what was in the diff when using . git diff git diff 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 or away from a terminal instance. cmd + ` ctrl + ` 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 (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. array_push You can also inspect references to your own variables and imports by holding or on an instance of said variable/import in your code. cmd ctrl 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 :). Recent posts: _Amazon Web Services is one of the leading hosting providers, here’s why._medium.com 7 reasons you should be hosted on AWS _The tools we wield define us, git is the one tool all developers use_hackernoon.com Learn git even if you don’t code _tl;dr: use Array.filter(Boolean) to filter out falsy values and avoid errors._codeburst.io Avoiding falsy values in JavaScript arrays

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Hugo Di Francesco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Hugo Di Francesco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES