A Quick Introduction To Visual Studio Code

Image of a Visual Studio Code logo on a light yellow background.

Table of Contents

Visual Studio Code, also commonly known as VS Code, is a lightweight, pleasant-to-use, but powerful code editor that’s been steadily growing in popularity since its first release in 2015. At the time of writing, VS Code is the most popular developer environment tool. With its remote work and collaboration features, Microsoft’s VS Code continues to tick all the right boxes for developer happiness.


What makes VS Code super popular?

First of all, it’s FREE but incredibly powerful and beautiful at the same time. Yes, I’m a VS Code fangirl and here’s why. One of the things that I appreciate when it comes to software, is its out-of-the-box nature. Sure, I can configure and customise later, but at the same time I want to start straight away, then make it pretty later. The UX of VS Code is intuitive, so within a few minutes, I can hook it up to GitHub, make a pull request and off I go.

It also boasts an incredibly impressive extensions library. In addition to the widely used Emmet which comes built-in, there are over 30, 000 extensions to support every major programming language, with new ones are added regularly. Every developer I know likes to customise their code editor and VS Code makes it incredibly easy to add whatever you need to make it feel like it’s your creative space.

VS Code is also platform agnostic, meaning that it can be used on Windows, Mac and Linux. But most importantly, it is beginner friendly! This is a huge deal for those of us that teach programming because I can confidently navigate my students to download it and know they won’t struggle to set it up.

Now that we’re on the topic, let’s install and set up VS Code!


VS Code Installation and Setup

Go here to download your platform-specific version of VS Code and follow the installation instructions.

Now open up your application, you should see a similar screen to the one below.


The welcome page is notably minimal and contains only the necessary information you need to get started. On the right of the screen, there are walk-throughs to help you quickly learn the basics. On the left you’ll find shortcuts for creating or opening new files or folders.

If you don’t already know what Clone Git Repository means, then don’t worry because that’s beyond the scope of this article.

The icons on the left serve as a quick access to common operations. The first icon opens the Explorer, where you can create and open your project’s files and folders. The second icon, the Search, is for searching through your document. Its search and replace functionality greatly comes to hand when you need to search through hundreds or thousands of lines of code.

The third is for your git repo and the fourth icon is for debugging.

The fifth icon, the extensions, gives you access to over 30, 000 extensions. As explained earlier, these extensions literally extends the functionality of VS Code, allowing each developer to personalise it to their taste.

Then there are the two icons at the bottom left hand side.


The first icon, the Accounts, is for signing in to things like your Github or Microsoft account. Finally, the Manage icon, is where you’ll find features such as settings, keyboard shortcuts and the command palette for quick navigation.


Final Words

By now you should be confident enough to fire up your version of VS Code and start exploring. Why don’t you checkout some of the must have extensions and road test the ones that jump out to you. This will be a great way of seeing if VS Code is a fit for you and the way you like to work.

Happy Coding!

get the best real-world tutorial, right to your inbox!

    let's get social!

    recent posts

    Get the best real-world projects, right to your inbox!