Visual Studio Code has become one of the most popular code editors in recent years. Its flexibility, vast extension library, and active open-source community have made it a favorite for web developers. In this post, I’ll share my top 5 VSCode extensions that help improve my productivity and workflow in 2024.

1. Prettier

Prettier is my must-have extension for formatting code. It automatically formats your code to ensure consistent styling according to opinionated rules. I love how Prettier takes care of code styling so I can focus on the logic and not worry about proper indentation, quotes, brackets, etc.

Some of my favorite features of Prettier:

• Format on save — my code is always formatted without me having to do anything!

• Custom configuration — I can tweak formatting rules in the settings if needed.

• Support for many languages — works great for CSS, JavaScript, JSON, GraphQL, Markdown, and more.

Overall, Prettier increases my productivity by saving me time and mental energy on formatting. The code looks clean and professional at all times.

2. GitHub Pull Requests

The GitHub Pull Requests extension brings the GitHub PR workflow right into VSCode. I use it daily to manage PRs from my team without leaving the editor.

Some handy features:

• Review PRs within VSCode by adding comments, approving/requesting changes, etc.

• See all files changed in a PR directly in the editor.

• Check out PR branches to test locally.

• Create new PRs.

This extension saves me tons of context-switching. I can review, discuss, and merge PRs efficiently without having to jump between VSCode and the GitHub website.

3. WakaTime

WakaTime gives me insights into how I spend my programming time in VSCode. It automatically tracks my coding activity so I can visualize coding metrics.

I love these metrics provided by WakaTime:

• Editor usage — tracks how long I used different editors like VSCode.

• Languages — see breakdown of coding time by language like JavaScript, HTML, Python, etc.

• Projects — view how much time was spent on each project.

• Code/edit ratio — compares time spent writing vs editing code.

The metrics have helped me identify areas to improve my programming habits. And it’s satisfying to look back on metrics over weeks or months to see progress.

4. Tailwind CSS IntelliSense

I do a lot of front-end work with Tailwind CSS. The Tailwind CSS IntelliSense extension provides intelligent autocompletion, syntax highlighting, and linting right within my HTML and CSS files.

Some handy features:

• IntelliSense for Tailwind classes, variants, and directives as I type.

• Errors if invalid Tailwind class names are used.

• Emmet abbreviations for faster coding.

• Syntax highlighting for Tailwind directives.

This extension catches invalid uses of Tailwind early and gives me smart suggestions as I code — super useful!

5. ES7 React/Redux/GraphQL/React-Native snippets

I work a lot with React, Redux, and GraphQL. The ES7 React/Redux/GraphQL/React-Native snippets extension provides handy shortcuts for these technologies.

Some of my most used shortcuts:

• imr — import React

• imrc — import React / Component

• imrs — import React / useState

• redux — redux template

• useQuery — GraphQL useQuery hook

These snippets save me a ton of typing for common patterns. I can build React and Redux code faster.

Honorable Mentions

Here are some other great extensions I use frequently:

• Live Server — launch local dev server for HTML/CSS/JS.

• Bracket Pair Colorizer — color matches brackets for easier parsing.

• Indent Rainbow — color codes indentation levels.

• Code Spell Checker — spell checks comments and strings.

Conclusion

These are my top 5 extensions for supercharging my productivity with VSCode in 2024. Automated formatting, GitHub PR integration, coding metrics, CSS/React autocompletion, and code snippets help me work faster every day.

What are your favorite VSCode extensions? Let me know in the comments!