7 VS Code Extensions That Make You Want To Keep Coding Forever

AaBb

What separates a great developer from a good developer are the tools that get used. Having the right tools for the job can make your life as a developer so much easier.

This is no different for the IDE you’re using. A lot of developers use Visual Studio Code as their IDE of choice, which allows you to install extensions. There’s no limit when it comes to the variety of extensions.

Since there are too many extensions available on the Visual Studio Marketplace for you to possibly know, we’ll go over 7 extensions that will make writing code seem effortless.

Even the simplest tools can empower people to do great things — Biz Stone

Note that all these plugins are available on the Visual Studio Marketplace for free.

1. REST Client

The REST Client extension allows you to send HTTP requests and view the response in Visual Studio Code directly. Say goodbye to external applications that you would otherwise use to send an HTTP request to a server.

With over a million installs this is an extremely popular extension that gets used by many developers. I’ve used this plugin by myself for quite some time and I think it’s great.

Sending a request has never been this easy. The syntax is really clean and there are plenty of options that you could utilize to fit your needs. All that’s needed for a simple GET request is a single line of code that has the GET keyword followed by the URL.

Really, you should give the REST Client extension a try.

Image for post

2. CSS Peek

If you’re a web developer CSS Peek is an absolute must. This extension allows you to peek at CSS rules that are applied to a certain element in your HTML just by hovering over the class name or the ID of the element.

Take a look at the image below, which will show you exactly what this extension does.

Image for post

But this extension does more than just allowing you to take a look at the styling. The extension also has a “Go to” feature which allows you to instantly jump to the CSS rules that are applied to the element. This saves you so much time looking for the right selectors.

3. Beautify

If you like clean code than you’ll definitely like Beautify. This extension helps you get your code on point. Beautify supports JavaScript, HTML, CSS, Sass, and JSON.

The best part about this extension is that all of the options are fully customizable — like indent size and if files should end with a new line. If you write code in several programming languages Beautify has got you covered. It’s possible to customize the options per programming language.

With over 5 million downloads this extension is in the top 20 of most installed extensions.

4. Auto Rename Tag

What the Auto Rename Tag extension does is simple, yet so nice to have. This extension automatically renames paired HTML tags. If you are renaming an opening tag it will change the corresponding closing tag. And vice versa.

If you want to automatically add the closing tag when typing in the closing bracket of the opening tag, you should take a look at the Auto Close Tag extension. Having both of these extensions installed is very powerful and will help you write HTML in a way more efficient and consistent way.

Image for post

5. Quokka.js

Quokka.js is a prototyping playground in your editor, with access to your project’s files, inline reporting, and more. Values in your code are updated at runtime and displayed in your IDE next to your code, as you type.

Simply awesome!

Image for post

6. Night Owl

What is optimizing VS Code worth without a stunning theme? Not much, right?! Since you spend so much time in VS Code you better make it good looking by installing a theme.

One of the pretty themes that get used by a lot of developers is the Night Owl theme. According to the description of this theme its fine-tuned for those of us who like to code late into the night.

Image for post

If you don’t like the Night Owl theme, don’t worry. I’ve written an article where I go over the prettiest themes for VS code.

7. JavaScript (ES6) code snippets

The last extension on this list that we’re going over is the JavaScript (ES6) code snippets extension. This extension has a dozen snippets you could use to let it generate ES6 code snippets for you.

For example, typing clg and then hitting enter will result in a console.log. It might take a while to get familiar with all the possible snippets, but once you’ve mastered it you’ll be able to type ES6 really fast.

Written by Haroon

Full Stack WordPress developer with 4 years of experience. Developing Top-Notch websites is my hobby and l am looking forward to boosting your business by making an eye-catching website with SEO. I don't just deliver the gig but I am also more than willing to share my knowledge with you so that you can manage your new WordPress website all by yourself without the need to pay anyone. Contact me to check my portfolio and I am sure you would be added to the list of my happy clients.

Comments

0 Comments

Submit a Comment

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

Blog

Related Post

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.