Wrap up 2021 with these VS Code extensions
Tags: webdev, yearinreview, vscode, extensions
Published: 2021-12-31 11:08:03

Visual Studio Code is arguably the most popular IDE at the moment for quite a while now. 2021 was no different for this successful code editor. The wide range of different features that VS Code allows us to use is what makes it special. One of the things that stands out about VS Code is the massive number of extensions it provides you. Today we will have a look at some of the distinct VS Code Extensions that every developer should install by the end of this year. 

## [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

This extension is based on Artificial Intelligence and it recommends code completion automatically. It also gives various development features based on Artificial Intelligence. 

[Marketplace Link
](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r36x3fgapnwlbqhhqsgb.png)


## [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)
This extension adds various colors to different windows of VS Code. While working on the front-end and back-end at the same time, you can add different colors to identify which repo you are working on. It also helps you add colors in live share and remote integration.

[Marketplace Link
](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr3v4gc1658j37qjy3nv.png)



## [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

Regular expressions are often confusing to understand. Regex Previewer gives you a separate document similar to your regex.
The extension provides many examples of comparisons, so it is much easier to quickly and accurately regex the various use cases.

[Marketplace Link
](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2in5l9aiijpdafuv0vz.png)


## [blox](https://www.vsblox.com/)

blox is another incredibly useful extension with a mammoth 1500+ drop-in-ready UI snippets. All you have to do is just drag and drop the pre-made code snippets in your project and save a great amount of time writing code.

[Marketplace Link
](https://www.vsblox.com/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtlvbhbfya7wejqqzcdl.png)

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

Bookmark your code at a certain line with this extension so that you can refer to it later. Add the bookmark with the command “ctrl+alt+k” and it is also the same command for toggling the bookmark. “ctrl+alt+l” is the command for jumping to the next bookmark and “ctrl+alt+j” is the command for jumping to the previous bookmark.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtgp6sl4k69m7dvvg4th.png)


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

This extension speeds up development by displaying runtime values in the editor as you code, so you can focus on writing code instead of building custom configs.

[Marketplace Link
](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6hjp6msbuxgvp18ol9f.png)
## [Profile Switcher](https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher)
Profile Switcher helps you create various profiles on VS code that you can use for different reasons. This is a must-have extension for those who use VS code for more than one reason. You can save specific extensions for each profile as well.

[Marketplace Link
](https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7anugu4eetshgk76fm.png)

## [SonarLint](https://www.sonarlint.org/vscode)
Sonarlint is an outstanding extension for lone workers without a team. Basically, it detects code quality and code security issues, and generates reports for the user. Sonarlint can also be used by teams with sonarCube and sonarCloud. It has built-in rules in it but a developer can also mute rules or add new rules. 

[Marketplace Link
](https://www.sonarlint.org/vscode)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwvhwtm5icqvfonq248w.png)



If you are going in 2022 without these extensions then you should definitely check out these extensions for better productivity.