Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Colorized Brackets for IDE

By  on  

Coders treat their text editors and IDE's like fragile beings, and for good reason: we spend a ton of time in them and having our tweaks and extensions can make us incredibly productive for our personal workflows. I always love hearing about what extensions and workflows other developers use to see if I can put them to my own use.

That's why @Souvir may have changed my life with this tweet:

I have never put much thought into brackets but I've been using the Bracket Pair Colorizer extension in VSCode for a few days now and I'll never go without it. Those of use who work regularly with the mess that JSX can create will appreciate this extension even more!

Regardless of text editor or IDE you use, give a bracket colorizer extension a try -- if may help you to identify your blocks more quickly!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Making the Firefox Logo from HTML

    When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt. That had to change. The basic...

  • By
    Input Incrementer and Decrementer with MooTools

    Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...

Discussion

  1. Ahmad Awais

    I love VSCode and actually built one of the top five themes on the marketplace (called Shades of Purple) — but having multi-colored brackets just messes with my head lol. It makes the syntax look weird.

    Don’t get me wrong, I get that it helps but this is a bit out there for me having such a weird colorful syntax. What are your thoughts on that?

    Looking forward, peace! ✌️

  2. Hasse Ramlev

    And Rainbow Brackets if using PHPStorm. (https://plugins.jetbrains.com/plugin/10080-rainbow-brackets)

  3. BryanYang

    it’s exactly a nice tool.

  4. Thomas Allmer

    There is actually a version 2 available.
    https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

    And if you use it in combination with Solarized Light you may be interested in these color settings for it:
    https://twitter.com/daKmoR/status/1084509886048804866

  5. Alex

    The default colors won’t look as nice if you’re using a light theme on a dim screen.
    Still over 3M downloads and this is the first time I head about this extension.

  6. Erez

    Holy hell… mind = blown! This was probably the most helpful blogpost I have read in a while

  7. Ben

    Has anybody come across something similar for Brackets or Coda?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!