Axxellance blog logoAxxellanceBlog
Best VS Code Extension For Web Developer (Part 1)
  • vs-code

Best VS Code Extension For Web Developer (Part 1)

Michael ChukwuemekaWed, 27 Nov 2024 15:34:54 GMT 20

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.

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, Twitter, LinkedIn, GitHub, Medium, Facebook, and my blog's Facebook page.