Visual Enhancements of VScode

Useful VSCode Extensions – Visual Enhancements

Are you looking for some useful VSCode extensions that could speed up your front-end development workflow?

I have been building React and Angular projects in VSCode over the last few years and in the next few posts I will share with you my most popular VSCode extensions.

Hope you will find this collection useful.

The first section will focus on visual enhancements.

These extensions are useful for any projects, not just React or Angular development.

Related Video

Indent Rainbow

Indent Rainbow for VSCode

Indent rainbow is a simple extension that makes indentation more readable by colorizing each tab indentation.

Indent Rainbow for VSCode

By default it comes with a “rainbow” of colors, but if you prefer something more subtle like me, simply past the following configuration into your User Settings.

“indentRainbow.colors”: [
    "rgba(16,16,16,0.1)",
    "rgba(16,16,16,0.3)",
    "rgba(16,16,16,0.6)",
    "rgba(16,16,16,0.4)",
    "rgba(16,16,16,0.2)"
]

Indent Rainbow for VSCode

These colors work great with the default VSCode theme and seamlessly blend in the default VSCode color scheme.

View Extension

Bracket Pair Colorizer

Bracket Pair Colorizer for VScode

If you write React, Vue or Angular code you most likely have quite a lot of brackets in your code.

This extension helps you identify matching brackets with colors and connect them with lines too!

Bracket Pair Colorizer for VScode

You can disable the vertical and horizontal line around the block of code. Simply add this to your User Settings.

“bracketPairColorizer.showHorizontalScopeLine”: false

View Extension

Better Comments

Better Comments for VSCode

Better comments extension lets you highlight certain comments in your code.

Better Comments for VScode

Highlight things to do, questions or important notes for other developers.

View Extension

Color Highlight

Color Highlight for VSCode

Color Highlight styles css colors found in your document.

Color Highlight for VSCode

Not only does it recognize colors in your stylesheet but also in other files such as .js, .jsx, .ts, .tsx and other file extensions.

View Extension

Conclusion

What are some of your favorite extensions that fall into the category of VSCode visual enhancements?

Let me know in the comments.

And don’t forget to check out my other collection of useful extensions for VSCode.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.