~3 min read

Top 10 Essential VS Code Extensions

VS Code is awesome and boosts our development experience, but we can take advantage of its extensive list of extensions to support our workflow. Here are my top 10 suggested VS Code extensions that will make the lives of both new and veteran users easier.

1. Prettier

prettier-banner.png

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.

     

2. Better Comments

better-comments.png

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

better-comments-example.png

     

3. Error Lens

error-lens.png

Even before I can find errors myself, this awesome extension helps me identify potential bugs.

     

4. GitLens

gitlens.png

GitLens helps you better understand code. Quickly glance into who, 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.

gitlens.gif

     

5. Import Cost

import-cost.png

Using big packages may potentially increase our apps build size by adding more code than necessary. But thanks to this extension. It helps me to decide whether I should use the package or not based on its size. This is because it will show you inline in the editor how much space a particular imported package takes up so that you can better determine if such packages are worth including with your app build. It does this using webpack and babili-webpack-plugin behind the scenes

     

6. JSON to TS

jsontots.png

 

Self-explanatory. I absolutely love this extension. This saves a lot of development time when working with APIs.

jsontots.gif

     

7. Peacock

peacock.png

 

A handy tool to differentiate different window instances.

peacock.png

     

8. px to rem

pxtorem.png

 

rem is a way to add support for Accessibility to your website. This extension allows us to convert px to rem, and vice versa.

pxtorem.gif

     

9. Tailwind CSS IntelliSense

tailwindcss.png

 

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

autocomplete.png

     

10. Thunder Client

thunderclient.png

 

Lightweight yet fairly powerful rest client. This one is perfect as I am used to using Insomnia. Unfortunately, Insomnia it is getting bigger and bigger and doesn't serve the basic purpose of just rest and dirty rest testing.

thunder-client-tests.png