Tag Archives: npm

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.

React 101

React 101 – Now Available

Today I am very excited to finally release React 101 to everyone.

What is React 101?

React 101 is a free online course for anyone who has a basic knowledge of React and wants to learn how to build 3 practical React components from scratch.

Who is it for?

If you have already watched some of my React Tutorials on YouTube you will be very comfortable inside of React 101.

React 101 target audience - advanced beginners to intermediate

What will you learn?

By building 3 practical React components from scratch, you will learn:

  • How to render child of a component.
  • How to use Fetch API to load data for your app.
  • How to save data to localStorage.
  • How to filter through data.
  • How to render a dynamic dropdown.
  • And much more!

SIGN UP NOW!

Spread the word

Help to spread the word by retweeting the following tweet or share React 101 on your favorite social platform.

Any questions of feedback?

Do you have any other questions or feedback?

And what is your experience with React? (A-beginner, B-intermediate, C-Pro)

Let me know in the comments.