Hello Developers,
I am Bivor and I am working as a developer specializing in the Backend side. When I was starting my career as a developer I learned about VS Code. Though some of you already know, let me tell you about it …
VS Code
Visual Studio Code (VS Code) is a popular and highly customizable text editor among developers for its productivity features. One of the biggest benefits of VS Code is the ability to install extensions, which allow users to customize their workflow and improve their productivity.
Ability to Install and Use Extensions!!!
When I first installed VS code I like most people didn’t even know how to use it. I just wanted to write some code LOL. However, after finding that it can install extensions and about the marketplace of extensions, I immediately went on shopping. I played around with loads of extensions, watched a lot of YouTube videos, and read blog posts about what extensions others use that would help me to work smarter. As I am sure you all will too …
In this post, we will look at some useful VS Code extensions that help me save time and work more efficiently. I hope it helps you guys out,
Live Server
Live Server is a VS Code extension that allows developers to preview their web pages in real-time. This extension can be especially useful for web developers who need to see their changes reflected immediately. Live Server can be activated by clicking on the "Go Live" button in the status bar, and it will automatically refresh the browser every time you save your changes. This extension also supports live reloading, which means that changes made to linked CSS or JavaScript files will also be reflected in the browser without the need to reload the page.
Here is also a youtube video that might help,
https://www.youtube.com/watch?v=y4qqQeUDCBQ&ab_channel=JulioCodes
GitLens
GitLens is a powerful VS Code extension designed to make working with Git repositories easier and more efficient. It provides a wealth of information about the code you are working on, including commit history, blame annotations, and code authorship. With GitLens, you can quickly see who made a particular change, when it was made, and why. This extension also provides a variety of useful features, such as code diffs, branch comparisons, and pull request reviews, all from within the VS Code editor.
If you are working in a team, which will happen more often than you think GitLens will help you a lot. Trust me on this,
Here is a youtube video that might help you,
https://www.youtube.com/watch?v=UQPb73Zz9qk&ab_channel=GitKraken
Better Comments
Better Comments is a VS Code extension that helps developers write more readable and maintainable code by formatting comments in a way that distinguishes them from regular code. This extension supports different comment types, such as alerts, queries, and explanations, and it color-codes them to make them stand out. Better Comments can also be customized to match your preferences, allowing you to create your own comment types and formatting rules.
Here is a YouTube video,
https://www.youtube.com/watch?v=WHwi6-hzJhA&ab_channel=CoolITHelp
Prettier - Code formatter
Prettier - Code formatter is a VS Code extension that automatically formats your code according to a set of predefined rules. This extension supports multiple file types, including JavaScript, TypeScript, CSS, HTML, JSON, and Markdown. With Prettier, you can save a lot of time and avoid the hassle of manually formatting your code. This extension also supports custom formatting rules, allowing you to tailor the formatting to your specific needs.
Though I don’t like it that much now [Just my personal opinion], it helped me a lot in the past
Here is a YouTube video,
https://www.youtube.com/watch?v=__eiQumLOEo&ab_channel=CodingWithAdam
Honorable Mention
Bracket Pair Colorizer 2 [Deprecated]
Though it is Deprecated after 2022 I love it,
Bracket Pair Colorizer 2 is a popular VS Code extension that helps developers read and navigate through code more easily. This extension color-codes the brackets in different colors, making it easier to distinguish between opening and closing brackets. This can be especially helpful when working with nested code blocks. Bracket Pair Colorizer 2 also supports custom bracket colors, making it easy to customize the extension to match your preferences.
To colorize in VS Code now you will just have to paste this in your settings.json
"editor.bracketPairColorization.enabled": true
ESLint
ESLint is a popular VS Code extension that helps developers write cleaner and more consistent code by identifying and highlighting errors and code smells in their code. This extension integrates seamlessly with VS Code and provides real-time feedback on your code as you type. ESLint supports a wide range of rules, including best practices, coding style, and security issues. With ESLint, you can ensure that your code is of the highest quality and conforms to the best coding practices.
Note: If you are just starting your development journey, do not use it now. Use it after you are a little bit comfortable with it.
Here is a YouTube video,
https://www.youtube.com/watch?v=eMgLHOrDkAs&ab_channel=WEBCIFAR
Conclusion
In this post, we have looked at some VS Code extensions that can help developers save time, work more efficiently, and write better code. Whether you need to navigate through code more easily, preview web pages in real-time, work with Git repositories, write more readable comments, or automatically format your code, there is likely an extension that can help. These extensions can significantly improve your productivity and help you customize your workflow to match your preferences. So, go ahead and explore the vast library of VS Code extensions to find the ones that work best for you!
Top comments (0)