Visual Studio Code

Toolchain Productivity

alt text

I’ve had the opportunity to play with a wide variety of tools over the years. At the time when I developed my game TacWars in C++ using XCode, Apple's Integrated Development Environment (IDE) wasn't the bloated piece of software it is now.

Then, projects rather quickly lost the native touch to be web-based. Web apps were the thing and Apple's XHog simply didn’t cut it anymore. If you factored in the added frustration that came with every new release of XCode and the effort it took to get used to the ever changing user (so called friendlier) interface... you’d have to find something else to work with.

Having been schooled in Unix environments and believing in the power of the keyboard over the mouse, I decided that a solid development-oriented Editor would do just fine.

Enter Visual Studio Code. Cross-platform, fast, and lighter than XCode, it came as a surprise to me to discover the Microsoft origins of the beast. To me, the MS brand always evoked thoughts of shaky bug-ridden software. Who would ever care to fondly recall those buggy Windows 95 features!

Having always hated anything Microsoft with a zealot's fervour, it was a shocker for me to discover this great, fast and modular editor. It features syntax highlighting, intelligent code completion, git integration and we’re just scratching the surface here. With the manna of plugins developed by the (huge) community, the sky’s the limit. The cherry on the cake? It's free (under MIT license)! Is this really a Microsoft creation? One (still) wonders.

I've tried others since like Atom but I keep coming back to VSC. It's just that good.


Given a specific need, the real beauty about VSC has to be how close to a perfect fit it can be tailored to.

I created my own dark theme based on the original[ Monokai]( monokai). I am not a fan of the Dracula theme or any palette that makes my code look like a carnival celebration in Rio de Janeiro. I just love the fact that I can do so without a sweat.

Let me share my personal favourite plugins. These are the ones I’ve learned to appreciate and are now part of my toolchain. The ones that are a must-reinstall whenever I change to a new/ different Mac.

PHP Intelephense

It's just like IntelliSense (Capital I, capital S... like a David Cronenberg movie), it does the same job, only better.

PHP Intelephense can also auto-suggest relevant methods while typing. The problem is that the suggestions are polluted by the default PHP suggestions. Fortunately, one tweak is all you need to make it work as needed. In your settings.json add

"php.suggest.basic": false,

The plugin's id is bmewburn.vscode-intelephense-client

PHP CS Fixer

If you work in a team, code-styling can become a frustrating subject. Even with simple solid guidelines, there's always someone who will make an opinionated stand on spacing between operators or the right position for curly brackets. In the spirit of burying the hatchet, automatic styling with a shared configuration closes the case. This plugin does just that.

Get together with the team over a cuppa and go through the options. Decide if you want to enforce the use of single quotes over double quotes or even Yoda-styled conditions and commit the .php-cs.php file to your project repository and simply let it work for you - junstyle.php-cs-fixer

PHP Debug

alt text

How I was able to work without this for almost a year remains a mystery. All it took was one video call with my colleague Riccardo (a PHP Storm cultist) and a little demo of the power of Xdebug.

All at once, PHP had a new flavour. It brought back memories of XCode and C++11. Debugging became a joy again - xdebug.php-debug

Gitlens Supercharged

This is a must-have for teamwork ! As they detail in the plugin description, the possibility to quickly glimpse into whom, why and when a line or code block was changed is a game-changer. When performing a code review, the initial WDF? and the question thrown to the relevant developer on Discord all happens in a matter of seconds - eamodio.gitlens

TODO Highlight

This is a blast. It's tiny, stupidly simple in what it does but it makes your life so much better. How lovely is it to drop some coloured tags in the code (TODO, FIXME, WDF?) as though they were a couple of post-it notes. When doing some peer programming or even code review, tags become so many markers for things to improve or not forget. The ultimate goal of course is to clear every project delivered of any remaining tags.

Having said this, the reality of incremental development usually sees a lot of TODO remaining at the end of the project -wayou.vscode-todo-highlight

Indent Rainbow

alt text

So you've normalised your indents to 2 spaces and are pretty happy about it. Then suddenly you find yourself editing an indentation-rich source code (HTML, json, yaml). This little guy becomes your life-saver. It does exactly what its name suggests: coloured indentations. This provides you with a quick visual helper for matching block statements. Bonus for the budding Dali: Yes, you can even choose your own colours - oderwat.indent-rainbow

It's great, to make it absolutely awesome, simply add these two lines to your settings.json

 "editor.bracketPairColorization.enabled": true,

More plugins

I've used a load of plugins. Most of them represent straightforward candidates for specific languages or frameworks.

This is a short list of the ones I have currently plugged into my VSC:

alt text

  • DotEnv - mikestead.dotenv

  • HashiCorp Terraform - hashicorp.terraform

  • HTML-CSS Support - ecmel.vscode-html-css

  • NGINX Configuration - william-voyek.vscode-nginx

  • Phoenix Framework - phoenixframework.phoenix and vscode-elixir- mjmcloug.vscode-elixir

  • Docker - ms-azuretools.vscode-docker

  • Solar2d-companion - M4adan.solar2d-companion

  • Python - ms-python.python and Pylance - ms-python.vscode-pylance

  • Flutter - Dart-Code.flutter