Top 10 VS Code extensions

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.

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
VS Code extensions--GitLens

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.

vscode-icons

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
VS Code extensions-- CodeSnap

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.

VS Code extensions-- ES7+ React/Redux/React-Native snippets

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.

VS Code extensions-- Prettier

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.

VS Code extensions-- Live Share

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.

Auto Rename Tag

vs code extension

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.

VS Code extensions -- TODO Highlight

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

 Styled-Components-Snippets--VS Code extensions

Summary

  • 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

Also read :