Tools We Love – Top 10 Visual Studio Code Extensions

  • Product Reviews

Visual Studio Code extensions let you add a range of powerful features including different languages, debuggers, and tools to your installation to support your development workflow. We have picked our top 10 extensions that we’re sure you’ll love too!

1. Peacock

The Peacock extension lets you customize each project so you have some visual feedback on what you are currently working on.

Peacock

Installation link here.

 

2. Bracket Pair Colorizer 2

The extension allows matching brackets to be identified with colours. The user can define which characters to match and what colours to use.

Installation link here.

 

3. GitLens

Effortlessly explore the history and evolution of a code base with GitLens. Easily see who changed a line or code block, why, and when. Jump back in time to gain further insights into how and why the code evolved.

GitLens

Installation link here.

 

4. Auto Rename Tag

As the name suggests, Auto Rename Tag renames the second tag as the first one is updated and vice versa.

Auto Rename Tag

Installation link here.

 

5. Code Spell Checker

In most cases, spelling mistakes in variable, function, and package names cause developers to get errors. In addition, you may make spelling errors while writing a comment, description, or documentation. This package will highlight errors in your file.

Code Spell Checker

Installation link here.

 

6. Snippets

Using snippets will save you time and make you more productive. This is not just a single extension, but a collection of extensions with snippets for different programming languages.

Snippets

Installation links here:

HTML

JavaScript

Angular 2

Vue3

ES7 React/Redux/GraphQL/React

 

7. Better Comments

This tool allows you to write more human-friendly comments in your code. This helps you and someone reading your code to benefit from clear, digestible comments.

Better Comments

Installation link here.

 

8. Prettier

As one of the most popular code formatters, Prettier is a powerful opinionated code formatter. Consistent styles and formatting throughout your code can greatly reduce time spent on editing and collaborating with other developers. Below is an example before and after Prettier:

Prettier

Installation link here.

 

9. SVG Viewer

An SVG file is a text file that stores vector images for the web. A text editor displays the textual content of the SVG file if you use it to edit it. If you intend to edit these files directly, you can view them in an image editor.

SVG Viewer

Installation link here.

 

10. Import Cost

With Import Cost, you can see the estimated size of the import package in your code. When working on a project, keeping track of additional dependencies facilitates the process of avoiding user experience compromise.

Import Cost

Installation link here.

About the author:

Ann Mary Jacob

Ann Mary Jacob is an Application Developer at AOT Technologies. Her areas of expertise include Python, Vue, Nodejs, and Typescript. Besides being a techie, she’s fond of gardening and sports.