Top 10 VS Code Extensions to boost your Productivity in 2023
Tags: productivity, vscode, ai, beginners
Published: 2023-01-25 11:02:11

## Table of contents
  - [Introduction](#introduction)
  - [1. Bito AI](#1-bito-ai)
  - [2. Bookmarks](#2-bookmarks)
  - [3. Code Spell Checker](#3-code-spell-checker)
  - [4. Better Comments](#4-better-comments)
  - [5. PolaCode](#5-polacode)
  - [6. Prettier](#6-prettier)
  - [7. Quokka](#7-quokka)
  - [8. change-case](#8-change-case)
  - [9. Code Runner](#9-code-runner)
  - [10. Color highlight](#10-color-highlight)
  - [Conclusion](#conclusion)

## Introduction

Hey, everyone, 👋. Hope you all are doing great. I have been using VS code for over two years and have discovered a lot of amazing extensions that can save you a significant amount of time and increase your productivity. This article will give you a list of 10 code extensions, which will boost your developer productivity. So without any further delay, let's begin.

---

## 1. [Bito AI](https://bito.co)

You are all aware of ChatGPT's effectiveness. We visit ChatGPT's website and gain anything from it. But what if ChatGPT could be added directly to your code editor? Bito AI is exactly this. It uses ChatGPT under the hood to generate code, fix bugs, writing test cases, code comment generation, code explanation and a lot more. They recently added a bunch of shortcut options, and keyboard shortcuts. They have also done a lot around prompt engineering to get you the best answer with no work on your part. In general, It is ChatGPT but specifically for coding purposes. I started using it recently and been loving it!

![Bito AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzx7ixy4qcav258yyzbh.jpg)

## 2. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

I often forget to review a specific portion of code before pushing it to production. I was able to eliminate the mistake by using this extension.

![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3kde391ij048ug5cflu.png)

## 3. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

If you make a spelling mistake in your code, this extension will warn you. I no longer make common spelling mistakes because of this extension.

![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgqt8s51mhh1yge5g5cj.gif)

## 4. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

Comments are essential for clean, well-maintained code. This extension will help you create more human-friendly comments in your code.

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcwuwtuzlp0qwj9z47qx.png)

## 5. [PolaCode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

We developers frequently seek help from other developers. We must share our code with others while asking for help. This extension will capture nice code snaps. So, you will be able to download them and share them to others.

![PolaCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qukqbvgx4eaoz3sehvj.gif)

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

Prettier is an opinionated code formatter. It will help you maintain consistent formatting throughout your code. Whenever you save your file, it will automatically format your unformatted code.

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bhbjcpxwi1xv4lp18kq.gif)

## 7. [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

When I am playing with JS, I don't use the browser console or node REPL. I rather use this VSC extension to make this process faster and more fun. Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping.

![Quokka](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx40jthdni631z8zgpgz.gif)

## 8. [Change Case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

Convert words quickly between different naming conventions of the current selection or word.

![change-case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh9ewp5jyp6zlu32ql4o.gif)

## 9. [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

Run your code instantly with just one click. No need to write commands. I use this extension while working with C/C++.

![Code Runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcaahv3j8roza2hk2vlm.gif)

## 10. [Color highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

This extension styles css/web colors found in your document. It comes really handy while editing my tailwind css theme config. ABSOLUTELY nuts!

![Color highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1s00su36h5gf72bev39.jpg)

---

## Conclusion

That's all for now. Hope you got value from this article. If you did, make sure you like it. I will publish a thread version of this article on my [Twitter](https://twitter.com/developeratul) account. So, make sure you stay tuned. Thank you so much for reading and I will see in the next one. ✌️

## Follow me on socials 🌐

### 👤 Minhazur Rahman Ratul

- Twitter ([@developeratul](https://twitter.com/developeratul))
- Github ([@developeratul](http://github.com/developeratul))