Best VSCode extensions for Web Developers



Visual Studio Code (VSCode) is one of the most popular code editor used by developers. 
Whether you are a full-time web developer working with large codebases or just someone who likes to create websites as a hobby, VSCode can be a great choice for your development needs.
That said, here are some extensions that will boost your productivity and give you a better experience while you code.


1. Live Server 


This is one of the best for web developers due to its immediate impact on productivity.




Make changes in code editor, switch to the browser, and refresh to see changes. Sounds familiar? That's the endless cycle of a web developer, but what if your browser would automatically refresh anytime you make changes and save? That's where Live Server comes in!Live server automatically refreshes the browser each time you make a change to your code and save it.

2. CSS Peek


Ever been in a situation where you have to toggle over each time to your .css file with 100+ lines of code and then searching for a class/id just to change the font-size or color? 
With CSS Peek, you can view a hover image of your css from within the html file.


You can also select a class/id in your HTML and press F12 to directly go to its definition in your CSS file!

3. Prettier 

Prettier is one of the best VS code extensions for modern-day web developers who need to follow a well-laid set of rules when designing their pages. 
With prettier, you can change code that looks like this


to this, 


and this is done automatically when you save. So, never worry about formatting again! 

4. JavaScript (ES6) Code Snippets

Being a web developer, you often work with various JavaScript frameworks. Regardless of what framework you use, typing the same generic codes in different projects ought to decrease your workflow.


The JavaScript ES6 code snippets is a handy extension that provides some very useful snippets of JavaScript code so that you don't have to type them each time.

5. Auto Rename Tag

Want to change a <h1> to a <h2> because it looks too big or just want to change any other element in your 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!

Bonus: Material Icon Theme

If you are a fan of Google's Material design or just someone who just likes to have nice looking file icons in your IDE, then this is for you. This extension gives you pretty awesome icons for your file list.



Comments

Post a Comment

Popular posts from this blog

Simple way to add Contact Forms on static websites (like Github pages)

Image
So lets say you've got yourself a static portfolio website (maybe on Github pages). Won't it be nice if you can add a nice "Contact me" form so that people can connect with you easier? But hey, "Github pages doesn't have any server side code or database so how am I gonna get form submissions", you ask.  Well, there's a really simple trick which I will be explaining here. The idea is to use Google forms but within the website (without any redirects). This will work on any static website, not only Github pages. So, let's get started. The first step is to make a simple HTML form Next step is to make a Google form with the SAME fields   Now, we need to know what google calls these fields. So make a pre-filled form, fill it with anything and grab the link.   Fill in any values and click on "Get pre-filled link" The copied link will look like this Now we need to use the entry fields from the pre-filled link into our html form. Using this, we
Read more