How to start using VS Code like a pro!

Choosing an IDE when you first start learning to code doesn’t seem such a big deal. Most of them are free, easy to install and efficient. Let’s look at how to make the most ouf of your text editor.

In this post, I’m going to review some tips and techniques as well as some of the most important features of Microsoft Visual Code.

VS Code is one of the best IDEs out there. You can check my previous post on how the major text editors stand against one another.



Visual Code 101

1) First you’ll need to install it by going on  the download page here.


2) Once VSC is installed, here are some basic addons you can look into:


Git. Although VSC does come with a built-in Git tool (more on that later), it will require Git to be installed for it to work. You can install Git here.


NodeJS. You’ll also want to make sure you have NodeJS installed on your computer at this point. Link is here.


Chrome Debugger. Using Chrome Dev tools is of course pretty handy but this extension brings all the tools into VS Code for clarity (Chrome is only rendering your code so all the editing and testing is kept under your IDE’s umbrella). Check out this nifty extension here.


3) At this point, you have a working setup and you can start your first projects.

Or you can start installing some additional extensions. Here are some of my favourites:


Auto Close Tag

Auto Close Tag will automatically close your tags when you code. The HTML auto-closing is built-in in the most recent versions of VS Code so this extension is actually only needed for Javascript. The great thing is that it’s configurable. Check out the guide for that extension here: Auto Close Tag


Git History

Git History allows you to view history of the current branch, all branches. Compare commits, view details of the commits, compare changes against previous files. It provides you with a nice graph view of your changes on files. Check it out here.  



IntelliSense for CSS class names will offer suggestions of class names as you type them based on the CSS files of your workspace. The nice think is that it supports and recognise CSS classes placed in ‘link’ tags so for example, if you link Bootstrap to your page, it will see it and suggest Bootstrap class names as you type them. Check it out here


JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax. That’s a must have since JS is a must-know. You can install it from here.


SVG Viewer

SVG Viewer allows you to preview your SVG files. If you don’t work with SVGs, well you should, it’s scalable, it doesn’t ever pixelate, it’s the future. You can check that extension here.


There are many other useful extensions you should check out, for example if you’re into React (like me) there are many linters you can use to improve on your workflow.

Now let’s look into the UI.

VS Code User Interface:


VS Code UI


Like many other code editors, VS Code features a a Navigation bar on the left, editor space on the right and a status bar at the bottom.

source: Microsoft

source: Microsoft

You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility (⌘B).


Side by Side Editing

You can have up to three editors open side by side. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

  • Ctrl (Mac: Cmd) click on a file in the Explorer.
  • ⌘\ to split the active editor into two.
  • Open to the Side from the Explorer context menu on a file.
  • Click the Split Editor button in the upper right of an editor.
  • Drag and drop a file to the either side of the editor region.
  • Ctrl+Enter (Mac: Cmd+Enter) in the Quick Open (⌘P) file list.
source: Microsoft

source: Microsoft

Minimap - outline view

A Minimap (outline view) gives you a high level overview of your source code which is very useful for quick navigation and code understanding. A file's minimap is shown in the right side of the editor. You can click or drap the shaded area to quickly jump to different sections of your file.

source: Microsoft

source: Microsoft

If you would like to disable minimap, you can set "editor.minimap.enabled": false in your user or workspace settings


The Explorer is used to browse, open, and manage all of the files and folders in your project. VS Code is file and folder based - you can get started immediately by opening a file or folder in VS Code.

After opening a folder in VS Code, the contents of the folder are shown in the Explorer. You can do many things from here:

  • Create, delete, and rename files and folders.
  • Move files and folders with drag and drop.
  • Use the context menu to explore all options.

Tip: You can drag and drop files into the Explorer from outside VS Code to open them up.

source: Google

source: Google


Zen Mode

Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Side Bar and Panel) and going to full screen. Zen mode can be toggled using View menu, Command Palette or by the shortcut ⌘K Z. Double Esc exits Zen Mode. The transition to full screen can be disabled via zenMode.fullScreen. Zen Mode can be further tuned by the following settings: zenMode.hideStatusBar, zenMode.hideTabs, zenMode.fullScreen and zenMode.restore.

source: Google

source: Google

Finally, your VS Code workflow will be vastly improved by learning and using its keys-shortcuts.

Key Shortcuts:

If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.

  • ⌥⌘→ go to the right editor.
  • ⌥⌘← go to the left editor.
  • ⌃Tab open the next editor in the editor group MRU list.
  • ⌃⇧Tab open the previous editor in the editor group MRU list.
  • ⌘1 go to the leftmost editor group.
  • ⌘2 go to the center editor group.
  • ⌘3 go to the rightmost editor group.
  • ⌘K ⌘← go to the previous editor group.
  • ⌘K ⌘→ go to the next editor group.
  • ⌘W close the active editor.
  • ⌘K W close all editors in the editor group.
  • ⌘K ⌘W close all editors.

Note that if you are used to Atom, Sublime or another editor's key binding, you can search the VS Marketplace for the relevant extension. It will replace the built-in shortcuts with the ones commonly linked to a given editor.


VS New Features!


Workspace functionality

    You can add a folder to a dedicated Workspace to gather your directories into one place. You can name and save your Workspaces.

    You can link folders but also settings to specific workspaces.

    Specific syntax highlighting for a specific workspace. The JSON file for workspace settings is just a flat file you can share with team or modify.

You can learn about how to use workspaces here.



VS Code now highlights edited files based on status. 


Source Control

You can hover over the highlight colour in the gutter, click on it to open an editor showing what the changes/additions were.

You can stage changes one by one via the mini editor. Changes staged that way are ready to be committed right away.



Vertical docking for panels:

View > Integrated Terminal will show it at the bottom but you can now click on the “Move to the Right” button to have your terminal on the side.



This is super cool! You can not only fold portions of code but also create “Regions” so encapsulate code portions between comments with a specific formatting (//#region section -> #end region) and VS Code will make that portion foldable.

This can be pretty neat when working in a team, you can assign a portion of code to a person by commenting it like #region John-toTest.

Note that this might not fully supported on all languages so you’re fee to contribute to that on GitHub.


For visual examples and more info on those features, check out Kenneth Auchenberg's video: 


This is the beginning of a new series on how to get the most out of your text editor.

Make sure you share this post if you found it interesting! :)