In the latest updated of vscode they show the following image for bracket pair colorization:
From there I am interested in the dots that are display before / to the left of every bracket. What is the name of this function? how can I active it in vscode?
The answer for this is that this is called render white space and can be modified from the standard settings in vscode.
set to all to achieve the desired result.
Currently when I add { to a .html file, VS Code will automatically close that bracket while leaving the cursor between the brackets, same with double curly brackets. Since I am working with Angular I would like to know if it is possible to have VS Code do this:
If I add 2 open curly brackets then add 2 blank spaces between them, close the brackets and set cursor between the blank spaces.
So instead of this: {{|}} I would get {{ | }} where | represents the cursor.
"Spaces Inside Braces" seems to be the best bet currently.
Is there a way to highlight brackets when the cursor is anywhere within the enclosing brackets? Default settings highlight it only when I place the cursor near the brackets.
Yes, there is now a way by default, in VSCode 1.40 (October 2019):
Improvements to bracket matching
Previously, VS Code would only highlight matching brackets when the cursor was next to a bracket character.
Now VS Code will always highlight enclosing brackets if they exist.
We have also adjusted our Go to Bracket and Select to Bracket actions to use enclosing brackets.
It is improved and supported natively with VSCode 1.60 (Aug. 2021):
Bracket pair colorization can be enabled by setting "editor.bracketPairColorization.enabled": true.
All colors are themeable and up to six colors can be configured.
VS Code only supports bracket matching when the cursor is near the opening or closing bracket. Maybe an extension would help highlight the enclosing brackets wherever you are in the code but I haven't been able to find one.
If you just want to quickly find matching brackets, braces, parens, etc. you could try Bracket Pair Colorizer or Rainbow Brackets.
Also maybe you will like VSCode extension "Blockman", it highlights nested code blocks. (I am the author of Blockman)
With release 1.60 (September 2021), VS Code now has bracket pair colorization built in, indicating all matching brackets by color.
This feature can be enabled by adding this line to settings.json:
"editor.bracketPairColorization.enabled": true
I am using Version: 1.63.2(MacOS). Default bracket highlight feature was not working for me. In case, someone face similar issue, set it true.
"editor.matchBrackets": true,
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.
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
You can try Bracket Pair Colorizer 2 Extension.
Highlighting and changing colors of brackets in VS Code is now possible.
You can try this extension Subtle Brackets by modifying the following the default values in the .json settings of VS Code:
I changed it like this:
"subtleBrackets.bracketPairs": [
"{}",
"[]",
"()",
"<>"
],
"subtleBrackets.styles": {
"global": {
"color": "yellow",
"borderWidth": "1px",
"borderStyle": "none none solid none"
}
}
Don't forget to set to "false" the value of .matchbrackets of VS Code.
"editor.matchBrackets": false
Update September 2021: The "Bracket pair colorization" feature is now available in VS Code as of the August 2021 (version 1.60) update.
Add this to your settings.json file:
"editor.bracketPairColorization.enabled": true
After saving the file, brackets should instantly be colorized.
Also maybe you will like VSCode extension "Blockman", it highlights nested code blocks. (I am the author of Blockman).
The VSCode extension "Blockman" is a new approach of dealing with brackets, well, it does not highlight brackets themselves, but it renders blocks based on the brackets (curly/square/round brackets/braces), and I think it is a better visual helper for our eyes to perceive code structure more easily, to understand code structure more quickly and more comfortably.
If you want to remove brackets color and border, you can use hex colors with 0 opacity in your settings.json:
"workbench.colorCustomizations": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
You can overwrite any theme:
"workbench.colorCustomizations": {
"[*]": {
"editorBracketMatch.border": "#ffffff00",
"editorBracketMatch.background": "#ffffff00",
}
}
In order to target a specific theme, replace the glob character, *, with the theme name.
Custom brace highlighting will be even more precise with VSCode 1.76 (Feb. 2022), with issue 170497 and PR 172758: it brings support for coloring a subset of the matched bracket.
Example:
"[plaintext]": {
"editor.language.brackets": [
["{", "}"],
["(", ")"],
["[", "]"]
],
"editor.language.colorizedBracketPairs": [
["{", "}"],
["<", ">"]
]
},
Gives:
This is available with VSCode Insiders today.
I want to add square bracket in org mode links' description, for example:
[[http://www.example.com][ Array[i] ]]
Is there a way to escape the brackets [ and ] ? Someone mentioned URL-encoding, but it's not compatible. Besides, looking for the URL-encoding of a character is time consuming.
I suspect that Org doesn't support this.
Org's link structure documentation makes no mention of escaping square brackets in link descriptions.
If you use org-insert-link (bound to C-c C-l by default) and try to use square brackets in your link text, Org converts them to braces:
[[http://www.example.com/][Array{i}]]
You should be able to use a Unicode character that looks like a square bracket inside your link text, but I haven't found a reasonable character to use. The closest I found were SQUARE IMAGE OF (⊏) and SQUARE ORIGINAL OF (⊐), which do indeed work:
[[http://www.example.com/][Array⊏i⊐]]
I found that using org-mode Macros to insert the ASCII codes for the square brackets works. I have posted the solution on Emacs Stackexchange.