VS Code itself is awesome, but some extensions add more magic to it :). I like adding new extensions (then forgetting I have them or how to use them), and there are some that I would like to share with. So below is the list of my VS Code extensions that help developing both the front-end and the back-end.

Angular 8 Snippets

Link, Category: Angular

I haven’t checked if there are more useful tools, this one adds snippets of code that insert common Angular parts:

Note: there is a similar Angular Snippets extension, I’m unsure now of the differences, there is a chance both were limited at the time I installed them.

By the way, I’ve put together a small collection of tools I use regularly — things like time tracking, Git helpers, database utilities, and a few others that make development a bit smoother.

Angular Language Service

Link, Category: Angular

Angular Language Service extension provides Intellisense support in Angular templates. It gives hints both about built-in attributes and operators and about the component’s fields:

Angular Switch

Link, Category: Angular

A must. It registers keyboard shortcuts to switch between the corresponding .html and .tc files.

AVA Test Explorer

Link, Category: Test

This VS Code extension sometimes displays the test cases in the Test Explorer tab. It also displays results and allows for running and debugging selected tests. Unfortunately, sometimes it just didn’t work and no tests were discovered or displayed.

Bookmarks

Link, Category: General

I need this feature rarely, but then it’s very useful. It’s available in Visual Studio but not in VS Code. The Bookmarks extension allows for marking lines of code and then accessing them all in one place.

Bracket Pair Colorizer 2

Link, Category: General

It was hard to distinguish nested brackets until this extension. Works with all kinds of brackets.

Browser Preview

Link, Category: Web

This VS Code extension stopped working for me recently. It displayed a preview of the edited file in a built-in browser next to the code. Useful at times.

Code Runner

Link, Category: General

It should be a default. If you ever wanted to run something that is not JavaScript (e.g. C#, F#, Python as me), use this extension to avoid the troublesome launch.json configuration.

EditorConfig

Link, Category: General

If you use .editorconfig files, this extension obeys the rules written there.

Git Graph

Link, Category: Git

It draws a graph of the git repository. And provides some commands for the commits. Sometimes useful, though I still prefer terminal and gitk.

GitHub

Link, Category: Git

It adds a couple of commands to interact with the GitHub web service, the most important to me are: checking out and creating pull requests and opening GitHub page for the current project.

GitHub Issues

Link, Category: Git

It shows a list of your GitHub issues directly in the Explorer tab:

There is no option yet to show all issues for the project, but the author with a handful of users would welcome a PR :).

GitLens

Link, Category: Git

GitLens is one of the most common extensions for VS Code. It adds at least two features:

• the blame of currently edited line with details and links to the commit and diff (excellent!);
• a tab with several views (Repositories, File History, Line History, Compare, Search Commits) which to me are simply overcomplicated and pretty useless. I mean, this information is not what I usually search for.

Highlight Matching Tag

Link, Category: Web

I’m not sure if such a feature hasn’t been included in VS Code itself; Highlight Matching Tag marks the parent tag that the cursor is currently in. Useful in HTML files.

Highlight Trailing White Spaces

Link, Category: General

I love this VS Code extension. It highlights in red trailing white spaces. It’s impossible to leave them now ;).

Image Preview

Link, Category: Web

It displays a miniature thumbnail of the image linked to a CSS property:

Ionide-FSharp

Link, Category: F#

I’m not sure if the extension is still required, but at the time I tried to write F# code in VS Code, it was recommended. It adds syntax highlighting, Intellisense and a bunch of code search commands.

Jest Test Explorer

Link, Category: Test

I can’t believe there is not one extension that does it. Anyway, alike AVA Test Explorer, just for Jest.

UPDATE 2020-04: this extension is not available on the Marketplace now, maybe it was removed. I think the most popular Jest extension should do the same or even more.

Live Server

Link, Category: Web

A pleasant VS Code addon for quick web development. It installs the live server and runs inside it the selected (current) file. Your web browser opens with the page, and any change in the code is immediately reflected on the page thanks to the live reload feature.

Peacock

Link, Category: General

Peacock changes the color of some UI elements of multiple VS Code instances. It started annoying me, so I disabled it, but many people are glad of it.

Polacode

Link, Category: General

Polacode is similar to Carbon, but inside VS Code. It generates a screenshot of the selected code:

Prettier

Link, Category: General

Prettier formats code. By the way, it respects .editorconfig.

Python

Link, Category: Python

It provides support for the Python language.

Quokka Statusbar Buttons

Link, Category: Web

This extension adds buttons to run Quokka in the status bar. See below for information on Quokka.

Quokka

Link, Category: Web

Quokka is an amazing VS Code extension that allows rapid console.log debugging. Namely, it prints values of variables next to the variables themselves, without running the code. It is a bit limited in the free version, but still very useful.

Remote Repository Viewer

Link, Category: Git

It clones a git repository in a user-defined folder for a quick inspection.

Search node_modules

Link, Category: Git

Not searching actually but browsing the node_modules directory through a command. May be faster than using the mouse in the Explorer tab, but not too much ;).

Settings Sync

Link, Category: General

This extension makes a backup of our VS Code settings and extensions and allows to restore the settings from the backup. The backup is stored in your GitHub account and it can be private or public.

SQL Server (mssql)

Link, Category: SQL

It allows browsing and querying SQL Server instances.

Sublime Search

Link, Category: General

Sublime Search provides a new command to find a text with the results gathered on one page:

Test Explorer UI

Link, Category: Test

A prerequisite for AVA, Jest, etc. It’s installed automatically by any of these, so don’t worry about it.

Turbo Console Log

Link, Category: Web

This VS Code extension provides shortcuts for logging a variable with a breadcrumb to the line:

Vim

Link, Category: General

Beware of installing it or you will not exit! 😉 It turns on the Vim style of editing files.

VS Color Picker

Link, Category: Web

It provides a color selector for colors in CSS. Really useful.

Read next

• 4 Node.js package managers: npm vs yarn vs pnpm vs dry
• Three quick steps to set up SSH login to GitHub in Windows
• How I refactored maze generating Python code and used advanced class features
• GitHub contribution by Pull Request – crash course
• How to regenerate changelog using standard-version