10 VS Code Extensions To Boost Your Productivity

Do you want to become coding ninja? 🥷🏼

Look no further!

---

Extensions that we will explore today ⬇️

1. Bookmarks -> 3,6M downloads
2. Turbo Console Log -> 1,2M downloads
3. CodeSnap -> 2,1M downloads
4. Code Spell Checker -> 10,6M downloads
5. Error Lens -> 4,1M downloads
6. Better Comments -> 6,8M downloads
7. Auto Close Tag -> 12,8M downloads
8. Auto Rename Tag -> 18,2M downloads
9. Bracket Pair Colorizer -> 1,1M downloads
10. Import cost -> 3,8M downloads

Let's dive into the functionality of each of these VS Code extensions.

---

1. Bookmarks 📝

It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code.

Here are some of the features that Bookmarks provides:

• Mark/unmark positions in your code
• Mark positions in your code and give it name
• Jump forward and backward between bookmarks
• Icons in gutter and overview ruler
• See a list of all Bookmarks in one file and project
• Select lines and regions with bookmarks
• A dedicated Side Bar

When you bookmark some line of code, it will be highlighted with bookmark blue icon.

2. Turbo Console Log 🥷🏼

Turbo Console Log extension makes debugging much easier by automating the operation of writing meaningful log message.

The log message will be inserted in the next line relative to the selected variabe.

By selecting variable you want to console log and using combination of CTRL + ALT + L it will automatically add console log with meaningful log name of it for you.

Example:

console.log('🚀 ~ classWrappingVariable ~ functionWrappingVariable ~ variable', variable);

3. CodeSnap

📸 Take beautiful screenshots of your code in VS Code!

4. Code Spell Checker 🔍

A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

5. Error Lens 🚨

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Features

• Highlight lines containing diagnostics
• Append diagnostic as text to the end of the line
• Show icons in gutter
• Show message in status bar

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

7. Auto Close Tag ✍️

This extension automatically adds closing HTML/XML tags as you type.

For example, if you type <div>, it automatically adds </div> right after you type the opening angle bracket. This saves you the hassle of manually typing out the closing tag, making your coding process more efficient.

8. Auto Rename Tag ✍️

This extension simplifies the process of renaming paired HTML/XML tags. When you rename the opening tag of an element, it automatically renames the corresponding closing tag as well.

9. Bracket Pair Colorizer 🔵🟣🔴

Bracket Pair Colorizer helps developers visually identify matching pairs of brackets, parentheses, braces, and other delimiters in their code.

Here's how it works:

Colorization: Bracket Pair Colorizer automatically assigns unique colors to matching pairs of brackets. For example, if you have an opening curly brace { and a closing curly brace }, they will be colored with the same color, making it easier to see which opening brace corresponds to which closing brace.

10. Import cost 📉

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

Features
Calculates the size of imports and requires. Currently supports:

• Default importing: import Func from 'utils';
• Entire content importing: import * as Utils from 'utils';
• Selective importing: import {Func} from 'utils';
• Selective importing with alias: import {orig as alias} from 'utils';
• Supports both Javascript and Typescript

---

If you have some other cool extensions, feel free to share them in the comments below! 💬