Visual Studio Code is a great cross-platform code editor for pretty much all languages. One of the most important features without a doubt are extensions and this is where it really comes into its own. There is a huge marketplace of extensions (all free), some from the community and many from official suppliers.

Here is our breakdown of our top 10 plugins we couldn’t do without:

#1 Dev Containers

Our top extension is Visual Studio Dev Containers which is provided from Microsoft. It allows you to add dockerised dev containers which means you can develop in an independent environment with any prerequisites you like. There is a large selection of built in dev containers to choose from covering all the popular languages and setups out there.

Using a docker container also means it is easier for other developers to have the same setup as you. For example, there is no need to install Python, a specific linter, Anaconda, PostgreSQL separately on your own machine. With a dev container you can simplify specify all these then run. When you pass your container over to another developer then they will have everything ready to go.

There is a prerequisite that you will need docker running on your machine to use this extension. The good news is you can grab docker desktop for free (for personal use) and there are other versions out there too.

Once you have docker running and the extension installed you are ready to go. We love this extension so much we have created a tutorial on getting docker setup and also a guide on how to get started with dev containers!

#2 Add to GIT Ignore

If you use source control (if not, why not) then you have likely come across Git. It is one of, if not the most supported version control systems out there. It allows you to upload your source code to a remote repository and offers versioning, roll-back, branching. There are numerous providers of Git such has GitHub, Bitbucket, Azure DevOps repos.

Git has a feature called GIT ignore. Put simply it allows you to exclude files and folders on your local machine to being committed and pushed. A good use of this is to exclude files generated by your IDE or local config files. These are needed for your local development but you don’t want to share them with all the other developers.

A Git ignore file is created by using the named “.gitignore” and this is universally recognised by Git. You normally have a couple of options when it comes to using a GIT ignore file. You can either download a template off the internet (for example a nice collection can be found here). The other option is to manually edit your file in the correct syntax by hand. Of course, you can do a bit of both but then if you are anything like us you then have to start remembering how to exclude all the files in a folder with a specific extension for example, when you are in the middle of development it can be a bit of a distraction.

If only there was a simple way of doing this, say a right click menu on a file which lets you select what to add to GIT ignore and how? Yep, add to GIT ignore does exactly that! We have found it is one of those extensions though basic in nature just make things easier.

#3 JSON

Yes, that is the full extension name and therefore I’m guessing you can work out what it is for. The JSON extension adds a couple of important features which don’t come out of the box with Visual Studio Code.

The first is auto-complete, the easiest way to reduce your formatting error is to let the editor help out. The auto-complete will add brackets and quotes, it will also highlight when you have done something wrong. A good example of this is when you add some text without being wrapped in quotes.

The second feature is beautifying which is a term meaning to make your code (json in this case) more readable. You can paste in a long single text line of json and it will convert it to a nice multi-line indented version which you can actually read. This is very useful when coping json from a log file, we have found. You will also get colour highlighting to allow you to easily trace where the brackets are and what sits within them which is useful when editing larger files.

So, if you use JSON files for any of your development, we recommend making your life easier and grabbing this extension.

#4 Markdown Editor

If you have done any development, you have most likely come across markdown at some point. You may not have realised it at the time but lots of dev documentation used markdown. Markdown is essentially a markup language created to allow you to use plain text to apply formatting to a document.

One example of the use of markdown is on GitHub. If you head on over to our Code Challenges repo you can see a basic example. Below the list of files and folders you will see the README.md (.md standing for markdown). From the view in the browser it looks like a nicely formatted piece of rich text but it is being generated using markdown. Here is the actual text file which is used to generate the pretty view. You will see for example a # is used to represent a heading tag a – is used to created a bulleted list and so on.

Some developers enjoy creating markdown documentation and I am sure are use to a whole collection of formatting knowledge. For us at code monkey club we prefer to spend time developing and writing content for you to read rather than remembering markdown syntax (or to be honest doing anything else).

The Markdown all in one extension makes it simple. It provides a nice rich text editor within Visual Studio code which generated the markdown for you. It is very much like using a very basic version of Microsoft Word or anyone who has ever use WordPad on Windows (I guess someone must, right?) then you will be right at home.

So do yourself a favour and save yourself some time, go grab the plugin.

#5 Rainbow CSV

So, you have downloaded a csv file and now need to look at it as low and behold someone isn’t so sure about a date format. At some time in your development life most people hit something similar. Wouldn’t it be easy if we all had the same date format (don’t get me started on this one) but we don’t. You might be dd/mm/yy or mm/dd/yy, maybe even yyyy-mm-dd.

Now you can decide to open that csv file in Microsoft Excel as then it will be nice and easy to read, right? Well yes and no. Microsoft Excel tends to try and be clever even when loading a csv file and may start adding formatting and guessing types.

So then, we could open it in Visual Studio Code? Yep, that’ll allow you to see an unformatted and untouched version. Let’s say you have 30 columns of data, and you need to look at row 5, the 15th column. You can get that finger pointing at the screen and start counting commas, “oh wait did I miss one”, “oh no that’s not the right row”. Yes, it was driving us all crazy.

So, we found the Rainbow CSV extension and found it was a life saver in this situation. It adds colour to your csv output (colours of the rainbow hence the name) for each column. Now this might sound basic but if you know you need to look for the red column on row 5 you no longer need to play the counting game and can find it so much faster.

So, if you end up in the scenario above, please do yourself a favour and download this extension. It’ll save you time and probably your sanity.

#6 REST Client

You have created an awesome API and have deployed it to your dev environment. So now it is time to test? Maybe you are using a 3^rd party API and need to try it out to see what responses you get back? Then look know further the REST client extension is here!

Simply put you can send GET, POST and other verbs straight from Visual Studio Code to your url endpoint. This means you don’t need to go and download any other tooling. It also has other features such as image display responses, GraphQL editor support, variable substitution, authentication support and much more.

#7 SQL Tools

Simply put the SQL tools extension allows you to connect to many different types of popular database formats using the same extension. If you have (or can download) the driver you need you can supply either the connection details or connection string.

It provides a nice view of the tables, views and other database objects in a handy browser as well as letting you execute SQL commands against databases.

#8 XML Tools

XML tools works in pretty much the same way as the JSON extension we mentioned earlier but for… XML. If you are surprised by that one then it is time to take a break! Wait though, that isn’t all…

As well as nice formatting it also provides XPath evaluation. If you haven’t had to use this before then think yourself lucky, it is comparable to using regular expressions. So if you want to check it is going to work instead of stabbing around in the dark this can be very useful.

There is also support for XQuery from formatting, linting and execution.

#9 Image To Base64 clipboard

So, some of you might be wondering why on earth would you need to take an image and covert it to base 64? Until I started working with structurizr I use to think the same but yes, it is used by some applications.

As an alternative to storing your image in a file format such as png some applications want your image as a long base 64 encoded string, or at least offer it as an option. The easiest way we have come across so far is to use this handy Visual Studio Code extension. It pretty much does exactly as it says, you install the extension, give it an image file and it pops the base64 encoded string on your clipboard, ready to paste into your waiting code editor.

Again, another simple extension to use but one which can save you plenty of time trying to work out how to do it yourself or start uploading your images to the internet.

#10 vscode-base64

Like the image to base64 extension earlier there will likely be a time where you need to base64 encode a text string. This might be you have credentials, and you need to get them into one string, or you want to “secure” some data. I’m not going to get into the debate about base64 not really securing anything, that can be for another day!

This handy little extension provides a simple way to both convert to and from base64 within Visual Studio Code. You simply add your text string into a file in Visual Studio Code, highlight the string and run the tool.