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.
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.
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.
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!
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.
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.
0 Comments