Best VS Code Extension For Web Developer (Part 1)

Introduction

In this article, I will show some of the best (must-have) vs-code extensions to have as a developer, these extensions can help simplify your coding career. The extensions listed here are for front-end developers though if you are a back-end or full-stack developer this extension can also serve you well. Each extension listed here is sorted randomly and not from good to least good.

The original source of this article can be found here.

What are Extensions

Extensions are code packages that run inside Visual Studio Code and provide new or improved features. Extensions may be controls, samples, templates, tools, or other components that add functionality to Visual Studio Code, for example, Live Share or Visual Studio IntelliCode.

In this part of this section, I will list only 10 extensions, maybe if I write another article (part 2) in the future then I will try and list more.

1. Auto Rename Tag 🔗

The first one on the list is the auto rename tag, this extension will make coding in HTML/XML more simplify just as the name says, it helps you rename the closing of any HTML/XML tags. here is the preview below.

vs-code-auto-rename-tag

2. ESLint 🔗

This extension Integrates ESLint JavaScript into VS Code, If you are new to ESLint check the documentation.

Eslint-vscode-extension

3. GitHub Markdown Preview 🔗

These extension changes the VS Code's built-in markdown preview to match GitHub markdown rendering in style and content.

github markdown preview vs-code extension

4. Dracula Official 🔗

Dracula official is a dark theme extension for Visual Studio Code.

dracula official extension for vs-code

5. JavaScript (ES6) code snippets 🔗

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

javascript (ES6) code snippets vs-code extension

6. Live Server 🔗

It enables you to right-click an HTML document and runs a server for you and opens a browser window with the file in it. Any changes you make to the file cause the browser to reload and you can immediately see them - hence "live server".

live server vs-code extension

7. Material Icon Theme 🔗

Material Design Icons for Visual Studio Code

material icon theme vs-code extension

8. Prettier - Code formatter 🔗

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

prefttier - code formatter vs-code extension

9. Thunder Client 🔗

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with a simple and clean design.

thunder client vs-code extension

10. XML Format 🔗

Format XML documents, without changing the content within elements. This extension uses a modified version of vkBeautify for XML formatting.

xml format vs-code extension

Conclusion

We have come to the end of this part of the article, I do believe that at least one of these extensions will benefit you in one way or the other. If you find this article worth sharing then do share it with your friends and colleague. Thanks for reading and have a nice day.

axxellanceblog