In this post, I’ll provide several visual studio code extensions that can help you be more productive as a front-end web developer. You don’t necessary need all of them because some are framework-specific, such as vetur, so if you don’t use Vue Js, you won’t need to install vetur, but I believe the first six are crucial. 

Prettier 

Prettier is an opinionated code formatter that supports a lot of different programming languages, in order words prettier helps to format your code which improves code readability and makes the coding style consistent for teams. 

Auto Rename Tag 

Auto Rename Tag helps you to change the name of the corresponding tag when you change either the opening or closing tag. Let’s say you have a <div> and you decide to change it to a <section>, you don’t have to change the closing tag because this extension would automatically update it. 

Live Server 

This help to startup a dev server so changes you make once saved would reflect on the browser without reloading. 

Live Share 

This helps in collaboration so you can work on a project together with someone or perhaps you are struggling with an error, this would help the person view your code Realtime and help debug and potentially resolve it  

GitLens — Git supercharged 

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase. 

RapidAPI Client 

RapidAPI Client is a full-featured HTTP client that lets you test and describes the APIs you build or consume. You can compose requests, inspect server responses, generate client code, and export API definitions from our interface without ever switching context to another application. Beyond being a fantastic stand-alone client in VS Code, this extension establishes a bidirectional link between VS Code and RapidAPI so that users with an existing RapidAPI.com or Paw user account can log in and sync existing projects automatically. 

Better Comments 

The Better Comments extension will help you create more human-friendly comments in your code. 
With this extension, you will be able to categorise your annotations into: 

• Alerts 
• Queries 
• TODOs 
• Highlights 
• Commented out code can also be styled to make it clear the code shouldn’t be there 
• Any other comment styles you’d like can be specified in the settings 

ES7+ React/Redux/React-Native snippets   

This extension provides you React/Redux snippets in ES7 with Babel plugin features for VS Code. Which are very useful especially for initializing a react component, I use ‘rafce’ command most which creates a react arrow function component with default export at the bottom. 

Vetur 

Working with Vue JS? This is the one extension you need, it provides the following features 

• Syntax-highlighting 
• Semantic-highlighting 
• Snippet 
• Emmet 
• Linting / Error Checking 
• Formatting 
• IntelliSense 
• Debugging 
• Component Data.

Tailwind CSS IntelliSense 

Working with tailwind? This is the one extension you need, It provides the following features 

• AutoComplete class names 
• Linting / Error Checking 
• Hover preview: Preview the CSS of each tailwind class name 

Wallaby.js 

Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code.