My Essential VS Code Extensions

Visual Studio Code is my primary code editor for modern web development. However, VS Code becomes truly powerful when enhanced with the right extensions. These extensions help me write code faster, reduce errors, improve readability, and increase overall productivity.

1. Andromeda Theme / Material Theme / Min Theme / Dracula

Purpose: Change the color scheme of VS Code.

Why I use them:

Improve readability

Reduce eye strain

Make the editor visually appealing

Improve focus during long coding sessions

Better color distinction between:

variables

functions

components

keywords

2. Material Icon Theme

Purpose: Adds beautiful icons to files and folders.

Why it is useful:

index.js
style.css

This makes navigation faster. You see visual icons:

JS icon

React icon

CSS icon

Folder icons

3. Better Comments

Purpose: Highlights comments with different colors.

Example:

// ! Important
// TODO: Fix this later
// ? Question

Each comment type gets a different color, making it easier to scan.

4. Indent Rainbow

Purpose: Shows indentation levels with different colors.

Example:

if (true) {
   if (true) {
      if (true) {
      }
   }
}

Each indentation level has a different color.

understand nesting

avoid indentation mistakes

5. Auto Close Tag

Automatically closes HTML/JSX tags.

When you type:

<div>

It automatically adds:

<div></div>

6. Auto Rename Tag

If you rename one tag, the closing tag also changes automatically.

Example:

<div></div>

Change to:

<section></section>

Saves time and prevents errors.

7. Auto Import

Automatically imports functions, components, and modules.

Example:

useState

Auto Import adds:

import { useState } from "react";

8. Path Intellisense

Auto-suggests file paths.

Example:

import Button from "@/components/Button"

No need to type full path manually.

9. npm Intellisense

Auto-completes npm package names.

Example:

import express from "express"

Suggested automatically.

10. ESLint

Purpose: Detects errors and bad coding practices.

Example error detection:

unused variables

incorrect syntax

bad patterns

Helps write professional production-ready code.

11. Prettier — Code Formatter

Automatically formats code.

Example before:

const name="Aminul"

After formatting:

const name = "Aminul";

Keeps code clean and consistent.

12. ES7 React/Redux Snippets

Provides shortcuts to generate React code.

Example:

Type:

rafce

Auto generates:

import React from 'react'
const Component = () => {
  return <div>Component</div>
}
export default Component

Saves a lot of time.

13. JavaScript ES6 Snippets

Provides shortcuts for:

arrow functions

imports

loops

classes

14. Live Server

Runs HTML projects in browser with auto reload.

Example:

Change code → browser reloads automatically.

Useful for:

HTML

JavaScript projects

15. HTML CSS Support

Provides auto suggestions for:

CSS classes

HTML attributes

16. Tailwind CSS IntelliSense

Must-have extension for Tailwind CSS users.

Provides:

class suggestions

auto completion

error detection

Example:

<div class="flex items-center justify-center">

Suggested automatically.

17. Tailwind Fold

Folds long Tailwind classes to make code cleaner.

Before:

class="flex items-center justify-center p-4 bg-blue-500 text-white rounded-lg shadow-md"

After folding:

Cleaner and easier to read.

18. Image Preview

Shows image preview when hovering image path.

Example:

import logo from "./logo.png"

Hover → shows image preview.

19. CodeSnap

Creates beautiful screenshots of your code.

Useful for:

blogs

LinkedIn posts

portfolio

20. Markdown Preview Enhanced

Preview markdown files.

Useful for:

Notion-style notes

blog writing

documentation

21. Thunder Client

Lightweight API testing tool inside VS Code.

Alternative to Postman.

You can test:

POST

DELETE

Directly inside VS Code.

22. Postman Extension

Advanced API testing.

Useful for:

backend development

authentication testing

API debugging

23. Code Runner

Run code quickly.

Supports:

JavaScript

Python

Java

Run code without terminal setup.

24. GitHub Pull Request Extension

Manage GitHub pull requests inside VS Code.

You can:

review code

merge PR

check changes

Without opening browser.

🚀 My Development Workflow Using These Extensions

These extensions help me in:

writing code faster

reducing errors

maintaining clean code

improving productivity

building production-level applications

Especially useful for:

React

Next.js

Node.js

Tailwind CSS

Full Stack Development

VS Code extensions significantly improve development speed and experience. The right combination of extensions can turn VS Code into a powerful professional IDE. These extensions help me build scalable, clean, and maintainable applications efficiently.

Aminul Islam

My Essential VS Code Extensions

1. Andromeda Theme / Material Theme / Min Theme / Dracula

2. Material Icon Theme

3. Better Comments

4. Indent Rainbow

5. Auto Close Tag

6. Auto Rename Tag

7. Auto Import

8. Path Intellisense

9. npm Intellisense

10. ESLint

11. Prettier — Code Formatter

12. ES7 React/Redux Snippets

13. JavaScript ES6 Snippets

14. Live Server

15. HTML CSS Support

16. Tailwind CSS IntelliSense

17. Tailwind Fold

18. Image Preview

19. CodeSnap

20. Markdown Preview Enhanced

21. Thunder Client

22. Postman Extension

23. Code Runner

24. GitHub Pull Request Extension

🚀 My Development Workflow Using These Extensions

Bash Terminal Cheat Sheet

Next js metadata not working?

Next.js SEO Guide