Remember those old TV commercials that sold amazing nonstick pans or the colorful knives that were as sharp as a Samurai sword? Although you might have already had pans and knives in your kitchen, it was common to suddenly feel the need to buy them because they seemed better. The same thing happens with Visual Studio (VS) Code extensions. Sometimes developers don’t realize how badly they need them until they see all their features.
If you’ve been a developer for at least a couple years, you probably already use VS Code and have discovered great extensions. However, because many of them are labeled as “the best” or “most popular,” other unique VS code extensions remain comparatively unknown.
In this post we’ll first take a brief look at the basics of VS Code, and then I’ll offer you my recommendations on the most useful VS Code extensions, covering both popular and unique, less-known ones. Not only will these extensions boost your productivity, but—exactly as with the nonstick pan or the Samurai knife—you’ll likely wonder how you coped without them!
What Is Visual Studio Code?
For those entering this fantastic world of programming and are seeking tools to make their coding better and faster, VS Code is a must-have.
Before getting deep into the unique VS Code extensions, let’s first understand what VS Code is about.
Visual Studio Code is a free source code editor made by Microsoft, suitable for different operating systems such as Windows, Linux, and macOS. It has built-in support for TypeScript, JavaScript, and Node.js. It also contains many useful features that have made this development tool the most popular among programmers, according to the 2019 Developers Survey of Stack Overflow.
For instance, using VS Code extensions, developers can program faster and forget mechanical tasks because some of these extensions take care of all that. For example, they can spend more of their time thinking of new ways to make the software more innovative instead of debugging.
Visual Studio Code includes significant features, such as:
- Write code faster
- Debugging features that make sure your code is clean and error-free.
- Support of refactoring operations.
- Split views that allow you to work on several projects simultaneously.
- Rich semantic code understanding and navigation
And now, with the basics covered, let’s go straight to the important part: VS Code extensions.
Popular VS Code Extensions
The popularity of VS Code has increased over time because, as it is open-source, new extensions keep appearing in the market, helping developers solve all sorts of difficulties.
The five VS Code extensions I list below have gained popularity over the last years because, according to developers' communities, they have helped them make their programming processes more efficient. Most of these extensions help them automate manual tasks that tend to be tedious and time-consuming. Think of all the nightmares you have had to deal with every day while coding. These five VS Code extensions will likely help you get rid of those nightmares.
GitLens
This VS Code extension helps developers understand their code better. When there are changes in a line/block, they can search through the codebase's history and understand how and why the code changed, and who changed it.
Prettier
Most developers, especially beginners, struggle to maintain a consistent code. Prettier enforces a consistent coding style by creating an abstract syntax tree from your code and re-prints it with its own rules.
JavaScript (ES6) code snippets
Coding tends to be a monotonous task because many times, developers need to write the same code again and again and again. With code snippets, they can dramatically reduce the need to type repetitive code, having more time to focus on the real code.
ESLint
It is a linting tool that allows developers to create their own linting rules, this way they can run an analysis in their code to see if some patterns or code don’t adhere to specific rule guidelines. This feature is particularly useful for teams of developers who need formatting guidelines to keep the code consistent.
Bracket Pair Colorizer
Brackets are a nightmare for developers. However, with this extension, users can define which token to match with what color. This way, brackets are easily identified with colors, making developers have a more readable and consistent code.
Unique VS Code Extensions
The year is ending, and the results are in. These eight VS Code extensions have made their way through this year by helping developers increase their speed and productivity while coding. Some of these extensions have even encouraged devs to take breaks or have fun while working!
Peacock
Peacocks are known to be majestic animals displaying beautiful shades of blue and green. They served as inspiration for John Papa, the creator of the Peacock VS Code extension, which allows developers to change their color settings. Why does changing the color settings matter in programming?
When you are working on multiple VS Code instances, sometimes it can be hard to identify each one of them. But it becomes easier when you distinguish them from one another using colors. And so, the Peacock VS Code extension helps developers identify their workspace and organize it in a better way, maximizing their workflow.
Peacock extension highlights:
- Customize your workspace with different colors.
- Integrate with Live Share and VS Code Remote.
- Commands (found in the command palette).
- User-defined color from the Favorite Colors.
- Adjust the coloring of affected elements (making them darker or lighter).
WakaTime
Developers spend a lot of time coding. This is not news; it’s part of their job. However, spending hours on coding doesn’t necessarily mean they are productive, as sometimes they are simply not aware of all the time they spend on a specific task.
WakaTime is the perfect tool for programmers to track how much time they spend programming, helping them measure their performance, or making them aware if they are spending too much time on unnecessary tasks. With this extension, they can boost their productivity by taking a look at WakaTime’s insights about their performance.
WakaTime extension highlights:
- Personal dashboard with metrics.
- Measure your code (real-time metrics per project, file, branch, etc.).
- Supports more than 600 programming languages.
- Set reminders.
- Keeps developers’ daily coding consistent.
Carbon
Having screenshots of your code is not fundamental, but it is helpful nonetheless. Whether it’s because you’re a tech writer who likes adding nice screenshots to your blog posts, or because you’re a remote programmer who is creating a presentation for your team, using screenshots takes certain things to another level. And Carbon is the perfect VS Code extension for it.
Although the main function of Carbon is to create screenshots of your code, it also has other features that make this extension a hidden gem:
- Customize your color theme, background color, or window style.
- Generate SVG or PNG images.
- Share a tweet of your code’s screenshot.
- Automatically detect programming languages and apply matching syntax highlighting.
- Format produced images (with font size and color theme).
Base64
Base 64 is an encoding algorithm that allows developers to transform any characters into an alphabet which consists of Latin letters, digits, plus, and slash. Users can convert from Chinese characters, images, and emojis into a readable string. So basically, it works as a translator.
Nowadays most programmers use this unique VS Code extension to encode binary data (such as images) to embed it into HTML or CSS files. Additionally, Base64 is used to encode data that may suffer damage during transfer or storage.
Base64 highlights:
- Attach files when sending emails.
- Embed images into HTML or CSS.
- Output binary data.
- Save binary files to database.
Vim
Isn’t Vim the competition of Visual Studio Code? Luckily not anymore, because now this VS Code extension brings the best of both worlds.
Vim is a text editor that allows developers to efficiently write their code, not only because of its features but also because of its principles. Vim is against using the mouse, so you only use your keyboard under the idea of motions and actions. However, although it’s a great tool, most developers choose Visual Studio Code because it's even more customizable and has more features.
But now they don’t have to choose one or the other, thanks to the Vim extension. Developers are now able to use both text editors, using the best features of each of them.
Vim extension highlights:
- Multi-level undo tree.
- Extensive plugin system.
- Support of hundreds of programming languages.
- Easy customization.
- It’s highly configurable.
Spotify
Yes, music matters too! For programmers who deeply enjoy music while working, this is the perfect VS Code extension for you.
How does it work? When you install the Spotify extension, you’ll be able to listen to your favorite songs, controlling which songs appear, pausing, or skipping them, while you are coding.
Spotify extension highlights:
- Can be used on any platform.
- Shows the current song playing in the vscode status bar.
- Provides hotkeys of commands.
- Lyrics available.
Indent Rainbow
Similar to Bracket Pair Colorizer, this unique VS Code extension has the objective of making coding more productive by distinguishing indents with different colors.
This simple extension has the main purpose of making indentation more readable by coloring each indent tab. By default, it has all the rainbow colors, but if it's too colorful for you, you can easily customize them to the colors you like the most.
Visual Snake Code
We all need breaks! Sometimes we fear taking breaks because we feel we are wasting time, but taking a break helps us fuel our energy to be more productive. Most of the time, programmers are consumed in work, coding for hours without even realizing it. This means they pretty much never take breaks!
But, with the Visual Snake Code extension, breaks are non-negotiable. This extension helps programmers become distracted for a couple minutes with the classic Snake game. They can loosen up, take a small break, play for a bit, and then get back to work!
Ready to Optimize Your Workflow?
Visual Studio Code has thousands of extensions for developers to use and enjoy. Although there are some popular VS Code extensions that are very useful, don’t neglect those lesser-known ones. These eight unique VS Code extensions are the perfect tools for developers looking for strategies to boost their productivity and have fun while working.
Programming doesn't have to be about sitting down in a chair for eight hours (if not longer) and typing until your eyes are tired. Programming is also about enjoying your work, and with these extensions, you'll be able to listen to your favorite Spotify playlist while playing Snake for five minutes to clear your mind. Many of these unique extensions will allow you to write better code fast, optimize your workflow, and have fun while doing it.