Don Aguinaldo
Visual Studio Code (VS Code) has emerged as a highly popular integrated development environment (IDE), offering a robust and flexible space for developers to weave their code. This article dives deep into how you can set up Visual Studio Code, ensuring it is customized to your liking, and enhancing your coding experience with a plethora of extensions and settings. When you're just getting into web development, these extensions can be time savers to ensure you enjoy your devleopment experience.
I won't go into too much detail about VS Code, but if you want to learn more about it then checkout one of my previous articles, What is Visual Studio Code? Just know its the preferred editor/IDE for most developers and my current tool to produce high quality websites. Let's take a look at some of my top extensions to enhance your development experience.
Extensions are basically plugins for your IDE to add specific desired functionalities to enhance your development in one single environment. Because of VS Codes open-source nature, many developers, whether they're companies like Microsoft or Google, or individuals, there are an abundance of extensions made by developers for developers. Here are is my list of what I think are the most useful ones, and some cosmetic ones, that you can use to be faster at writing your code.
Code Runner is one of the most popular extensions out there and it's obvious why. I think this goes without saying that most devs like you and me utilize this extension a lot. It helped me when I got started learning programming and I still use it today when I teach friends or want to try out small apps that I build.
With the correct configurations set up on your local machine, you can basically run any type of code whether its JavaScript, C++, Java, Pythong, etc. It's hands down one of the most useful ones out there, but the reason it's number 5 on my list is because I don't use it as much as I did back in college.
Once I picked JavaScript as my main language to learn, I didn't need the verstility it offered anymore. It is fun to mess with other languages every now and then though. If you're someone that needs to work with different languages in your day-to-day, then this is a very benficial extension for you.
Not many people know this, but RapidAPI created a REST client plugin for VS Code to test REST APIs. Most people are more familiar with tools like Postman or Insomnia, and if you know how to use those GUIs then you will feel right at home with this extension.
RapidAPI Client offers all the same features where you can test and manage all your API endpoints and their responses all within VS Code. This helps streamline my workdflow without ever leaving the editor, and sometimes I even have a second VS Code up just to test REST APIs!
This has been game changing for me as I often work with APIs in my projects. I've completely ditched Postman and Insomnia for this since it's so convenient! I encourage everyone to check this one out.
A plugin created directly from Microsoft. This plugin has saved me a lot time using other applications to manage and view all my Postgres database instances. You can easily see the data structure and relationships from this plugin and you can even run queries with intellisense to get tables of data.
All you have to do after adding this extension is create a connection profile to your chosen instance with your admin username and password, and boom, you're directly connected to your database and can start writing your queries. Your queried data then appears on another tab and you can then save that data in JSON, CSV, or Excel.
All of this in one code editor. I guess you can see the trend now? Your workflow can only get simpler from here!
There is also a MongoDB for VS Code plugin that's directly supported by MongoDB for those that like working with that database more.
It took me all these years to realize how important proper commenting is. After sifting through tens-of-thousands of lines of code and wanting to slam my head against the wall, I introduced this extension to my team and it made everything so much better.
Better Comments lets you categorize your comments for better readability and customization. Not only does it help in creating more human-friendly comments in your code, but it also allows you to style your comments, such as making them strikethrough or changing their color, to make them more noticeable and organized.
It has support for multiple languages so no matter what your team works with you're bound to find use for it in your projects. It just provides a better experience when you're looking for bugs or labeling things as important.
It's about the little things in life and I can't stress how much this little extension has sped my code writing up so much. This simple extension completes your HTML tag that you were writing by automatically writing the closing tag to it. I didn't think this was something that would be game changing, but this saves so much time when building something from scratch, or designing templates.
We as a developers are a lazy bunch, right? It couldn't get even more lazy than this, or can it?
If you want to talk about time saving, this one has drastically sped up my coding phase of projects. This extension was created by the same person who made Auto Close Tag, God bless your soul, and all it does is rename the other end of your HTML tags when you decide to change it.
Let's say you want to change a div to something more semantic. You don't have to go to the closing part of that tag anymore! It automatically renames it. I think these little features can be so impactful and I hope you can find these helpful as well.
Now my number one extension, Docker, developed by Microsoft themselves. This extension let's you see all your containers, images, and connects to the Docker Registry all from VS Code. If you're on Windows, you don't really need Docker Desktop since you can handle the main functions you would need Docker for in the sidebar of your IDE. Talk about time-saving!
This is incredibly useful when in conjuction with all the extensions combined, creating a really powerful and streamlined workflow all in VS Code. The extension provides a user-friendly interface, allowing developers to interact with Docker commands, manage Docker objects, and even debug applications running in containers, all from within the VS Code environment.
Now these aren't necessary and you can definitely be productive with the default look of VS Code, but if you want some different color and icon themes for your environment then check out some of my favorite themes below:
There you have it. Using these extensions you can speed up your development and be more productive as a developer! Remember to always keep your extensions up to date, and try out some third-party extensions to see if it can help out your workflow. I'm always open to new extensions so feel free to reach out to me to share your favorites.
If you want to start your developer journey now, checkout my article Create a Simple Quiz App With HTML, CSS, and JavaScript to learn the basics and create something fun while learning!
Godot is an open-source game engine that has all the necessary tools to create 2D and 3D games. It has an active community that are passionate about game development and I'm glad that I found such a tool that helps invoke my creative desires. I have been testing out this engine for weeks now and I thoroughly enjoy it.
Updated 1/15/2024
Godot is an open-source game engine that has all the necessary tools to create 2D and 3D games. It has an active community that are passionate about game development and I'm glad that I found such a tool that helps invoke my creative desires.
Updated 1/11/2024
Angular 17 has just released with a bunch of new features and redesign of the whole framework. Development experience for Angular devs couldn't have gotten any better! Let's take a look at the newly revamped framework.
Updated 11/8/2023