Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom brace highlighting in Visual Studio Code

Is it possible to customize the brace highlighting in Visual Studio Code? It seems just about everything else is customizable through user and workspace settings, as well as textmate themes. Regardless of the syntax highlighting you employ, the braces always have the same light gray outline/rectangle around them. I don't see an existing user/workspace setting or a textmate scope that addresses this specific feature.

Ultimately I'd like to have a solid color highlight of matching braces, similar to what you would get with the default dark theme in Visual Studio 2013 and 2015.

like image 593
Coolidge Avatar asked Aug 28 '16 05:08

Coolidge


People also ask

How do you highlight braces in Visual Studio?

To specify the color to highlight matching delimiters, go to Visual Studio options (Tools | Options), open the Environment | Fonts and Colors page, and select the desired colors for the ReSharper Brace Outline and/or ReSharper Matched Brace items.

How do I change syntax highlighting in VSCode?

Press Ctrl + K M and then type in (or click) the language you want.


2 Answers

For future reference, vscode now has the option to change the color of bracket highlighting by adding this to settings.json:

"workbench.colorCustomizations" : {         "editorBracketMatch.background": "#f008",         "editorBracketMatch.border": "#f00" } 

Formats supported are #RGB, #RGBA, #RRGGBB, #RRGGBBAA. The rgba(255,255,255,1) format that seems to work in other places in the settings file appears to not work here.

Only feature that is still missing regarding this subject is bracket highlighting when the cursor is between brackets. They only highlight when one of the brackets is selected. I did not find a current solution searching trough the Settings or workbench.colorCustomizations.

Update 2018.04.21 There is now a plugin called Bracket Pair Colorizer that does shows the current brackets besides the line number no matter where the cursor is placed within the brakes. But on slower hardware (3nd generation i5 laptop) i encountered slowdowns with it when editing large files (3000+ line php file). And alternate plugin that performs well on the same file and highlights the current indentation is Guides.

Update 2019.11.10 VSCode 1.40 now highlights the brackets enclosing the cursor.

Update 2021.08.09 as @desilicius mentioned in the comments Bracket Pair colorizer is no longer maintained by the author. He offers as an alternative Blockman - Highlight Nested Code Blocks which has the same functionality but has a totally different look and Highlight Matching Tag which is a great plugin but only works on html (and jsx) tags as the name implies.

Update 2021.08.13 The VSCode team decided to add bracket pair colorization as a built in feature. It is worked on right now with improvements of 10k x the speed of BPC2. The discussion can be found here

like image 169
Vlad Macovei Avatar answered Sep 17 '22 01:09

Vlad Macovei


You can try Bracket Pair Colorizer 2 Extension.

like image 20
Rubel Miah Avatar answered Sep 18 '22 01:09

Rubel Miah