Top 10 VS Code extensions

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Visual Studio Code, maintained by Microsoft, is one of the most popular open source code editors out there. VS Code aims to offer all the tools you need while cutting out the complex workflows of full IDEs. Many programmers prefer VS Code because it offers so many extensions for added functionality, productivity, debugging, and speed.

Table of Contents

GitLens

GitLens is an open-source extension for Visual Studio Code. GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository.

GitLens is great for understanding code better, so you can learn who, why, and when code was changed. It also allows you to explore the history and evolution of a codebase.

It also has many other features to use such as:

Revision navigation through file history
A current line blame annotation at the end of the line showing the commit
A status bar blame annotation for the commit and author who last modified the current line

VsCode Icons

VsCode Icons is a cool extension that adds a set of icons to each of the files and folders in the Explorer view, thereby making the editor look more colorful and also help to easily view all the different files quickly.

CodeSnap

CodeSnap is an extension for VS Code that allows you to quickly create awesome code screenshots.

Benefits of Using CodeSnap.

CodeSnap take care about the shadow, padding, background & rounded corner of screenshot
CodeSnap quickly save screenshots of your code. You just need select the code you’d like to screenshot and click the shutter button
Copy screenshots to your clipboard
CodeSnap has many configuration options

ES7+ React/Redux/React-Native snippets

ES7 React/Redux/GraphQL/React-Native Snippets is a free extension for VS Code published by dsznajder (dsznajder), you can install it to increase the power of your Visual Studio Code.

Prettier

The Prettier extension is a formatter that helps to keep code style consistent. You can configure your settings however you need and save with shortcuts. Prettier is one of the most popular code formatters.

Prettier will automatically fix formatting issues in your code, like fixing the mix of single and double-quotes or an irregular use of semicolons.

Live Share

Live Share is an extension for Visual Studio Code that enables real-time collaboration between developers. It gives users the ability to share a session with someone else, allowing them to edit code as well as share a server and debugging session.

Auto Rename Tag

We all are aware that most of the tags in HTML need a closing tag as well, and while writing professional code, which includes thousands of lines, tags are closed after hundreds of lines. Therefore, it becomes very difficult if we have to rename the tag. We have to find where the tag was closed and then only we can rename it. Auto Rename Tag provides us with a feature that when we change the starting tag it will automatically change the closing tag as well, making the renaming of tags easier.

TODO Highlight

If you like to mark sections of code with TODO and FIXME tags but keep forgetting about them then this plugin will solve your problem. It highlights TODO or FIXME phrases in the code so that you don’t forget what you wanted to fix or improve.

Bracket Pair Colorizer 2

The VS extension Bracket Pair Colorizer matches corresponding brackets in your code with the same color. This is a great help when you’re working with things like nested components, objects, or functions that all have brackets or parentheses.

With this simple extension, it’s much easier to find matching pairs and understand your code. The biggest advantage of this extension is improved navigation and accessibility. It also makes it easier for others to read and understand your code.

VS Code -- Bracket Pair Colorizer (extensions)

Styled-Components-Snippets

I use a lot styled-component and thanks to this extension CSS remains colored has normal otherwise it will be considered as a string, and it would be just green text

Summary : Top 10 VS Code extensions

GitLens
Vs-Code Icons
Code Snap
ES7+ React/Redux/React-Native snippets
Prettier
Live Share
Auto Rename Tag
TODO Highlight
Bracket Pair Colorizer 2
Styled-Components-Snippets

I hope you like this Top 10 VS Code extensions article.🙂