In this article, we’ll start with a brief introduction to VS Code basics and then give you advice on the most useful VS Code extensions, covering popular and unique, little-known extensions.

What is Visual Studio code?

Visual Studio Code is a free source Code editor from Microsoft for Windows, Linux and macOS.

It has built-in support for TypeScript, JavaScript, and Node.js. It also contains many useful features that make the development tool the most popular among programmers, according to the 2019 Stack Overflow Developer Survey.

For example, with VS Code extensions, developers can write programs faster without having to do mechanical tasks, because some of these extensions solve all of these problems. For example, they can spend more time thinking about new ways to make software more innovative rather than debugging.

Visual Studio code contains important features such as:

  • Write code faster
  • Debugging features ensure that your code is clean and error-free.
  • Refactoring operations are supported.
  • Split views, allowing you to work on multiple projects simultaneously.
  • Rich semantic code understanding and navigation

Popular VS code extensions

GitLens

The VS Code extension helps developers better understand their Code. When a change occurs in a line/block, they can search the history of the code base and learn how and why the code changed and why it changed.

Prettier – Code formatter

Most developers, especially beginners, struggle to maintain consistent code.

Prettier enforces a consistent coding style by creating an abstract syntax tree from your code and reprinting it with its own rules.

JavaScript (ES6) code snippets

Coding is often a tedious task, because many times developers need to write the same code over and over again. With snippets, they can greatly reduce the need to type repetitive code, freeing up more time to focus on the actual code.

ESLint

This is a collation tool that allows developers to create their own collation rules so that they can run analysis in their code to see if certain patterns or code does not adhere to specific rule guidelines. This feature is especially useful for teams of developers who need formatting guidelines to keep their code consistent.

Bracket Pair Colorizer

Parentheses are a developer’s nightmare. However, with this extension, the user can define which markup to match with what color. This way, square brackets can be easily colored, giving developers more readable and consistent code.

Unique VS code extension

Peacock

They provided inspiration for John Papa, creator of Peacock VS Code extension, which allows developers to change their color Settings.

Why is it important to change color Settings in programming?

When you work with multiple VS Code instances, it can sometimes be difficult to identify each of them. However, it becomes easier when you use color to distinguish them from each other.

Therefore, the Peacock VS Code extension helps developers identify and organize workspaces in a better way to maximize their workflow.

Extension highlights:

  • Customize your workspace with different colors.
  • Integration with Live Share and VS Code Remote.
  • Command (found in the command options bar).
  • User-defined colors in Favorites Colors.
  • Adjust the color of the affected elements (making them darker or lighter).

WakaTime

WakaTime is an ideal tool for programmers to track how much time they spend programming, help them assess performance, or let them know if they’re spending too much time on unnecessary tasks. With this extension, they can improve their productivity by looking at WakaTime’s insights on performance.

WakaTime extension highlights:

  • Personal dashboard with metrics.
  • Evaluate your code (real-time metrics for each project, file, branch, etc.).
  • Supports over 600 programming languages.
  • Set reminders.
  • Keep developers’ daily coding consistent.

carbon-now-sh

Screen captures of code are not basic, but still helpful. Whether it’s because you’re a technical writer who likes to add nice screenshots to your blog posts, or because you’re a remote programmer who creates presentations for your team, using screenshots takes something to another level. Carbon is the perfect VS Code extension.

Although Carbon’s primary function is to create screenshots of code, it has other functions that make this extension:

  • Customize your color theme, background color, or window style.
  • Generate SVG or PNG images.
  • Share a screen shot of your code.
  • Automatically detects the programming language and applies the matching syntax highlighting.
  • Format the generated image (with font size and color theme)

vscode-base64

Base 64 is an encoding algorithm that allows developers to convert any character into Latin letters, numbers, plus signs, and slashes.

It acts as a translator, allowing users to convert Chinese characters, images and emoticons into readable strings.

Today, most programmers use this unique VS Code extension to encode binary data, such as images, to embed it in HTML or CSS files. In addition, Base64 is used to encode data that may be corrupted during transmission or storage.

Base64 highlights:

  • Attach a file when sending an email.
  • Embed images in HTML or CSS.
  • Output binary data.
  • Save the binaries to the database

Vim

Vim is a text editor that allows developers to write code efficiently, not only because of its functionality, but also because of its rationale. Vim is opposed to using a mouse, so the keyboard can only be used in the context of actions and actions. But while it’s a great tool, most developers choose Visual Studio Code because it’s more customizable and has more features.

Vim Extension highlights:

  • Multi-level undo tree.
  • Extensive plug-in system.
  • Support for hundreds of programming languages.
  • Easy to customize.
  • It is highly configurable.

Spotify

When you install the Spotify extension, you can listen to your favorite songs while coding, and control which songs come up, pause, or skip.

Spotify extension highlights:

  • It can be used on any platform.
  • Displays the currently playing song in the vscode status bar.
  • Provides command hotkeys.
  • Lyrics available.

indent-rainbow

Similar to Bracket Pair Colorizer, this unique VS Code extension aims to improve coding efficiency by distinguishing between dimples of different colors.

The main purpose of this simple extension is to make the indentation more readable by coloring each indent tag. It has all rainbow colors by default, and you can easily customize them as your favorite colors.

Visual Snake Code

In most cases, programmers spend so much time at work that it takes hours to realize this. This means they almost never rest!

With Visual Snake code extensions, interrupts are non-negotiable. This extension helps distract the programmer from the classic Snake game for a few minutes.

Visual Studio Code has thousands of extensions for developers to use and use. While there are some popular VS Code extensions that are useful, don’t ignore the lesser-known ones. These eight unique VS Code extensions are ideal tools for developers looking for strategies to increase productivity and have fun at work.