7 Top Visual Studio Code extensions

7 Top Visual Studio Code extensions

7 Top Visual Studio Code extensions

  • by admin
  • Web Development


This is a short article about all the Visual Studio Code extensions that I personally find to be great tools to have. This are my favorites, so if you use different extensions that I didn’t mention, feel free to let me know in the comments down below.


1: Code Time

Code Time is an open source plugin that provides programming metrics right in your code editor.

After you install the extension, you will be prompted to login to their dashboard.

Right inside of your code editor you can press command + shift + P 
That will bring a window where you can type Code Time and then you can choose between displaying data right inside your code editor, or in a browser.

Inside the browser, all the information is going to look like this:

And inside of the browser, the situation is going to be a bit more colorful:

Code Time is really useful if you’re wondering or you’re required to know how much time you actually spend coding.

2: One Dark Pro

One Dark Pro is Atom’s most popular theme and it is one of the most downloaded themes for Visual Studio Code ever.

One Dark Pro Icon Theme

As you can see in this example, we have icons for directories like client and server, as well as for the files like .eslintrc .gitignore and package.json.

One Dark Pro goes in all the way with React, Angular, Redux and a lot of different frameworks and libraries, providing different directory icons for components, util, styles, as well as for reducers, actions and store.

3: Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours.
This is extremely convenient when you have deeply nested objects or functions, as it shown here:

Bracket Pair Colorizer

4: Color Highlight

Color Highlight shows you a visual representation of any color code.

For example, if you type RGB, RGBa, Hexadecimal or any other color code you will be able to see the color visually like in this example:

Color Highlight

5: Path Intellisense

Path Intellisense is a Visual Studio Code plugin that auto completes filenames.

It is extremely useful for importing components in React since you don’t have to manually enter the path of the file you’re looking for.

Path Intellisense

6: ES7 React/Redux/GraphQL/React-Native snippets.

Next extension on the list is ES7 React/Redux/GraphQL/React-Native snippets. Quite a long name, but trust me, it will save you a lot of time, especially if you’re using it with React.

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

Right inside of your code editor you can press command + shift + P and then ES7 Snippet Search and you will be greeted with a long list of short commands you can run to get much longer snippets of code.

ES7 React/Redux/GraphQL/React-Native snippets.

You can also perform a search here, so you can easily find a command for a functional component snippet, for example.

You run the commands by simply typing them in your editor and pressing enter. Simple as that, works like magic.

7: GitLens — Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code.

It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Just by clicking on the line of code you can see who edited it, when did they edit it, and in what commit. Useful stuff!

GitLens — Git supercharged

That’s it!

You made it all the way until the end! If you found any of these extensions useful and you liked the article, feel free to click and hold the clap button! :)

Tags: Extensions,Visual Studio Code