VS Code Extensions: Global Edition

Have you ever wondered why your VS Code just sits there while you do all the boring work yourself? Why doesn’t it format your code automatically, help you catch mistakes, or save you from repetitive tasks?

A few days ago, I noticed one of my classmates renaming an HTML tag. Then he scrolled down and renamed the closing tag manually too.

I stopped him.

“Wait… you rename both tags every single time?”

He looked at me as if I had just dumped a bucket of cold water over him.

“Is there a better way?”

Absolutely.

VS Code is already a powerful editor, but with the right extensions, you can make it much smarter, faster, and far less repetitive. So, instead of letting my classmate continue this unnecessary suffering, I showed him a few extensions that could seriously improve his workflow.

And the first one I told him to install was:

It can save a lot of time when renaming tags, because with this you just have to edit the opening tag and the closing tags will be renamed automatically. This is not the only extension I told him to install. There are many extensions you can use to boost your speed and productivity when working on web development, Python, C++, or anything else in VS Code.

For instance, if your code looks messy like this

Messy CSS

or this

Messy JavaScipt

You can use Prettier to clean that mess.

Just right-click and select Format Document from the options list, or you can also use the shortcut:

Shift + Alt + F on Windows and Shift + Option(⌥) + F if you are using a Mac

The main idea is that Prettier and autopep8 are both code formatters, but they target different ecosystems and formatting conventions.

Prettier is especially popular for web-development languages and formats such as JavaScript, TypeScript, JSX, CSS, HTML, JSON, Markdown, etc. You write code in whatever reasonable style you want, and Prettier automatically makes the formatting consistent.

Get Muhammad Zubair’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For example, messy JavaScript:

function greet(name){console.log("Hello, "+name)}

Prettier might turn it into:

function greet(name) {
  console.log("Hello, " + name);
}

Python is different because it has its own established style conventions, particularly PEP 8, the official Python style guide. autopep8 is specifically designed around automatically fixing Python code to conform more closely to PEP 8.

For example:

def greet(name):
    print("Hello, "+name)

autopep8 could format things such as spacing to produce:

def greet(name):
    print("Hello, " + name)

So when someone says:

“Prettier is great, but for Python, autopep8 might be better.”

There is another great extension called Live Server. It is a useful VS Code extension that launches your HTML project on a local development server and automatically refreshes the browser whenever you save changes. This makes it easier to see your updates instantly without manually reloading the page.

If you want the same kind of instant feedback while working with JavaScript, Quokka.js is another useful extension to have. It runs JavaScript directly inside the editor and displays the results next to your code as you type. This makes it especially handy for quickly testing expressions, experimenting with JavaScript, or understanding how a piece of code behaves without repeatedly switching to the browser console.

If you are working with React, the ES7+ React/Redux/React-Native/JS Snippets extension can save you a lot of repetitive typing. It provides shortcuts for quickly generating commonly used React code, such as components, imports, hooks, and other JavaScript patterns. For example, instead of writing an entire functional component from scratch, you can use a short snippet and generate the basic structure instantly.

And if you are using Tailwind CSS with React, Tailwind CSS IntelliSense is almost a must-have. It provides intelligent autocomplete suggestions for Tailwind classes as you type, along with syntax highlighting, linting, and hover previews. Instead of constantly checking the documentation to remember a class name, you can find what you need without leaving the editor.

More Extensions

There are plenty of other useful VS Code extensions worth exploring, but explaining every one in detail would make this article unnecessarily long. So, here are a few more you might want to check out:

• GitLens — adds powerful Git insights directly inside VS Code.
• Error Lens — displays errors and warnings right next to the problematic code.
• Path Intellisense — autocompletes file and directory paths while you type.
• Color Highlight — visually highlights colors written in your code.
• Import Cost — shows the size of imported JavaScript packages.
• npm Intellisense — autocompletes npm modules in import statements.
• Thunder Client — lets you test APIs directly inside VS Code.
• REST Client — allows you to send HTTP requests directly from your editor.
• TODO Highlight — makes TODOs and other important comments easier to spot.
• Code Spell Checker — catches common spelling mistakes in your code and comments.
• DotENV — improves syntax highlighting for .env files.
• Material Icon Theme — gives files and folders recognizable icons for easier navigation.
• Peacock — changes the color of your VS Code workspace, useful when working with multiple projects.
• Project Manager — makes it easier to organize and quickly switch between projects.

You certainly don’t need all of these. Pick the extensions that actually improve your workflow and avoid turning VS Code into a collection of tools you rarely use.

And that’s it for this list! There are countless VS Code extensions out there, and everyone eventually develops their own set of favorites.

Did I miss an extension you can’t code without? Drop it in the comments — I’d love to know what you’re using.

And if you’d like a more focused list, such as the best VS Code extensions specifically for MERN Stack development, React, Python, or another technology, let me know in the comments. That might just be the topic of the next article.