I promised myself IDE do a better job of using VS Code

…ok so Microsoft Visual Studio Code isn’t technically an IDE in the strict sense, but it was the best pun I could come up with for this blog post.

(it also happens to be my first Medium post, so go easy on me in the comments)

Last year I made myself a resolution to make better use of my IDE / Code Editor and get the most out of the various features and plugins available — and for me, the code editor of choice is Microsoft’s Visual Studio Code (usually referred to as just “VS Code”).

For anyone unfamiliar with VS Code, it is everything a code editor should be. Historically it has been on-form to mock Microsoft’s bloated, closed source, enterprise-esque software — but that was the Microsoft of old.

VS Code is arguably the most popular Code Editor right now and is fully open source. It is Electron-based, and best of all…fully customisable due to a huge catalog of freely available community plugins (known as “Extensions”).

I have been using VS Code as my daily driver for a year or two now and even using it out-of-the-box with no customisations or extensions provides a really great developer experience.

However it’s only in the last few months that I have really experienced the full capabilities of VS Code and how a few extensions can really transform VS Code from a great code editor into a truly powerful code editor.

VS Code has always been pretty good at proactively suggesting extensions every time you open a file type that it has a matching extension for — but I always dismissed this popup with an internal monologue of:

“yeah some day I really must spend some time exploring some of these extensions”

I was regularly getting questions from team members in work about VS Code (probably because I spent a lot of time talking about it) and ended up doing a quick post on our internal Slack workspace about my most used extensions. This Slack post drove even more discussion and existing team members started pointing new team members at the Slack post as a helpful guide for getting a good code editor setup. This ended up being the inspiration for this blog post and hopefully if you are reading this, it proves helpful for you too.

For some background, my daily development work involves the following languages/toolkits/technologies:

  • Javascript

However I regularly dabble / experiment in quite a few other areas and that is reflected in the extensions listed below.

I’m still discovering more about VS Code on a daily basis, and will update this article regularly, but below is a list of the VS Code extensions that I use, and how/why I use them:
(Where appropriate, I’ve also included a snippet from my settings.json file which shows how I have configured the extension)

Best of the best

If I had to pick my absolute game-changing best extensions for VS Code…it would be these…

  • Visual Studio IntelliCode — AI / Machine Learning Assisted Auto Complete in your code….VERY cool. I don’t even begin to understand how this works, I just know that it does…and it works well! This is an official extension from Microsoft and their synopsis states that the auto-complete insights are based ‘on understanding your code context combined with machine learning’. It works how you expect…it autocompletes your methods, parameters, class names etc. but in a much more complete and accurate way than any other auto-complete functionality I have used before.
  • ESLint — ESLint is too big a topic to cover in this list but for those unfamiliar, ESLint is the de facto Lint (static code analysis) tool for Javascript. Used to catch/correct many common Javascript errors / antipaterns. Highly congifurable (via a .eslintrc file). ESLint can be run manually via the command line, but this extension integrates real-time lint checking into the code editor so issues are flagged as they happen and are easily identifiable.
// settings.json code snippet:
// Tells the extension to search css, html & scss files for classnames
"html-css-class-completion.includeGlobPattern": "**/*.{css,html,scss}"
  • Todo Tree — I’m forever adding //TODO: Fix this annoying error type comments into my code. It's also very rare that I actually go back and fix those TODOs. This extension gives you an easy view all of your outstanding TODOs right in the VS Code sidebar. Since installing this, it's made me a lot better at going back and fixing these long-standing TODOs that i previously never seemed to get round to.

Best of the rest / noteworthy mentions

Pretty much every one of the extensions below is currently installed on my VS Code installation (both at home and in work) and have made my daily coding experience better in some way or another…

Misc Utils:

  • Live Share — As a team, we don’t follow a full 9–5 pair programming regime, but we do pair program pretty regularly when the need arises. I also work from home pretty regularly and that is where this extension has proved particularly useful. This allows you to share your VS Code workspace remotely via a URL and allow one or more others to remotely view, follow along, and also edit your code in real time. This combined with a Slack call makes pair programming a much better experience than it has been in the past. It also has a feature which I haven’t used properly used where you can remotely share a local server (i.e. you run npm run start to launch your app on localhost, and the person you are sharing with can hit the same local server)
  • Project Manager — I have quite a few different projects / repos that I work across and it had become quite laborious switching between them. For a while I tried add all of my projects to one workspace, but that presented it’s own problems. This extension allows you to easily switch between projects right from the sidebar. You can configure your list of projects manually, but I have it configured to auto-detect any git projects and auto add them to the Project Manager view
// settings.json code snippet:
// Tells the extension where to look to find git repos
"projectManager.git.baseFolders": ["$home/Development/Workspaces"]
  • Debugger for Chrome — A great extension which allows you to debug your web application that is currently open in Chrome, directly from VS Code without using Chrome’s Dev Tools. Allows you to step through code, breakpoints etc., all within VS Code

General Language Support:

// settings.json code snippet:
// Adds support for CloudFormation intrinsic functions to the extension
"yaml.customTags": ["!Equals sequence", "!FindInMap sequence", "!GetAtt", "!GetAZs", "!ImportValue", "!Join sequence", "!Ref", "!Select sequence", "!Split sequence", "!Sub", "!And", "!And sequence", "!If", "!If sequence", "!Not", "!Not sequence", "!Equals", "!Or", "!Or sequence", "!FindInMap", "!Base64", "!Join", "!Cidr", "!Sub sequence", "!ImportValue sequence", "!Select", "!Split"]
  • Flow Language Support — Flow is a static type checker for Javascript and is usually viewed as an alternative to TypeScript. Whilst TypeScript is arguably more popular, Flow has the benefit of being created by Facebook, the same people behind React and Jest, and as a result, integrates very well with them. This extension adds Flow support to VS Code

So that’s it! My comprehensive list of VS Code extensions. As previously mentioned, I will continue to add to / update this article as I discover more useful extensions.

Always curious to hear in the comments below about the extensions you folks are using and if this article has been helpful. Hopefully you feel a little better equipped next time you fire up your code editor, and if you haven’t tried VS Code yet…definitely give it a try. Happy coding!!!