[VS Code] 💽 Bracket pair colorization 10,000x faster

...

Bracket Pair Colorizer 익스텐션

Bracket Pair Colorizer는 여는 괄호와 닫는 괄호를 같은 색으로 꾸며줘, 코드 블록 시작과 끝이 어딘지를 쉽게 파악할 수 있도록 도와주는 VSCode의 서드파티 익스텐션이다.

Bracket Pair Colorizer 2 - Visual Studio Marketplace

Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

marketplace.visualstudio.com

아주 유용한 플러그인이긴 하나, 퍼포먼스(성능) 이슈 및 자잘한 버그가 존재한다. 예를들어, 주석처리를 한 괄호에 색깔이 입혀지고, 초기 로딩이 느리다는 점등 약간 아쉬운 퍼포먼스를 가지고 있기 때문이다.

따라서, VSCode 개발팀은 VSCode에Bracket Pair Colorizer와 동일한 기능을 하는 옵션을 최근에(9월) 업데이트 하였다고 발표하였다.

괄호 색깔 내장 옵션 사용 방법

1. Bracket Pair Colorizer 지우기

Bracket Pair Colorizer가 설치되어있다면 플러그인을 삭제해야 한다.

플러그인 메뉴의 검색창에 Bracket Pair Colorizer를 입력한 후, Uninstall 버튼을 눌러 플러그인을 삭제하자. 삭제 후에는 Reload Required 버튼을 눌러 VSCode를 재시작 한다.

2. User settings 설정 하기

괄호 색깔 설정을 on 한 경우

3. 괄호 색깔 변경하기

만일 기본으로 제공하느 색깔 팔레트가 마음에 들지 않는다면, setting.json에서 변경할수도 있다.

~~ctrl + shift + p~~를 누르고 setting.json을 검색해서 클릭한다.

그리고 해당 객체값을 추가해준다. 이제 원하는 색상 16진수 값으로 설정해주면 된다.

{
  "editor.bracketPairColorization.enabled": true,
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#5caeef",
    "editorBracketHighlight.foreground2": "#dfb976",
    "editorBracketHighlight.foreground3": "#c172d9",
    "editorBracketHighlight.foreground4": "#4fb1bc",
    "editorBracketHighlight.foreground5": "#97c26c",
    "editorBracketHighlight.foreground6": "#abb2c0",
    "editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
  },
}

# 참고자료

https://www.stefanjudis.com/snippets/how-to-configure-vs-code-bracket-colors/

https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization