VS Code extensions to increase productivity

3 mins read

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


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


Next Read


Getting started with Frontend learning, going online and seeing a lot of resources for web development can be so overwhelming that one might not
4 mins read
There are many definitions of web development, but basically it is the process of creating websites and apps for the internet or a private network
6 mins read
Hi I’m Ewomazino Edegbo, welcome to my portfolio website and blog!  I decided to create this space in order to reach out to as many people as
< 1 min read