● Use VSCode? Use Bracket Pair Colorize? Read this!!!

Tue Nov 30, 2021 9:03 pm
Clan Leader
Top Dog
Nuke Dev / Coder
2814 Posts
coRpSE
In-Game
SCUM

Most Played:
This week: 36.0hrs.
Total Played: 517hrs.


  
Reputation: 7009.9
votes: 6
Well, this year, a few months back, I guess they finally introduced native bracket pair colorization into VS Code. This means, if you are running that extension, you can remove it, for it's no longer needed.

How to activate it on your VSCode:


  1. Make sure to remove the Bracket Pair Colorizer extension.
  2. Update VS Code
  3. Open your user settings via CTRL (CMD for Mac users) + Shift + P, then type:
    Preferences: Open Settings (JSON)
  4. Add the following line to it:

    Code: [ Select all ]

    "editor.bracketPairColorization.enabled": true

  5. All colors are themeable and up to six colors can be configured.


Now, if you want to theme the colors, all you need to do is, on a new line, below what I told you to add above, add the following code.

Code: [ Select all ]

    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#fff567",
        "editorBracketHighlight.foreground2": "#ff6bff",
        "editorBracketHighlight.foreground3": "#00a2ff",
        "editorBracketHighlight.foreground4": "#ff951c",
        "editorBracketHighlight.foreground5": "#5cff56",
        "editorBracketHighlight.foreground6": "#9900ff",
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff4040"
      }


Note: if you are adding this at the end of the file, the last thing DOES NOT require a comma, so if you are putting this on a new line below the previous line I told you to put in, then put a comma at the end of that line, then add this on a new line under it.
Here is my file as an example:

Code: [ Select all ]

{
    "telemetry.enableCrashReporter": false,
    "intelephense.telemetry.enabled": false,
    "telemetry.telemetryLevel": "off",
    "telemetry.enableTelemetry": false,
    "workbench.colorTheme": "One Dark Bimbo",
    "php.executablePath": "E:/wamp64/bin/php/php7.4.9/php.exe",
    "php.validate.executablePath": "E:/wamp64/bin/php/php7.4.9/php.exe",
    "editor.hover.enabled": true,
    "vs-color-picker.autoLaunch": true,
    "vs-color-picker.autoLaunchDelay": 0,
    "editor.wordWrap": "on",
    "better-comments.highlightPlainText": true,
    "window.zoomLevel": 1,
    "security.workspace.trust.untrustedFiles": "open",
    "security.workspace.trust.enabled": false,
    "tabnine.experimentalAutoImports": true,
    "sonarlint.ls.javaHome": "c:\\Users\\dread\\.vscode\\extensions\\sonarsource.sonarlint_managed-jre\\jre\\jdk-11.0.13+8-jre",
    "vscode-color-picker.languages":[
        "python",
        "javascript",
        "typescript",
        "php",
        "html"
    ],
    "editor.bracketPairColorization.enabled": true,
    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#fff567",
        "editorBracketHighlight.foreground2": "#ff6bff",
        "editorBracketHighlight.foreground3": "#00a2ff",
        "editorBracketHighlight.foreground4": "#ff951c",
        "editorBracketHighlight.foreground5": "#5cff56",
        "editorBracketHighlight.foreground6": "#9900ff",
        "editorBracketHighlight.unexpectedBracket.foreground": "#ff4040"
      }
}


Don't directly copy my settings for it has settings specifically set for my PHP, local, theme, and what not, but you can see at the end the lines I told you to add.


Expand
Forums ©