Lesson Wednesday

As our functions get more complex, it becomes more challenging to keep track of opening and closing brackets such as parentheses and curly braces.

We can use a VS Code extension called Bracket Pair Colorizer to add color to each set of opening and closing brackets, making it easier to identify each set of brackets. It's up to you to decide whether you'd like to add this feature to VS Code or not. However, it's a popular tool and many developers find it useful.

Here's an example of this extension in action.

Bracket colorizer changes the color of opening and closing brackets.

As we can see in the image above, the opening and closing brackets for this function are now different colors. Each opening bracket has a corresponding color with its closing bracket. Also, when we click on a bracket, there is a line guide that shows exactly where the brackets open and close - and the line guide will help us see the exact code that's contained inside the brackets.

To install the extension, search for bracket pair colorizer in the Extensions: Marketplace tab of VSCode.

Install Bracket Pair Colorizer 2 in VSCode Marketplace.

Make sure you install Bracket Pair Colorizer 2, which is the latest version.

Once you install this tool, you may want to update the color preferences. To do so, follow the steps below.

This GIF shows how to update the colorizer preferences.

  • Open up Settings (either by clicking the gear icon in the bottom left corner or by clicking on Code > Preferences > Settings.)

  • Do a search for colorizer. The settings for this extension will come up.

  • Click Edit in settings.json beneath the bracket-pair-colorizer-2: Colors.

  • There will be an key called "bracket-pair-colorizer-2.colors" with an array as a property. This array contains the default colors. You can use hex values or the same color names used for CSS.

Lesson 28 of 32
Last updated more than 3 months ago.