10 VS Code Extensions I Couldn’t Live Without
Tags: programming, javascript, react, roadtodotnetfullstack
Published: 2023-01-19 19:12:23

---
title: 10 VS Code Extensions I Couldn’t Live Without
published: true
date: 2023-01-19 19:12:07 UTC
tags: Programming,javascript,react,roadtodotnetfullstack
canonical_url: https://www.codejourney.net/10-vs-code-extensions-i-couldnt-live-without/
---

I love VS Code 😍 There’s no better web code editor out there for me. Today, I’m going to share with you the 10 VS Code extensions that make my life easier. I can’t imagine coding without them. Let’s dive into it!

## 1. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

My number one. I was a bit skeptical initially, but today I can’t imagine my life without Prettier 😀 For those unfamiliar with the tool, Prettier is an _opinionated_ code formatted. Opinionated, because it allows for almost no configuration. It reformats your code automatically based on its own rules.

It may sound scary and limiting, but it really frees your mind. Suddenly you forget about all those _spaces vs tabs wars_ and discussions on which column shall the code be wrapped. Prettier does that all automatically. It can even be done on saving the file! If you haven't yet, you should definitely give Prettier a try.

It is also very easy to [execute prettier formatting with pre-commit git hook](https://prettier.io/docs/en/precommit.html), so the checked-in code is always formatted, even if some team members don’t use it in their IDE.

Never again without Prettier! 🙂

## 2. [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

This is one of the first VS Code extensions I installed. It’s simple, yet very powerful! This plugin adds multiple JavaScript/React snippets. I create many new components every day. Snippets make it very easy:

![One of the VS Code extensions that adds React snippets](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/2_VSCode_React_snippets.gif?resize=932%2C487&ssl=1)

I recommend trying this extension out and exploring its built-in snippets.

## 3. [C# to TypeScript](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.csharp-to-typescript)

This one is a time-saver for .NET developers working with TypeScript. It allows generating TypeScript interfaces from C# classes. You can simply copy a C# `class` and paste is as a TypeScript’s `interface` in Visual Studio Code:

![Copying C# code to TypeScript](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/3_VSCode_CSharp_to_TypeScript-1.gif?resize=1005%2C431&ssl=1)

You can also paste using keyboard shortcuts. There’s even [a CLI tool](https://www.nuget.org/packages/CSharpToTypeScript.CLITool/) available in case you’d want to automate this process. This extension doesn’t support all scenarios (especially no support for `records` 😭), but it still covers most simple copy-paste cases. By the way, synchronizing C# with TypeScript types is one of the challenges for full stack .NET developers.

## 4. [Total TypeScript](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator)

From all VS Code extensions I use, this is the only one that actually helps me learn on the job. It was called _TypeScript Error Translator_ before, and this is what I initially used it for. It basically provides more meaningful, crowdsourced translations for often enigmatic TypeScript errors:

![TypeScript error translator shows nice explanation of TS error](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/4_VSCode_ErrorsTranslator.png?resize=821%2C280&ssl=1)

When a translation is missing, you can always contribute one. Additionally, as its new name suggests, it also lets you learn programming concepts directly inside your code. As soon as it finds a new concept in the code, a brief explanation is shown:

![Total Typescript extension shows new TS concepts explanations in VS Code](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/5_VSCode_TotalTypescriptLearning.png?resize=1024%2C485&ssl=1)

It will stop highlighting this particular type of concept as soon as you mark it as learned. I think it’s a quite interesting way of learning on the job 😉

## 5. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This is the extension for integrating the most well-known linter for JavaScript into Visual Studio Code. [ESLint](https://eslint.org/) is a static analyzer of your source code which helps you find problems quickly. It will highlight issues in your code for all loaded files from your workspace. I don’t feel there’s much to write about here – just [check their website](https://eslint.org/) and give this extension a try 😉

## 6. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Thunder Client is like [Postman](https://www.postman.com/), but built into VS Code. It lets you easily play with HTTP APIs. You can create your own collections of requests and export them to JSON, which can be checked into the source control.

Yet another very useful extension! 👍

## 7. [Preview.js](https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs)

This is one of my recent discoveries. Preview.js allows to live-preview React, Solid or Vue components directly in VS Code. It also generates the initial props data, sometimes even for complex objects:

![PreviewJS working in VS Code](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/6_VSCode_PreviewJS-2.gif?resize=1140%2C593&ssl=1)

The plugin is also configurable for custom scenarios like external dependencies. You can find more information [in the documentation](https://previewjs.com/docs/config).

## 8. [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

If you like analytics, you should check this VS Code extension. WakaTime measures how much time you spend actually writing code. It shows exactly in which language you programmed for how much time. It also divides time entries into projects you worked on:

![WakaTime sample statistics](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/7_WakaTime_SampleStats.png?resize=1140%2C1018&ssl=1)

It’s interesting to get such insights “for free” and see how little time we spend _actually_ coding 😀 Try it for yourself and let me know your results!

## 9. [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

Who never started a new project by installing fancy tools, text editors or choosing the best color theme for your IDE? 😄 Of course – good colors = smooth -and pleasant – coding 😎 One Dark Pro is a must-have theme for my Visual Studio Code. I love it, it makes source code much more readable for me. What’s your favorite color theme for VS Code? 😉

## 10. [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

Last but not least, a good friend to the One Dard Pro theme, legendary VS Code icons set. It has over 13M installs! 🤯

Apart from getting +100 fanciness 😉, it makes icons more explicit in the explorer:

![vscode-icons - icons examples in VS Code explorer](https://i0.wp.com/www.codejourney.net/wp-content/uploads/2023/01/8_VSCodeIcons.png?resize=599%2C612&ssl=1)

As you can see, it even guesses the folder type based on its name – see `types` or `utils` folders’ icons above.

Not critical, yet helpful. Undeniably adds a million to your professionalism as a web developer 😎😎😎

## Summary

So, that’s it! The list of my 10 favorite Visual Studio Code extensions.

What about you? What are your must-have VS Code extensions? 😉