7-must-have-vscode-extension
Others Web Development

7 Must Have VSCode Extensions for Web Developers

Visual Studio is arguably the best and most popular code editing up to date. But what makes the VSCode even more powerful is the abundant of extension in the marketplace.  So in this post, I’m going to show you 7 must have VScode extension for web developers that will make your life a whole lot easier and more productive!

Javascript Code snippets

7-must-have-vscode-extension-1

If you’re not a fan of remembering a JavaScript syntax, you will love this. JavaScript Code Snippets is an extension that will provide all you need snippet while coding. For example, if I type for, I’ll get a full list of for loop types. All you have to do is just select it and it’s done. The only downside is you will be spoiled and prolonged used probably make you code slower without this extension.

Bracket Pair Colorizer

7-must-have-vscode-extension-2

This extension will colorize all the brackets on your code Make it much easier to read with an additional scope line to prevent confusion in a very complicated code. You can also customize a your own color set to be used to match your theme.

Auto Rename Tag

7-must-have-vscode-extension-3

This extension features a very simple yet awesome. when you rename any HTML or XML tag, it will automatically rename the it’s pair tag. Just install the extension and you’re good to go.

Code Spell Checker

7-must-have-vscode-extension-4

Readability is one of the best practice for coding so leaving comment and good variable naming is recommended. Code spell checker is an extension to help you with this by detecting common spelling errors on your code. It validates all words against dictionary and give a note for those are not found. This extension works well with camel case naming too.

Live Server

7-must-have-vscode-extension-5

I personally in love with this one. If you’re working on a web project that have multiple root folder or just want a quick launch for a test server, Having Live server is a must. With one click it will automatically launch a server instance for your page and a browser. The coolest feature is it will do live browser reload every time you make the change to the code.

IntelliSense for CSS Class Names in HTML

7-must-have-vscode-extension-6

The name is pretty straightforward. This extension will provide suggestion for all HTML classes defined in your workspace including the external CSS files referenced with link tag. With this, now you don’t have to switch between HTML and CSS to lookup the class name when you can’t remember it anymore!

Prettier

7-must-have-vscode-extension-7

Prettier is one of the best code formatter for VSCode. It supports various file types such as JavaScript, CSS, Sass, HTML, Angular and more! You can choose to format the entire document or just only the selection. Prettier allows in depth customization such as tab width, always put the bracket on a new line, use single quote instead of double and more!

See a quick demo for all of them in this video!

So that’s all for this post. Let me know in the comment which extension that you like the most or if there are any others you want to share. Also don’t forget to subscribe our Youtube Channel or follow us on Facebook to stay tune for more. Bye 🙂

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *