Date:

Share:

Top 20 Best Visual Studio Code Extensions For Web Development

Related Articles

Visual studio code, without a doubt the best code editor to use at the present time. Due to the wide range of extensions and support from Microsoft this editor has been widely adopted.

Visual Studio code is built on top of Microsoft’s open source editor Monaco. This project gets around 14,000 stars on Github.

Visual studio code offers a wide range of extensions. Here’s how to install the plugin.

to press SHIFT + COMMAND (or Windows) + X Or just click on the visual studio code extension icon. Look for the plugin and click Install.

Visual Studio code extension 5

Here I list the 20 best code plugins from Visual Web Development Studio. The by-elections are my personal opinion.

1: Javascript (ES6) code snippets.

Needless to say, JavaScript is the core of web development. There are lots of code snippets that we have used on a daily basis and this plugin helps you by not writing the recurring code over and over again.

It provides code snippets of JavaScript, TypeScript, Vue, React and HTML. I personally believe this is a must-have extension for web development.

Link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

You can install it by searching for the name in the Expansion section of the visual studio code.

2: Live server

The Live Server plugin provides a live preview of your web application directly within the editor.

This is very useful and useful for front-end developers.

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
You can install it by searching for the name in the Expansion section of the visual studio code.

3: A peek at CSS

As its name implies, this extension allows you to jump to the CSS code using classes and IDs.

15 best extensions for visual studio code

Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

You can install it by searching for the name in the Expansion section of the visual studio code.

4: Automatic closing tag

This extension automatically adds the HTML and XML closing tag. Thank you later 🙂

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

You can install it by searching for the name in the Expansion section of the visual studio code.

5: REST customer

API testing and integration with the user interface are a huge part of web development. I’m sure you’ve done it so many times.

I have often used REST clients such as Postman to test my APIs. Using this plugin, we can test APIs and see their response directly in the visual studio code. Https://giphy.com/embed/Swr9ld1UnphiJkR7lS

Via GIPHY

Link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

You can install it by searching for the name in the Expansion section of the visual studio code.

6: Debugging for Chrome

This extension brought Chrome’s powerful debugger directly to the visual studio code.

This is very useful for frontline developers to perform the bug testing and debugging.

Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
You can install it by searching for the name in the Expansion section of the visual studio code.

7: ESLint

ESLint is a fluffy tool for JavaScript. It checks your code for common errors and notifies you in the editor itself. It’s like a virtual colleague verifying your code as you write it.

Visual Studio Code Extension 5 - eslint

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

You can install it by searching for the name in the Expansion section of the visual studio code.

Before installing ESLint in visual studio, install it as a global package first.npm install -g eslint

8: More Beautiful – Code Designer

This extension designs JavaScript, CSS, and HTML code.

Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

You can install it by searching for the name in the Expansion section of the visual studio code.

9: Path Intellisense

Importing code from other files is what everyone does on a daily basis. This extension speeds up development time by automatically completing file names.

You type the file name in the statements and it will search and give you suggestions.

Top 5 must have a Visual Studio code extension

Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

You can install it by searching for the name in the Expansion section of the visual studio code.

10: GitLens

We use Git almost every day of our lives. GitLens is a visual studio code plugin for loading git capabilities.

With GitLens, it’s so easy to see the code author, check the commitment number, view changes between the last commitment and existing changes, and so on.

Top 5 Visual Studio Code Extensions - gitlens

Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
You can install it by searching for the name in the Expansion section of the visual studio code.

11: Code time

This plugin keeps track of your development time and provides you with useful statistics like how many hours you have today’s code, etc.

It’s quite useful to follow and see the progress. It is not solely for web development, anyone can use this plugin.

Link: https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
You can install it by searching for the name in the Expansion section of the visual studio code.

12: Sync settings

I use another machine for my work and personal use. I use visual studio code on both machines, however, I do not want to repeat the same steps to configure the editor each time.

Logs in to sync settings extension. It creates and stores your configuration in Github extract and syncs anywhere you want. Simple and amazing!

Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
You can install it by searching for the name in the Expansion section of the visual studio code.

13: Folcode

Do you like a piece of code like this?

The 15 Best Code Add-ons for Visual Web Development Studio

So this extension is for you. We can use this plugin to create and share beautiful Polaroid code.

Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

You can install it by searching for the name in the Expansion section of the visual studio code.

14: Project Manager

Are you working on multiple projects and moving back and forth? I know yes and the project manager was a savior for managing multiple projects in visual studio code.

The top 5 must have a studio code extension - project manager

Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

You can install it by searching for the name in the Expansion section of the visual studio code.

15: GitHub Copilot

GitHub Copilot is an AI pair programmer that excels at giving clues which code snippets to use. It’s like being able to search StackOverflow right inside VS Code.

Some of the time, it gives some outrageous excerpts. This is because it is backed up by AI. But when it works (and often it works well), it’s magical.

Link: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

16: JavaScript Accelerator

I’m using this plugin to speed up my JavaScript development. It does not do much, but it does make it easier to recover any code. It can do things like:

  • Replace a string with a pattern string
  • Convert a named function to an arrow function
  • Convert an arrow function to a named function
  • In React, some things were wrapped in JSX parentheses
  • Utilities are more helpful

Link: https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

JavaScript accelerator

17: ESLint

This extension is an absolutely mandatory extension when working with VS code. This plugin catches so many errors that you can not even know if you made a mistake or not.

This is a great way to catch your own errors and it’s also a great way to enforce certain code rules when working in a team.

View in VS Code Marketplace

ESLint

18: EditorConfig

EditorConfig is an extension that helps enforce similar rules across Repo. For example, we might force our editor to always use 2 spaces instead of 4 spaces or tabs when working with JavaScript. This is especially helpful when you work with a team and you want to enforce a consistent code style throughout your team.

View in VS Code Marketplace

Editor configuration

19. Thunder customer

It’s like POSTman but inside VS Code and much faster. This will allow you to send HTTP requests to your servers and API and see the response.

View in VS Code Marketplace

Thunder customer

20. amVim

For Vim users out there, there are two main extensions of the VS code to insert vim bindings into the VS code. The first is amVim which is a vim plugin for VS Code. The other is Vim which is a vim plugin for VS Code.

I personally like the amVim extension because it is less invasive than the main Vim extension. Try both and see what works for your workflow.

View in VS Code Marketplace

amVim

Summary

If you like this article, please share it on social media to help spread the word. Thanks for reading!

We covered a lot of ground in this article and presented some of the best web developer extensions for Visual Studio Code. There are many more available in the VS Code Marketplace, so be sure to browse through the various categories and find some more developer tools to help you with your development efforts.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles