DEV Community


Top VS Code Extensions For Absolute Frontend Beginners

alesh profile image Lekan Alesh ・2 min read

Alt Text

Microsoft's Visual Studio Code (VS Code) is one of the best code editors out there. Not only does its intuitive user interface make coding a little less crazy for newbie developers, but it's also got a bunch of other functionalities that set it apart from among the stock. Awesome plug-ins being one of them. So, here are ten VS code plug-ins that'll make your coding experience as a beginner Front-end Developer really smooth.

1. Live HTML Previewer

Live HTML Previewer allows you to view your HTML/CSS codes live while getting your hands on the code editor. This will allow you have a real-time visual representation of whatever you're coding. And comes with the huge advantage of allowing you to inspect, edit or delete any section of the page you didn't like irrespective of the code behind it. After all, what matters most at this stage is whether you really can deliver basic design and development objectives.

2. Live Server

Live Server is an amazing VS code extension that makes the whole process of setting up a server really easy. Oftentimes, you'd want to test your dynamic and/or static web pages and the local development server that Live Server allows developers to run will always come in handy. What is more, it supports HTTPS, proxies and enables really powerful customizable features on your project.

3. Live SaaS Compiler

SaaS is often called "CSS with superpowers'' and while the debate of whether that title absolutely belongs to SaaS or not over yet on its own right, SaaS is an amazing tool to master. As a CSS preprocessor, SaaS helps you write better, cleaner CSS code. And the Live SaaS Compiler makes the process seamless for you. With this Live SaaS Compiler, you don't need to download/install nodejs or npm on your machine. It takes care of all the stress for you.

4. Better Comments

As a beginner, you'd probably want to keep notes, mark your To-do list and leave comments that'll help you make sense of your work environment. That's exactly what Better Comment does for you. Once installed, it helps you sort your HTML comments into categories for easy reference.

Like my picks? Let me know in the comment section below. Also, feel free to add your best VS Code extension to the list and why you love it.

Discussion (0)

Forem Open with the Forem app