…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:
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.
- GitLens — Like a lot of developers, I try to use git via the command line wherever possible, but for some tasks, it’s handy to fallback on a UI based tool. VS Code has limited/basic git support out of the box, but GitLens supercharges this by adding loads of functionality. Everything from file history, commit history, stashing, branch creations etc. I have since completely ditched a dedicated git tool like SourceTree and just use VS Code with GitLens.
- Bracket Pair Colorizer 2 — Ever been 57 nested layers deep in your code and you can’t figure out which opening and closing parenthesis or curly brace belong to which? Of course you have! Bracket Pair Colorizer 2 solves this with a pretty simple solution…it makes each pair of parenthesis / curly braces a different colour to make it easier to identify. This is maybe my favourite extension!
- Sort lines — Allows you to highlight blocks of text/code and for the lines based on a multitude of categories (alphabetical, case sensitive, ascending vs descending, reverse, line length etc.).
- IntelliSense for CSS class names in HTML — When editing HTML files, this extension parses CSS/SCSS files in your workspace and auto-complete CSS class names as you type. Works with React too!
// settings.json code snippet:
// Tells the extension to search css, html & scss files for classnames
- Todo Tree — I’m forever adding
//TODO: Fix this annoying errortype 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…
- 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)
- Active File In StatusBar — Super simple plugin that simply shows the full path of the file you are currently viewing/editing. This is really useful in projects that contain multiple files with the same filename (e.g. index.js)
Active File In StatusBar
- 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
- 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
- npm — Allows you to easily run npm scripts (start, test, lint, build etc.) at the click of a button. Also detects mismatches between which packages is listed in your package.json and what is actually installed
- React Native Tools — I have worked on a number of React Native applications and this extension has proved invaluable. Essentially it provides the same functionality as the Debugger for Chrome extension, but specifically targeted at React Native applications
- vscode-icons — Provides a rich set of icons for nearly every possible filetype
- Auto-Open Markdown Preview — Auto open Markdown preview window when editing markdown files allowing you to easily see your markdown changes as you edit them in realtime
- AWS Toolkit for Visual Studio Code — As mentioned earlier in the article, I use AWS a lot on a daily basis and I’m constantly opening the AWS console in my browser to check my CloudFormation stack status, or to test Lambdas. This extension allows you to view the status of your CFT stacks, execute Lambdas using test events and much more, all within the VS Code editor
- vscode-cfn-lint — Uses cfn-lint to parse and show issues with CloudFormation templates
- cloudformation-yaml-validator — Detects reference errors in CloudFormation YAML files
- Jira and Bitbucket (Official) — I use Bitbucket and JIRA extensively in work, and multiple times a day I found myself navigating to the JIRA and Bitbucket web applications to update a JIRA Issue and to create/approve/merge a PR in Bitbucket. This extension brings the ability to create/edit/review/merge JIRA Issues & Bitbucket PRs right from within VS Code
- AWS Amplify API — AWS Amplify is a fantastic platform from AWS that acts as a wrapper / layer on top of a number of their most commonly used services (Cognito Authentication, Lamba, API Gateway, S3, Storage, DynamoDB, Analytics etc.). This extension provides code snippets and completion for the AWS Amplify API
- GitLab Workflow — While I use Bitbucket and JIRA my for day job, I use GitLab for all of my personal projects (for hosting repos, tracking issues, build pipelines etc.). This extension allows you to create/edit/close issues and merge requests, and manage your build pipelines all from within VS Code
- TSLint — Pretty similar to the ESLint plugin, but focusing specifically on TypeScript support/linting
General Language Support:
- HTML Snippets — Shortcuts/code snippets for common HTML elements
- ES7 React/Redux/GraphQLReact-Native snippets — Shortcuts/code snippets for common React patterns like creating new components, imports, creating actions etc.
- CloudFormation — Shortcuts/code snippets for common CloudFormation elements
// 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"]
- Go — Go is a language which is increasing in popularity and I am only beginning to experiment with it. This extension adds Go language support to VS Code
- Kotlin Language — Kotlin is another language which is increasing in popularity, particularly once Google announced official support for Kotlin as an Android development language. I spent a lot of time working in Kotlin on an Android app, and whilst Android Studio was my IDE of choice for that project, having Kotlin support in VS Code made quick/simple updates or reading Kotlin code easy without the need to fire up Android Studio every time
- Language Support for Java(TM) by Red Hat — I don’t do a lot of Java development these days, but this extension provides a huge amount of functionality to VS Code for Java development. Everything for syntax highlighting, Maven support, Gradle support, code formatting, Java code snippets etc.
- Python — Python is a pretty ubiquitous language that is used everywhere and this extension provides pretty robust Python support to VS Code including features such as such as auto-complete, linting, debugging, code formatting, refactoring, code snippets, and more!
- Swift Language — Whilst I still use Xcode for all of my Swift development, this extension provides Swift support to VS Code which makes quick/simple updates or reading Swift code easy without the need to fire up Xcode every time
- YAML — YAML Language Support for VS Code including auto-completion, code formatting and syntax validation
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!!!