Microsoft Visual Studio Code - Must-have extensions for Developers

Visual Studio Code is one of the awesome developer tools by Microsoft. Let’s discuss a few of the extensions which you must have installed in your IDE.

Here are the extensions:

1. Bracket Pair Colorizer

Bracket Pair Colorizer{:target=“_blank”} is one of the most useful extensions.

This extension shows matching bracket-pairs with colors. Multiple brackets are shown in a different color. When your code grows bigger and bigger, having code brackets in color is going to help a lot in visualizing the code block.

2. Highlight Matching Tag

Highlight Matching Tag{:target=“_blank”} highlights the matching opening and closing tag. This extension officially supports ReactJs and Html, but other javascript like vue, angular, etc also works.

This extension is also very helpful if you are making a screencast for some online tutorial videos or lectures.

3. Indent Rainbow

Indent Rainbow{:target=“_blank”} colorizes the code indentation. It helps you in differentiating different code indent blocks.

4. Live Server Preview and Live Server

Live Server Preview{:target=“_blank”} (Live Server)[https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer]

They both are a live server with live-reloading enabled. It can serve your HTML files with the localhost server.

5. ES7 React Native Snippets

ES7 React Native Snippets{:target=“_blank”} provides javascript and ReactJS/Redux snippets.

For example, just type rcc and it will write up the React Component in class, like below:

import React, { Component } from 'react'

export default class Book extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

This is a very-very-very useful extension if you are working on specially ReactJs.

6. Prettier Code Formatter

Prettier Code Formatter{:target=“_blank”} is another very useful extension.

It works on a bunch of languages. It’s a code formatter with pre-configured settings. It helps format your code with some predefined rules. It helps to maintain your code with the same code style across the team.

7. VS Code Styled Components

VS Code Styled Components{:target=“_blank”} is a syntax highlighting and Intellisense for styled-components.

It helps you differentiate styled-components in your javascript and typescript code.

Thanks for reading…