When starting with programming and specifically, web development can seem daunting or simple. Depending on who you ask, though. However, few tools make the journey a little easier.
PREREQUISITE
In this article today, we will be looking at the seven Visual Studio Code extensions every developer should have.
Before we get into the meat of the article, though, there are a few things you should already know before we get on the way. They are;
- Familiarity with HTML,
- Familiarity with CSS
- Basic JavaScript
- Familiarity with Visual Studio Code
The one thing that has never changed is that as time goes by and the deeper you get in the web development space, the more you realize that you need tools to help you achieve different things. For example, you might need tools to help with time management, code quality, testing, and spellchecking.
Visual Code Studio Code is an integrated development environment for developers made by Microsoft for Windows, macOS, and Linux. VS Code as it is popularly called helps developers write cleaner and more efficient code with its wide array of extensions and support for different programming languages.
TABLE CONTENT
Below are some of the basic extensions every developer should have installed on their local machine.
- Auto Rename Tag
- Prettier
- Bracket Pair Colorizer
- Live Server
- JavaScript ES6 Code Snippet
- Material Icon Theme
1. Auto Rename Tag
Starting with web development, the very first thing you will come across is HTML(If you followed the correct roadmap that is). Misnaming HTML elements will be inevitable at some point, just as much as you would like to change HTML tags you use too.
That is where Auto Rename Tag comes in. It helps you rename either the closing or opening tag. Those few precious seconds or minutes help you speed up your development time, and in the real world, that accounts for something.
Auto Rename Tag can be gotten here.
2. Prettier
JavaScript is often the first language that most web developers come across after HTML and CSS. At this stage, one of the things that become obvious is that formatting your code can sometimes skip your mind when engrossed with finishing your code and pushing your app to production and then end up having a poorly formatted codebase and ultimately a buggy product.
Prettier enables you to stop worrying about manually formatting your code. It can be set up easily with just a few clicks, and then all you have to do is configure your Visual Studio Code settings to format your code on save.
Prettier can be gotten here
3. Bracket Pair Colorizer
Writing CSS for me at the beginning of my web development learning curve was quite interesting due to my design background. However, as I started using SASS, one thing that became apparent was tracking which bracket belonged to which was becoming a headache with all the nesting of brackets that I was doing.
Enter Bracket Pair Colorizer. As the name indicates, the bracket pair colorizer helps developers track which bracket pair belongs to which by matching the opening and closing bracket with the same color, and trust me; you’ll need that when it comes to making your code more readable.
Bracket Pair Colorizer can be gotten here
4. Live Server
I remember the first time I made changes to my HTML code during my web development Bootcamp last year; the order was – make and edit changes to the code in VS Code and refresh the browser to see the changes. It became tedious and repetitive, and the one developers aim not to do is repeat themselves. DRY comes to mind here.
Live Server offers the ability to do a live browser reload to see the changes on your web app. Live Server is launched from a localhost server and gives the added advantage to see how your code works on a server as some code functionality can only be tested when running on a server. It also provides support for excluding some files from change detection.
Live Server can be gotten here
5. JavaScript ES6 Code Snippet
With JavaScript, you often have to write a lot of code but some of those code are quite popular amongst developers already and are used often enough that someone came up with the brilliant idea to provide code snippets. Why write it out in full when you could easily get snippets of the code needed?
That is what the JavaScript ES6 Code Snippet extension offers you. It provides you with code snippets from popular code used in modern JavaScript ES6 and TypeScript.
JavaScript code snippet supports the following file extensions;
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Html (.html)
- Vue (.vue)
JavaScript ES6 Code can be gotten here
6. Material Icon Theme
Last but not least, the Material Icon Theme. If you are a fan of identifying your folders and files just by looking at them, you are going to be a fan of this extension.
Material Icon Theme allows you to change the color and look of your file icon and folder icon in Visual Studio Code. With special commands, you can even go as far as making the icons look gray.
For example, using the code below, you can reduce the saturation of your file icons.
“material-icon-theme.saturation”: 0.5
Material Icon Theme can be gotten here
CONCLUSION
There are many other productivity and efficiency extensions out there, and you can very well download all of them if you want. Although why you would want to do that I don't know, but hey, whatever rocks your boat.
As a web developer, these are the basic VS Code extensions that you should have on your laptop to help you be productive and ensure you spend less time doing menial tasks, and have more time to focus on actually writing clean, efficient, and readable code.
There you have it.
Did you enjoy this article?
Is there an extension you feel should have made the list?
Do let me know in the comment section.