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 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 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 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.
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 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.
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.
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
- Vs-Code Icons
- Code Snap
- ES7+ React/Redux/React-Native snippets
- Live Share
- Auto Rename Tag
- TODO Highlight
- Bracket Pair Colorizer 2
I hope you like this Top 10 VS Code extensions article.🙂
Also read :
- Vs Code Shortcuts key
- HTML DOM Events
- FREE Games With Source Code
- Amazing CSS Ripple Effects
- CSS Profile Card Design
- CSS Responsive List View Examples
- React Complete Course
- Solidity Basic