Hello readers, In this article, we will discuss the 10 best VS Code extensions you should use for web development. This is the list of extensions I use to get help during my coding time. If you don’t know what VS Code (Visual Studio Code) is and what are its features and many more, I recommend you to check out another article on the blog. If you want to download VS Code, then you can do that from the official website of VS Code.
VS Code is the most popular code editor out there, has huge community support, and has a huge library of extensions. These are just a few of that extensions. You can always browse more extensions from the marketplace. Now let’s start the list.
Contents
VS Code Extensions
Now let’s start the list of my personal favorite extensions, that you can also use in order to write code better and effectively.
Prettier
Prettier is the best extension that I have installed in my VS Code. As the name suggests, this extension enables us to format the code better than ever. This extension auto-organizes your code. Let’s say you have a code block that has uneven spacing, uneven tab spacings, etc. If you have prettier installed and configured in VS Code, your code will automatically be prettier. This extension works with almost all file types (e.g. HTML, CSS, JavaScript, JSX, etc). So, you won’t regret installing this extension in your VS Code.
Now, let’s compare codes without prettier and with Prettier so that you can know why it is useful for you.
Here without prettier, code is not that formatted, and looks unprofessional but now have a look at code with prettier.
You can see, with prettier, spacing, has been fixed and the code readability has increased.
Auto Close Tag
Auto Close Tag, as the name suggests, this extension auto closes your HTML tags. Let’s say you opened an HTML tag, then you will not need to close the tag yourself. This extension will automatically close the tag for you. In the first place, it may seem to be a little useless but believe me, you will fall in love with this extension once you start to use it. This extension supports all file types (HTML, JSX, JS, etc). This extension unknowingly increased your productivity as you can focus on more important things rather than just closing your HTML tags.
Auto Rename Tag
Auto Rename Tag is also an extension that will help you a lot. This extension simply renames the corresponding HTML tag whenever you rename the opening tag. This is one of the most helpful extensions. Believe me, once you start using this extension, you won’t be able to survive without this extension. Just Joking, but this extension drastically improves your productivity for sure. Thus, this extension is worth installing into your VS Code.
Tailwind CSS Intelligence
Tailwind CSS Intelligence extension is a life savior. If you work with tailwind CSS then, for sure you have trouble with all those utility classes. But, this official extension makes your life so much easier. This extension removes the burden of remembering the utility classes of tailwind CSS. I frequently use Tailwind in my projects, and since I installed this extension, I have just fallen in love with it. I suggest you install this extension if you use Tailwind CSS. And a pro tip, if you don’t use Tailwind, you should start to use it. It’s just awesome.
CodeSnap
As a developer, there may be so many conditions when you will need to share a particular piece of code with others. A traditional approach would be to just copy the code and send the text message, but if you want to be cool, you should use this extension. What if I tell you you can create a fancy code block image with just one click? CodeSnap is what this extension is meant for. With just a simple click you can create a snapshot of the code you want to share.
The following is an example of a snapshot created with this extension.
If you have ever wondered, how to create these types of snapshots, then this is the extension you should be looking forward to.
Live Server
Live Server extension is a must for everyone who writes HTML, CSS, and JavaScript. If you have ever used, a framework/ library like React, then you must be familiar with hot reloading and how awesome that is. If you want the same type of hot reloading in static HTML pages, then you can simply install this extension. With this extension, you can create a hot reloading server with just a simple click. So, if you want to reload the page as soon as you save the changes in your static files, then you should use this extension. And trust me you will fall in love with this extension.
GitLens
You may not find the use case of Gitlens extension if you are just starting out with development, but if you are a little experienced and you know how important it is to keep track of the commits made by you and the team members then you will find this extension to be a gift from the god. This extension keeps track of operations done in Git, who made commits, and what changes have been made, everything can be found here. So, if you use Git/ Github then you should definitely install this extension in your VS Code.
Thunderclient
So, if you create API, or work with API then you may be using some HTTP clients like Postman. But since Postman is a separate application, it can be a headache when you have a lot of windows, and tabs open during coding. So, what if you get all the benefits of Postman inside VS Code itself? This VS Code extension just does that. This is an HTTP client inside your VS Code. You can perform all types of operations you do with Postman. So, if you need an HTTP Client, go for Thunder Client.
ESLint
ESLint is the linter for JavaScript. If you are doing web development, there is no way out other than JavaScript. So, it is necessary to have a linter for JavaScript. This extension suggests you whenever you write code with an error and helps to fix it. Also, it provides some suggestions while writing code. Since you will be working with JavaScript almost all the time, it is like a compulsion to have a linter for JavaScript. This go for this VS Code extension.
Tabnine
Tabnine is a completely free AI tool for auto-complete. This extension uses AI to suggest you code and even predict your code. This is an alternative to Github Copilot. Believe me or not, since I installed this extension, the speed of writing code has increased a lot. And, more than 25% code the code I wrote was predicted by this extension. I don’t suggest this extension for those who are just starting out as it is necessary to learn by yourself. But once, you learn many things and you feel that you need to improve your productivity then you can install this extension.
So, these are my top 10 lists of VS Code extensions for web development. Moreover, I use other extensions too. They are as follows:
- Better Comments
- React Snippets
- JavaScript (ES6) Snippets
- Vim for VS Code
- VS-Code StyledComponents, etc.
If you like you can even check these VS Code extensions. This is my personal favorite list of vs code extensions.
