10 VS Code Extensions That Increased My Productivity as a MERN Stack Developer

Thinakaran Manokaran — Mon, 01 Jun 2026 16:09:58 +0000

As a MERN Stack developer, I spend most of my day inside Visual Studio Code. Over time, I realized that the right extensions can save hours of work, reduce errors, and make development much more enjoyable.

After building multiple web applications, freelance projects, and full-stack applications, these are the VS Code extensions that have had the biggest impact on my productivity.

1. Prettier – Code Formatter

One of the most popular VS Code extensions for developers.

Prettier automatically formats your code whenever you save a file, ensuring consistent styling across your entire project.

Why I Use It

Automatically formats code
Improves code readability
Reduces formatting debates in teams
Supports JavaScript, React, HTML, CSS, JSON, and more

2. ESLint

Writing clean code becomes much easier with ESLint.

It identifies potential issues, coding mistakes, and best-practice violations before they become bigger problems.

Benefits

Detects errors early
Improves code quality
Helps maintain coding standards
Integrates perfectly with React projects

3. GitLens

GitLens transforms VS Code into a powerful Git management tool.

It allows you to see who modified a piece of code, when it was changed, and why it was updated.

Features

File history
Commit tracking
Branch visualization
Git blame information

For developers working with Git daily, GitLens is incredibly useful.

4. Tailwind CSS IntelliSense

If you build websites using Tailwind CSS, this extension is essential.

It provides intelligent auto-completion, syntax highlighting, and class suggestions while you type.

Advantages

Faster styling
Fewer class name mistakes
Better development experience
Improved productivity

5. Auto Rename Tag

Updating HTML or JSX tags manually can be annoying.

Auto Rename Tag automatically renames the closing tag whenever you modify the opening tag.

Example

Changing:

<div></div>

to:

<section></section>

happens automatically.

This small feature saves a surprising amount of time.

6. Path Intellisense

Importing files becomes significantly faster.

Instead of manually typing file paths, Path Intellisense provides autocomplete suggestions for folders and files.

Useful For

React components
Assets
Utility functions
API files

This extension greatly reduces import-related mistakes.

7. Error Lens

Error Lens displays errors and warnings directly inside your code.

Rather than checking the Problems tab repeatedly, you can instantly see what's wrong.

Benefits

Faster debugging
Better visibility
Immediate feedback
Improved coding speed

8. Thunder Client

Thunder Client is a lightweight API testing tool built directly into VS Code.

As a MERN developer, I frequently test backend APIs without switching applications.

Why It's Helpful

Lightweight
Fast API testing
Request collections
Environment variables
Easy to use

Perfect for REST API development.

9. Live Server

Live Server automatically refreshes your browser whenever you save changes.

This is particularly useful for HTML, CSS, and JavaScript projects.

Features

Instant browser reload
Faster development
Simple setup
Great for beginners

10. Material Icon Theme

A clean workspace improves productivity.

Material Icon Theme adds beautiful icons to files and folders, making project navigation easier.

Benefits

Better organization
Faster file recognition
Improved developer experience
Cleaner workspace

My Recommended Setup

If you're a MERN Stack developer, install these extensions first:

Prettier
ESLint
GitLens
Tailwind CSS IntelliSense
Error Lens

These five extensions alone can dramatically improve your workflow.

Final Thoughts

Developer productivity isn't just about writing more code—it's about writing better code faster. The right VS Code extensions can eliminate repetitive tasks, reduce errors, and create a smoother development experience.

Whether you're a beginner learning web development or an experienced MERN Stack developer, these VS Code extensions can help you work more efficiently and focus on building amazing projects.

Which VS Code extension has improved your productivity the most? Let me know in the comments.

By, Thinakaran Manokaran [https://thinakaran.dev]
Instagram [https://www.instagram.com/thinakaranmanokaran/]
X / Twitter [https://x.com/DheenaManohar]
LinkedIn [https://www.linkedin.com/in/thinakaran-manohar/]
Github [https://github.com/thinakaranmanokaran]

Git Bash Automation: Create Custom Git Commands to Boost Productivity

Thinakaran Manokaran — Mon, 01 Jun 2026 16:05:01 +0000

Git Bash Automation: Save Time with a Single Git Command
If you regularly use Git, you've probably typed these commands hundreds of times:

git add . git commit -m "Updated project" git push origin main

Instead of repeating them every day, you can automate the entire workflow with one custom Git Bash command.

Why Automate Git Commands?

Git automation helps you:

Save time
Reduce repetitive typing
Avoid command mistakes
Improve productivity

Even small workflow improvements can save hours over time.

Create a Custom Git Command

Open your Git Bash configuration:
nano ~/.bashrc
Add this function:
gc() { branch=$(git branch --show-current) git add . git commit -m "$1" git push origin "$branch" }
Reload Bash:
source ~/.bashrc

Usage Commit and push to the current branch:

gc "Fixed navbar issue"

Instead of typing three separate Git commands, one command handles everything.

Benefits

Faster Development

Spend more time coding and less time managing Git.

Cleaner Workflow

One command replaces multiple repetitive steps.

Fewer Errors

Reduces the chance of forgetting a Git command.

Better Productivity

Small automation improvements create long-term efficiency gains.

Conclusion
Git Bash automation is one of the easiest ways to improve your development workflow. By turning multiple Git commands into a single shortcut, you can work faster, stay focused, and streamline your daily coding tasks.

DEV Community: Thinakaran Manokaran

10 VS Code Extensions That Increased My Productivity as a MERN Stack Developer

1. Prettier – Code Formatter

Why I Use It

2. ESLint

Benefits

3. GitLens

Features

4. Tailwind CSS IntelliSense

Advantages

5. Auto Rename Tag

Example

6. Path Intellisense

Useful For

7. Error Lens

Benefits

8. Thunder Client

Why It's Helpful

9. Live Server

Features

10. Material Icon Theme

Benefits

My Recommended Setup

Final Thoughts

Git Bash Automation: Create Custom Git Commands to Boost Productivity