My Top 10 Vs-code Extensions

VS-CODE is becoming perhaps the most prominent and preferred code editor in modern days, yet proving to be the most underutilized.

This application which is classified as an ide(Integrated development environment ) or simply a code editor like many others, has the ability to install extensions or plugins that basically improve the default application operations to mainly boost its user's productivity. Some of the reasons behind its growing popularity in the development industry are;

Extensive and precise documentation.
Abundance of resources related to its usability and best practices.
Huge list of extensions
Easy interface customization
Massive and growing web community.
Constant updates and additional features.

In this article, we will group the extensions into two groups namely productivity extensions and Appearance extensions;

1. Productivity Extensions;

These are extensions that improve your productivity and efficiency when coding using vs code and include;

- Better Comments:-

This extension helps your productivity by Improving your code commenting by annotating with an alert, informational, TODOs, and more! The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, and Highlights all in different colors to differentiate between them.

- Gitlens:-

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.

- JShint & ESlint :-

JShint extension Integrates JSHint into VS Code. These are extensions associated with javascript and help in code monitoring of the syntax and other errors that may occur in your code. I have written an extensive article on these extensions and their importance and you can find it here..

- Prettier :-

Prettier is an opinionated code formating extension. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. This extension is a must-have if you want to keep your code clean and well arranged for easier readability and maintenance.

- Live Server :-

This extension is amazing, to say the least. I briefly touched on its usability, especially when running javascript or web-based code snippets or projects in this article.. This extension helps launch a development local Server with a live reload feature for static & dynamic pages.

- Visual Studio IntelliCode :-

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

- Import Cost :-

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with the babili-webpack-plugin to detect the imported size.

- vscode-faker :-

When coding, you'll probably need some test data related to various topics like people's names, cities, phone numbers, etc. This extension is very helpful by generating fake data for name, address, company, database, date, image, phone to use in your code.

- webhint :-

The Webhint Visual Studio Code extension provides diagnostic data for workspace files based on webhint analysis.

2. Appearance Extensions;

The following will be a list of only three extensions that I've found to be unique and highly customizable to improve the appearance of your vs code application. These boost the appearance as well as your productivity regardless of your choice in coloring or feelings towards light and dark modes.

- Rainbow Brackets :-

This is one of my favorites when it comes to appearance. One of the most utilized symbols in coding are brackets which are of multiple types and it isn't difficult to make a mistake of skipping some and this is what makes this extension so useful. It Provides rainbow colors for the round brackets, the square brackets, and the squiggly brackets.

- Bracket Pair Colorizer :-

This is another extension that is so amazing to have. To locate matching or the pair of a bracket which may have hundreds of lines in between, this extension helps by using the same color for matching brackets making it easier to locate.

- Peacock :-

When I found this extension, I couldn't believe the creativeness of its developer a developer by the name John Papa. This extension Subtly changes the color of your Visual Studio Code workspace which is Ideal when you have multiple VS Code instances.

This concludes my list of the 10 most utilized vs-code extensions in my arsenal. As you have noticed I haven't discussed much on color themes because this is a highly opinionated topic since some developers prefer dark while other light themes. Personally, I'm more productive with dark themes and ill give a list of the best I'm aware of below.

Now, these are worth a look even if you use light themes because most of them have light versions which I imagine are as good as their dark counterparts. They include;

Andromeda
Material theme & Icons
Monokai
Night Owl
Cobalt2
FireFly Pro -A Pure Colorful Dark Theme that Glows in Night, inspired by Fireflies.

I may have gone a bit overboard with the number and given a bonus but they are all useful and make coding very enjoyable.

This concludes or list of extensions that can help improve your productivity and coding experience. id appreciate it if you subscribe to this blog for more posts and tips on coding and tools. You can also share this article on your social media to bookmark it for future reference or give access to your friends. You can follow me on Twitter , where I share countless resources and articles related to web development and we can become lifetime friends.

Finally, THANK YOU for so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.