# Top VSCode Extensions to Boost Your Productivity

In this article we will look at a few simple VSCode plugins that can help boost your productivity while working on projects. Let's dive right in!

---

# Turbo Console Log

This plugin simplifies debugging by automating the process of producing relevant log messages.

Two steps:

1. Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)

2. Pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac)

The log message will be inserted in the next line relative to the selected variable like this:

---

# Indent Rainbow

This addon colorsizes the indentation in front of your text by rotating between four distinct colour at each step. This makes easier to work with nested codeblocks.

---

# Gitlens

GitLens enhances your VS Code Git experience. Maintaining concentration is essential; extra time spent moving contexts or missing context breaks your flow. GitLens is the ultimate tool for making Git work for you. It is meant to increase concentration, productivity, and cooperation by providing you and your team with a comprehensive collection of tools to assist you and your team better understand, develop, and review code.

---

# Prettier

Prettier is a code formatting tool. It ensures consistency by parsing your code and re-printing it using its own rules that take into consideration the maximum line length, encapsulating code where necessary.

---

# ESLint

The workspace folder that was opened contains the ESLint library, which is used by the extension. The extension checks for a global install version if the folder does not offer one. Run npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install if you haven't already installed ESLint locally or globally.

---

# CodeSnap

This plugin helps take snapshot images of the code in your VSCode editor. You can customize the image and export it to share on social media or anywhere you like.

---

# Image Preview

This extension shows image preview in the gutter and on hover. It is super useful to see a preview of an image that you are using in the project without leaving the code file you are editing.

---

# Import Cost

This extension will display inline in the editor the size of the imported package. It is super useful to keep the bundle size in check while developing the application as you can proactively see the package sizes in your editor.

---

# Edit CSV

This extensions allows you to edit CSV files directly in the VSCode editor, you have a rich UI where you can add, delete or update data as you need in a CSV file.

---

# Auto Rename Tag

Auto Rename Tag automatically rename paired HTML/XML tag, making it easier to keep opening and closing tags in sync.

---

# Random Everything

This VS Code extension generates random ints, floats, strings, words, etc. in case you need to populate sensible random data during development of your application.

---

# Auto Open Markdown

This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. It also shows live preview of the markdown file as you are updating it, making it super easy to see how the file will look at the end.

---

# Code Spell Checker

As the name suggests this is a basic spell checker for you to write the correct spelling in your code for functions & variables.

---

# TODO Tree

This extension scans your workspace for TODO and FIXME comment tags and presents them in a tree style in the activity bar.