Vipin 19 June 2020 VS Code, Frontend developer, Editor Tools

My Top VS Code Extensions for front end Developers

Blog image


Live Server

Make changes in code editor, switch to browser, and refresh to see changes. That's the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes?

That's where Live Server comes in! It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.


Bracket Pair Colorizor

Brackets are the bane of a developer's existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable. Trust me, you want this!


Auto Rename Tag

Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!


Material Icon Theme

Fan of Google's Material design? Then, check out this Material themed icon pack. There's hundreds of different icons and they are pretty awesome looking!


Prettier

DONT spend time formatting your code...just DONT. There's no need to. Ealier, I mentioned ESLint which provides formatting and linting. If you don't need the linting part, then go with Prettier. It's super easy to setup and can be configured to formatted your code automatically on save. Never worry about formatting again!


Highlight Matching Tag

It’s a brief enhancement of the functionality that already comes with VS Code, that is the ability to highlight matching opening or closing tags in HTML and JSX. However, this extension is a bit sleeker and is more configurable than the one that comes out of the box with VS Code.

It’s very minimalistic but definitely worth mentioning.