9 best VSCode extensions for web development that you need

Sahil Chandravanshi

I am a web3 developer and I am passionate about CyberSecurity

Also writes on Medium - medium.com/@sahilchandravanshi/

Steve Sorbe3y ago

Can you please tell me, which theme your are using?

Sahil Chandravanshi3y ago

Sure, it Saklash Theme https://saklash-theme.netlify.app/

sail cih3y ago

Gonna use live server for sure

Rena Rix3y ago

This article is very helpful. Definitely going to try these.

Sahil Chandravanshi3y ago

😄

Jennie D Souza3y ago

Image preview is a life saver. Thanks for this compilation. Will use this definitely.

Sahil Chandravanshi3y ago

Pleasure to hear that!

srinath kadam3y ago

life just got easier! 😄auto rename tag and thunder client are my favorites so far. Would like to know if we can use live server for react projects

Sahil Chandravanshi3y ago

NO, it only works for html or htm files.

You don't need to use it for react. When you start the react app on localhost it behaves like live server extension.

Quick TIp: if you want to see live changes, just enable auto save in vscode settings. Hope, it helps!😄

srinath kadam3y ago

Sahil Chandravanshi oh thanks a ton!

SmogCoding3y ago

Thank you so much for these top extensions. I will be adding the useful one to my VScode editor, which I just downloaded. Thank you!!

Sahil Chandravanshi3y ago

Hope it will help in you in your journey.

SmogCoding3y ago

Sahil Chandravanshi They have been :) !

SmogCoding3y ago

I will be using these definitely on my developer journey. Thank you!

Sahil Chandravanshi3y ago

Sure. Most welcome😄

Priyankar Pal3y ago

Markdown Preview Enhanced is an amazing extension. You can see the output of .md files in VS Code.

Sahil Chandravanshi3y ago

You don't need an extension for that, VSCode has this feature built in.

Priyankar Pal3y ago

Sahil Chandravanshi Thanks. I didn't know about this. I googled and found it.

ctrl+shift+v

sak Lash3y ago

Thunder client saved a lot of time , it's faster and also there is no need to install postman anymore

Tahik Berg3y ago

bookmarked it ❤️

I create and secure things that live on internet. Also writes on medium.com/@sahilchandravanshi/

Why extensions?

Visual Studio Code is widely used nowadays and there are a lot of contributors that create useful extensions for it, to give this editor superpowers. . With these tools, you may significantly accelerate your development and enhance teamwork.

Here are my top extensions that you should try in Vs Code:

🌟 Saklash Web Pack

You can install Saklash Web Pack to install all Web Dev essentials at once which are mentioned in this article or you can download them one by one.

1. ES7+ React/Redux/React-Native snippets

It provides many shorthand prefixes to accelerate development and help developers create code snippets and syntax for React, Redux, GraphQL, and React Native.

ES7+ React/Redux/React-Native snippets

2. ESLint

It is the linting utility for JavaScript. ESLint is used to find errors and bugs in the code and it lets you know in the editor itself. It also supports custom configuration, so you can define your custom validation rules for your projects.

ESLint

3. Live server

Live Server spins up a light nodejs server and serves your HTML file and all assets from the given directory. On top of that, any saved changes you make to your website will be reflected immediately in the browser, which gives a really fast and enjoyable developer experience.

Live Server

4. Auto Rename Tag

This is a must-have extension for web developers. As the name suggests, it automatically renames the second tag if the first one is modified and vice versa. And the great thing is that it works with JSX so you can use it with React too!

Auto Rename Tag

5. Prettier

Prettier is an opinionated code formatter, which you can set up according to your preferences. It enforces consistent style by parsing your code and reprinting it with its rules that take the maximum line into account and wraps the code if necessary.

Prettier

6. npm Intellisense

This provides autocomplete for npm modules in import statements i.e. introduces autocomplete behavior when you use require() to import modules into your code.