Best VS Code Extension For Web Developer (Part 1)
Published: 2023-05-17 14:33:00

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](https://axxellanceblog.com/posts/best-vscode-extension-for-developer-part1).

### 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 [🔗](https://marketplace.visualstudio.com/items?itemName=formulahendry.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](https://directus.axxellanceblog.com/assets/4e097a8a-d205-450a-94c5-431d28ae63d7?width=1366&height=439)

### 2\. ESLint [🔗](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This extension Integrates ESLint JavaScript into VS Code, If you are new to ESLint check the [documentation](http://eslint.org/).

![Eslint-vscode-extension](https://directus.axxellanceblog.com/assets/e1c5b473-cf92-48aa-bae1-300b82a2df81?width=1366&height=430)

### 3\. GitHub Markdown Preview [🔗](https://marketplace.visualstudio.com/items?itemName=bierner.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](https://directus.axxellanceblog.com/assets/be79e1ce-82aa-410f-b946-0ef45e77a3d1?width=1365&height=473)

### 4\. Dracula Official [🔗](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)

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

![dracula official extension for vs-code](https://directus.axxellanceblog.com/assets/54375c7e-a4b8-4767-ac8b-75b0e96e23a9?width=1365&height=495)

### 5\. JavaScript (ES6) code snippets [🔗](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

This extension contains code snippets for JavaScript in ES6 syntax for [Vs Code](https://code.visualstudio.com/) editor (supports both JavaScript and TypeScript).

![javascript (ES6) code snippets vs-code extension](https://directus.axxellanceblog.com/assets/b96de6ea-0ede-4b82-8ebf-88d126b1a2f5?width=1366&height=481)

### 6\. Live Server [🔗](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

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](https://directus.axxellanceblog.com/assets/7b773f83-cc98-47fd-b4f9-dccb166c3e74?width=1366&height=501)

### 7\. Material Icon Theme [🔗](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Material Design Icons for Visual Studio Code

![material icon theme vs-code extension](https://directus.axxellanceblog.com/assets/7d2414cb-1cc9-41f2-a81b-e57e4d5f4d7d?width=1366&height=515)

### 8\. Prettier - Code formatter [🔗](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

[Prettier](https://prettier.io/) 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](https://directus.axxellanceblog.com/assets/387b3dc7-d358-4e2b-966f-a2eb1f19b868?width=1366&height=499)

### 9\. Thunder Client [🔗](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by [Ranga Vadhineni](https://twitter.com/ranga_vadhineni) with a simple and clean design.

![thunder client vs-code extension](https://directus.axxellanceblog.com/assets/fe9eb361-d901-4d17-8784-27e967d8e15a?width=1366&height=519)

### 10\. XML Format [🔗](https://marketplace.visualstudio.com/items?itemName=mikeburgh.xml-format)

Format XML documents, without changing the content within elements. This extension uses a modified version of [vkBeautify](https://github.com/vkiryukhin/vkBeautify) for XML formatting.

![xml format vs-code extension](https://directus.axxellanceblog.com/assets/85e699da-3932-4c2b-a7e2-3e4506d46c32?width=1366&height=495)

### 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.

### Follow ME

Hey there! If you're interested in tech or programming articles, you should definitely give me a follow on any of the social media platforms below. I regularly post articles related to tech and programming, and I share valuable resources and insights. Plus, by following me, you'll be able to stay up to date on all the latest and greatest in the world of tech and programming. So, what do you say? Will you give me a follow?

Follow me on [Dev.to](https://dev.to/emeka212), [Twitter](https://twitter.com/mc_stephen123), [LinkedIn](https://www.linkedin.com/in/chukwuemeka-michael-a44301175/), [GitHub](https://github.com/Emeka212), [Medium](https://medium.com/@mc-stephen), [Facebook](https://www.facebook.com/axxellance/), and my blog's [Facebook page](https://www.facebook.com/profile.php?id=100083784692436).