“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld
Visual Studio is one of the most popular IDEs very powerful because of its rich & powerful extension environment which comes from its Marketplace. It provides all the features of both lightweight & heavy-weight IDEs. As a developer, IDE is your bow & extensions are the arrows.
I’ll be targeting extensions useful for web developers but this will also be helpful for others. The extensions I have mentioned are the ones I have used and found amazing. Also, there is a cool bonus tip at the end 🔥
When we are coding or doing any sort of project development then we get so into it that we forget to take a break or drink water at all. This extension solves this problem by making us take a break once in a while to stay healthy and productive longer. It greys outs the editor until you stop coding & look around and do something.
while working on multiple workspaces this extension could help you to identify which exact workspace you have switched to or working on. It subtly changes the color of your Visual Studio Code workspace. This is ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor.
It helps you to easily access your projects, no matter where they are located. You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.
Bracket Pair Colorizer 2
Brackets are the bane of a developer’s existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable.
This extension colorizes the indentation in front of your text alternating four different colors on each step. It makes indentation more readable by colorizing each tab indentation. By default, it comes with a “rainbow” of colors, but if you prefer something more subtle like me, you can configure it.
This extension helps you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, Highlights, Commented out code can also be styled to make it clear the code shouldn’t be there, Any other comment styles you’d like can be specified in the settings.
While working on JS library projects like React, Angular where the project is fairly large then finding exact component paths is difficult. This extension helps you auto-complete the path of the imports. It also helps you to auto-complete the file references in your HTML file.
If you use multiple machines, as I do, you’ll find this extension useful. Settings sync keeps all your computers/laptops synced in terms of how your visual studio is set up.
If you’re a developer who works on both an office and home computer you’ll basically you will be working on a different workstation. It’s time-consuming to change your settings manually on both because, to be honest, we will need to change our settings from time to time depending on the projects we are doing, so to reduce the stress of programming, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines and workstations.
Git Lens (:: Git on Steriods)
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase. It provides features like effortless revision navigation, displays authorship at top of a code block or file, current line blames, changes, and heatmap for file, etc.
If your team is using Github, or you are using Github for your project repositories or want to use other developer’s source code repositories, then this extension is for you. By using Github Extension, you can now easily connect other developer’s repositories, your favorite developer’s repositories, and even your own. You can easily pull and push — very handful if you use Github regularly.
Debugger for Chrome
In using Live Server, this vs code extension will help you open a live web server of your current project. Usually, when using a builder like Webpack, that normally does the job, but this extension has proven itself to be more useful. You can just right-click and run open with live server and it will do the rest.
Code Snippet Extensions
Live Sass Compiler
It compiles your SASS/SCSS files into CSS files in real-time and automatically gives you a live preview of the app or the compiled styles in your browser.
Polacode — Polaroid for your code 📸
You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It’s super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
Auto Rename Tag
Its primary purpose itself, auto rename tag, so if you have mistakenly created an opening tag and wanted to change it, the closing tag will also change in real-time.
This extension automatically add HTML/XML close tag.
Visual Studio IntelliCode
We all at some time go through lots of GitHub Repos and one pain point is navigating through the code. Github1s typically solves this problem. It opens any Github repo in Vs Code and all this happens in your browser.
github and press
Enter in the browser address bar for any repository, you want to read.
If you enjoyed this article and think others can benefit from it as well, feel free to share it on social media. Thank you for reading this article. Please don't forget to leave claps if you like the post. Happy Learning!