Top 10 VSCode Extensions to Supercharge Your Workflow

As a developer, being productive is crucial to our success. I happened to stumble upon some amazing VSCode extensions that I wasn’t using to their full potential while looking into tooling to help increase my own productivity. Once I got these setup with my other extensions I was blown away with how much they changed the way I write code and manage projects in VSCode.

I’ll share what those extensions were as well as some others that have been recommended and found through research to help you be more efficient as a developer in your code editor of choice: VSCode!

In this article, I’ll be showing you the 10 best VSCode extensions perfect for beginners and even experienced developers too, that will help you save time and overall make coding in it a lot easier and fun.

---

Prettier – Code Formatter

Prettier is a beauty when it comes to maintaining code style throughout your project. It will auto format your code with best practices and common sense in mind.

How it helps:

• Saves your time: format code on save.
• Reduces code review comments related to formatting.

Example: Imagine you working in large team and everyone has got different coding style. Prettier ensures that no matter who writes the code, it looks consistent.

npm install --save-dev prettier

---

GitLens

GitLens makes Git in VSCode so easy. It enhances Git capabilities with your editor, showing you, who last modified a method/line of code with some blame annotations.

How it helps:

• Version control helps you easily track code changes and why they were made.
• View the history of a file or a specific block of code.

Example: Lets say you run into some logic in the codebase that is confusing to you. With GitLens you can see who wrote it, their commit message, and exactly what changes they made.

---

CodeSnap

Love sharing code snippets? you must have CodeSnap. It lets you take beautiful screenshots of your code with 1-click, syntax highlighting included.

How it helps:

• Visually appealing code snippets for your blogs or productivity wallpapers.
• Saves time by automating the process of styling and formatting snippets.

Example: You’re writing a blog post or preparing a presentation. Instead of manually styling code snippets, CodeSnap gives you a professional-looking output in seconds.

---

Live Server

Live Server launches a development local Server with live reload feature for static & dynamic pages. Automatically reloads the browser when your files change. In case of HTML files it injects Updated CSS and JavaScript Include automatically too (You don't need to add Browser Plugin).

How it helps:

• Instant feedback for frontend projects.
• Speeds up development by auto refreshing the browser.

Example: Building a landing page and you will see changes as you save your files, no need to manually refresh the browser.

---

ESLint

Catch errors and enforce coding standards with ESLint. It even integrates directly with VSCode highlighting mistakes on the fly.

How it helps:

• It identifies & fixes common coding errors
• Help in adopting best practices and improving the code quality.

Example: You are working on a Javascript project and you left a console.log statement by mistake, ESLint will catch that as soon as you write it thus help to keep your production code cleaner.

---

REST Client

REST Client extension allows you to test APIs directly from VSCode without the need of any external tools like Postman.

How it helps:

• Test APIs directly from your editor.
• Save the requests that you use often, and you can quickly access them.

Example: If you are building RESTful API and want to test your endpoints quickly without going to postman.

---

Better Comments

The Better Comments extension is really cool as it helps in increasing the readability of your comments present in the code, you can categorize and color code your comments based upon the type of the comments so that they are more visible and readable.

How it helps:

Better Collaboration: By distinguishing between notes, warnings and tasks, team members can quickly scan to find the info they need.

Better Readability - Comments that are color coded, are easier on the eyes and allow you to quickly understand what the intent behind a comment was.

Consistency - Many companies use TODO and FIXME in their comments to make it easier for other developers reviewing or maintaining code.

Example

Think of a scenario where you are working on some large project with multiple people, and so are going to some specific part of the code that is not implemented completely, so you put a TODO comment for yourself or your team, now using Better Comments, you can make that obvious in some contrasting color which will help in making sure it doesn’t get missed.

The extension will use a different color for each of these comments, and you can easily see that it is a TODO comment or some other kind of note to self that you've made in the middle of some development.

---

Path Intellisense.

This extension autocompletes file paths as you type, which can be very handy when working with imports in larger projects.

How it helps:

• Speed up writing import by suggesting file path.
• Reduces errors which occurs due to wrong file paths.

Example: When you are importing a component in a react project, while typing Path Intellisense will suggest the correct file path , so you don’t have to manually type it by your own.

---

Tabnine

Tabnine is the best AI code completion tool. All you have to do is type the name of a class or method, and Tabnine will provide the rest of the code for you.

How it helps:

• Increases productivity with intelligent code completion.
• You can avoid repeating things and actually think more about the logic while writing.

Example: While writing a not too simple algorithm, tabnine will suggest relevant code(snippets) based on your context, helping you to write faster.

---

VSCode-icons

Not strictly productivity but this extension makes it so much easier to differentiate between file types by adding filse-the icons in your editor for the specific file.

How it helps:

• Improves file navigation with visual clues.
• Improves workflow, especially in large projects.

Example: In a project with multiple file types, you can quickly identify JavaScript, CSS, or configuration files by their icons, reducing cognitive load.

---

Conclusion

Of course, there are a lot more other things you can do with the power of VSCode's ecosystem. From debugging support, code formatting, working with Git repositories and more! However the extensions I've summarized here have made work quite productive and have made coding fun.

If you are using VSCode, try these and let me know how it goes. And if there’s an extension you love that I haven’t mentioned, please share! I’m always looking to learn new things.

Happy coding. I hope your development process is as smooth as Prettier! 😊