Visual Studio Code is widely used nowadays for writing codes. It is highly extensible and there are a lot of contributors that create useful extensions for it, to give this editor superpowers. It’s not a joke, you can really speed up your development with these tools and enhance your contribution to teammates. Here are 10+ VS Code extensions – curated, sorted, and categorized to help you increase your productivity and make you more effective as a developer.
Let's get started!
1. Live Server
Live Server is one of the most installed VS Code extensions on the marketplace with over 15 million installations. Why? Because it lets you turn your VS Code editor into a fully functional IDE.
2. Prettier
Who doesn’t like pretty code? Prettier is your most popular formatting and linting tool that standardizes your code against industry conventions. It also ensures that your teams create visually seamless code in appearance – so no more arguments over how many tabs or spaces you should be using or where brackets should sit.
3. Code Time
Have you ever wondered how long you spend coding? Despite the shift to remote work, we can still be as easily distracted by life things like children, parcel deliveries, and even the dog – as we are when we’re sitting in an office through colleagues and impromptu meetings. Code Time keeps you accountable for your productivity by tracking your time and can help you segment which project you’re working on the most.
4. Vs-code Icons
If you like material design-inspired icons, then the vs-code icons are also a good one to check out. With over 9 million installs, vs code-icons supports globalization and comes with the ability to customize with your icon packs, automatically detects your projects, and allows for custom configurations.
5. Icon Font
Are you a user of Font Awesome in your projects? Or do you use Android Icons? Do you want to prototype without the need to keep referring back to the documentation quickly? Icon Fonts is a productivity work tool that incorporates auto-complete and IntelliSense for incorporating a wide range of icon fonts into your frontend’s HTML.
6. Better Comments
Better comments help you write more human-friendly, readable comments. Comments help you understand your own and others' code. This extension helps to visually organize your comments, so they will be much more digestible. You can categorize your annotations to highlighted text, errors, warnings, questions, strikethrough, and TODO. With these formatted annotations being visually separated you won’t miss out on any must-read comments.
7. Reactjs Code Snippets
If you’re working on a React project, Reactjs Code Snippets can help improve your workflow and code speed by providing neatly packaged and pre-written templates for you to use. All you have to do is start typing the trigger commands, and you’ll get useful snippets.
8. Colorize
This simple CSS extension highlights the text to the defined color when writing styles, no longer requiring a quick page refresh to test out a new color.
9. Git History
Git History is a VS Code plugin extension that lets you look at the history and search for commits, messages, branches, files, and authors with ease. In addition to this, it lets you cherry-pick commits, compare files, soft and hard resets, revert, merges, and rebase with a few simple clicks and commands.
10. Peacock
It’s common for web devs to open multiple windows of VS Code as we work on multiple repos at the same time. For example, one for the backend code and one for our front end. The Peacock extension adds color to the different project windows, so devs can quickly identify which repo they are working on.
11. HTML CSS Support
What is modern app development without HTML and CSS? HTML CSS Support is your ultimate Intellisense for HTML and CSS in VS Code. Features include id and class attribute completion, linked and embedded stylesheets, inheritance, and CSS selectors validation.
12. Polacode
Want to share a code snippet? Want it to look professional? Polacode is a cool little plugin that lets you take ‘polaroids’ of your code without having to bust out the snipping tool. You highlight the code you want, and it will automatically create a formatted code file.
If you know about any other cool extension of vs code, then feel free to mention it in the comment section. THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKES OR WANT TO GIVE ANY SUGGESTIONS THEN PLEASE MENTION THEM IN THE COMMENT SECTION.
You can help me with some donations at the link below Thank you 👇👇 ☕ - buymeacoffee.com/abdrzqsalihu