Blog

Let’s face it: front-end developers need all the productivity hacks they can get. VSCode extensions are like secret weapons that can seriously upgrade your dev workflow, making coding faster, smoother, and way less painful.

Here are 10 of my favorite extensions that I’m condident will help you write better code and save precious time.

1. Prettier - Code Formatter
2. ESLint
3. Auto Rename Tag
4. Color Highlight
5. Auto Close Tag
6. CSS Peek
7. Live Server
8. Better Comments
9. Pretty TypeScript Errors
10. Astro

Prettier - Code Formatter

Prettier is an opinionated code formatter that will automatically format your code to a consistent style. This extension is great for teams that want to enforce consistency, or just to keep you from having to worry about formatting your code.

With over 34 million installations, you could say it is popular.

ESLint

ESLint is a configurable linter to help you find and fix problems in your JavaScript code. It can be used for both frontend and backend development, and is a great way to catch bugs before they happen. It can check for mistakes like unused variables, missing semicolons, and more.

Auto Rename Tag

Auto Rename Tag is a fairly simple extension, but a big time saver. If you change the opening of an HTML tag, it will automatically update the closing tag. This ensures your tags always match.

Color Highlight

Color Highlight is a simple extension that will highlight colors in your code. This is great for quickly seeing what color a variable is set to, or if you are using the correct color in your CSS.

Auto Close Tag

Auto Close Tag is another simple extension that can save you time. It will automatically close HTML tags for you. So when you type <div>, it will automatically add the </div> to match.

CSS Peek

CSS Peek is a great extension for frontend developers. It allows you to quickly see the CSS for a given HTML element. This is great for when you are trying to figure out why a certain element is styled a certain way.

Live Server

Live Server is a VSCode extension that allows you to run a local server with live reload. This is great when initially learning web development with basic HTML, CSS, and JS files, as it will update your preview in real time!

If you are using a framework like Astro or React, this extension is unecessary. Your framework will have a similar feature built in for live reloading through an npm command.

Better Comments

Better Comments improves the comments for your code. It provides syntax highlighting for different types of comments, like the below picture shows.

Pretty TypeScript Errors

Pretty TypeScript Errors provides a more readable error message, and provides a link to the documentation for the error. I have fallen in love with this extension for TypeScript development.

Astro

Astro is an obvious extension if you are developing using Astro. It provides syntax highlighting, code snippets, and more.

Astro is my meta framework of choice for SSG and SSR, which allows you to use whatever UI framework you want within it (React, Vue, Solid, etc). I highly recommend it.