Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
Bracket Colorizer Extension for VSCode
https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
Last synced: about 1 month ago
JSON representation
Bracket Colorizer Extension for VSCode
- Host: GitHub
- URL: https://github.com/CoenraadS/Bracket-Pair-Colorizer-2
- Owner: CoenraadS
- License: mit
- Archived: true
- Created: 2018-09-09T10:46:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-26T14:49:22.000Z (about 1 year ago)
- Last Synced: 2024-09-27T04:40:14.362Z (3 months ago)
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
- Size: 354 KB
- Stars: 1,607
- Watchers: 12
- Forks: 160
- Open Issues: 364
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - CoenraadS/Bracket-Pair-Colorizer-2 - Bracket Colorizer Extension for VSCode (TypeScript)
README
---
# 🎄 Christmas Notice ☃️
This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
This extension has seen wilder success then I could over ever dreamed of, with over 10M+ downloads.
I'm glad so many people found it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
If you enjoyed it, a coffee donation is appreciated:
🎁 [Donate](https://ko-fi.com/bracketpaircolorizer) 🎁
Merry Christmas and Happy New Year!
---
## How to enable native bracket matching:
(With similar color scheme as this extension)`settings.json`
```
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.guides.bracketPairsHorizontal": "active",
"editor.guides.highlightActiveIndentation": false,
"workbench.colorCustomizations": {
// Bracket colors
"editorBracketHighlight.foreground1": "#FFD700",
"editorBracketHighlight.foreground2": "#DA70D6",
"editorBracketHighlight.foreground3": "#179fff",
// Inactive guide colors
"editorBracketPairGuide.background1": "#ffd90080",
"editorBracketPairGuide.background2": "#CC66CC80",
"editorBracketPairGuide.background3": "#87CEFA80",
// Active guide colors
"editorBracketPairGuide.activeBackground1": "#ffd90080",
"editorBracketPairGuide.activeBackground2": "#CC66CC80",
"editorBracketPairGuide.activeBackground3": "#87CEFA80",
}
}
```---
# Bracket Pair Colorizer 2
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
Screenshot:
![Screenshot](images/example.png "Bracket Pair Colorizer")---
### F.A.Q.
- Differences between v1 and v2?
- v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.---
### [Release Notes](CHANGELOG.md)
---
## Settings
> `"bracket-pair-colorizer-2.colors"`
Define the colors used to colorize brackets. Accepts valid color names, hex codes, and `rgba()` values.
```json
"bracket-pair-colorizer-2.colors": [
"Gold",
"Orchid",
"LightSkyBlue"
]
```> `"bracket-pair-colorizer-2.forceUniqueOpeningColor"`
![Disabled](images/forceUniqueOpeningColorDisabled.png "forceUniqueOpeningColor Disabled")
![Enabled](images/forceUniqueOpeningColorEnabled.png "forceUniqueOpeningColor Enabled")> `"bracket-pair-colorizer-2.forceIterationColorCycle"`
![Enabled](images/forceIterationColorCycleEnabled.png "forceIterationColorCycle Enabled")>`"bracket-pair-colorizer-2.colorMode"`
Consecutive brackets share a color pool for all bracket types
Independent brackets allow each bracket type to use its own color pool
![Consecutive](images/consecutiveExample.png "Consecutive Example")
![Independent](images/independentExample.png "Independent Example")> `"bracket-pair-colorizer-2.highlightActiveScope"`
Should the currently scoped brackets always be highlighted?> `"bracket-pair-colorizer-2.activeScopeCSS"`
Choose a border style to highlight the active scope. Use `{color}` to match the existing bracket color
It is recommended to disable the inbuilt `editor.matchBrackets` setting if using this feature
![BorderStyle](images/activeScopeBorder.png "Active Scope Border Example")```json
"bracket-pair-colorizer-2.activeScopeCSS": [
"borderStyle : solid",
"borderWidth : 1px",
"borderColor : {color}",
"opacity: 0.5"
]
```> `"bracket-pair-colorizer-2.showBracketsInGutter"`
> Show active scope brackets in the gutter
![Gutter](images/gutter.png "Gutter Brackets Example")> `"bracket-pair-colorizer-2.showBracketsInRuler"`
> Show active scope brackets in the ruler> `"bracket-pair-colorizer-2.rulerPosition"`
> Decoration position in the ruler>`"bracket-pair-colorizer-2.showVerticalScopeLine"`
Show a vertical line between the brackets? Enabled by default
![Scope Line](images/no-extra.png "Gutter Brackets Example")>`"bracket-pair-colorizer-2.showHorizontalScopeLine"`
Show a horizontal line between the brackets? Enabled by default
![Scope Line](images/extra.png "Gutter Brackets Example")>`"bracket-pair-colorizer-2.scopeLineRelativePosition"`
Disable this to show the vertical line in column 0
![Scope Line](images/no-relative.png "Gutter Brackets Example")
>`"bracket-pair-colorizer-2.scopeLineCSS"`
Choose a border style to highlight the active scope. Use `{color}` to match the existing bracket color```json
"bracket-pair-colorizer-2.scopeLineCSS": [
"borderStyle : solid",
"borderWidth : 1px",
"borderColor : {color}",
"opacity: 0.5"
]
```>`"bracket-pair-colorizer-2.excludedLanguages"`
Exclude a language from being colorized### Commands
These commands will expand/undo the cursor selection to the next scope
`"bracket-pair-colorizer-2.expandBracketSelection"`
`"bracket-pair-colorizer-2.undoBracketSelection"`Quick-start:
```
{
"key": "shift+alt+right",
"command": "bracket-pair-colorizer-2.expandBracketSelection",
"when": "editorTextFocus"
},
{
"key": "shift+alt+left",
"command": "bracket-pair-colorizer-2.undoBracketSelection",
"when": "editorTextFocus"
}
```