<div id="readability-page-1" class="page"><section><div><div><p><a rel="noopener follow" href="/?source=post_page-----e75558a87990--------------------------------"><img alt="Bora Lee" src="https://miro.medium.com/fit/c/56/56/0*T0ZoyavC_F01whu6.jpg" width="28" height="28"></a></p></div><p id="1f02">여는<em> </em>괄호에<em> </em>대응하는<em> </em>닫는<em> </em>괄호를<em> </em>쉽게<em> </em>찾게<em> </em>해주는<em> Visual Studio Code </em>서드파티<em> </em>익스텐션<em> Bracket Pair Colorizer</em>를<em> </em>내장<em> </em>기능으로<em> </em>대체하는<em> </em>방법을<em> </em>소개합니다<em>.</em></p><h2 id="9159">Bracket Pair Colorizer 익스텐션 소개</h2><p id="93f0"><em>Bracket Pair Colorizer</em>는<em> </em>여는<em> </em>괄호와<em> </em>닫는<em> </em>괄호를<em> </em>같은<em> </em>색으로<em> </em>꾸며줘,<em> </em>코드<em> </em>블록<em> </em>시작과<em> </em>끝이<em> </em>어딘지를<em> </em>쉽게<em> </em>파악할 수<em> </em>있도록<em> </em>도와주는<em> VSCode</em>의<em> </em>서드파티<em> </em>익스텐션입니다<em>.</em></p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*mPE4bRQBLcovS_eMByAHqg.png" width="1000" height="555" role="presentation"></p></div></figure></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*WSRiGsBN2rxtj4youerwDw.png" width="1000" height="599" role="presentation"></p></div></figure></div><div><p id="53e3">삭제 후에는 Reload Required 버튼을 눌러 VSCode를 재시작해주세요.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*v8F1uA9AtdcWVsqZBk7p2g.png" width="1000" height="599" role="presentation"></p></div></figure></div><div><h2 id="a201">2. Visual Studio Code가 최신 버전인지 확인하기</h2><p id="8555">내장 Bracket Pair Colorization은 2021년 8월에 추가된 기능입니다. 현재 사용하고 있는 VSCode가 최신 버전인지 확인하여 해당 기능을 사용할 수 있는지 확인합시다.</p><p id="bdff">VSCode가 최신 버전인지 아닌지 확인하는 방법은 여러 가지가 있는데, 그중 세팅 메뉴를 사용해보겠습니다.</p><p id="5911">좌측 하단의 톱니바퀴 모양 아이콘(세팅 메뉴)을 클릭하면 나타나는 컨텍스트 메뉴에서 ‘Check for Updates…’를 선택합시다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*KXaL2Ul7hxZgBVo1WfkyYw.png" width="1000" height="599" role="presentation"></p></div></figure><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*rrLqpX3FdL1aslxVRZsqqA.png" width="1000" height="600" role="presentation"></p></div></figure></div><div><p id="0a68">최신 버전이 설치되어있다면 하단 그림과 같이 ‘There are currently no updates available.’이라는 문구가 뜨므로 OK 버튼을 눌러 다음 단계로 넘어갑시다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*CCwSZfnHSYNExSPWK_79BQ.png" width="1000" height="599" role="presentation"></p></div></figure></div><div><p id="7ede">동일한 문구가 뜨지 않는다면, 가이드에 따라 업데이트를 진행합니다.</p><h2 id="b554">4. User settings 변경하기</h2><p id="087d">사용하는 운영체제에 따라 다음 단축키를 눌러 Command Palette를 띄웁니다.</p><ul><li id="b003">Mac: CMD + Shift + P</li><li id="ff82">Windows: CTRL + Shift + P</li></ul><p id="1867">새롭게 뜬 Command Palette에 setting이라는 검색어를 입력하면 세팅과 관련된 여러 기능이 나타나는데, 이 중 <strong>Preferences: Open Default Settings (JSON)</strong>이나 <strong>Preferences: Open Default Settings (UI)</strong>를 사용하면 우리가 원하는 기능을 VSCode에 추가할 수 있습니다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*1eBocJbv4l8DKVG3ThPfbQ.png" width="1000" height="600" role="presentation"></p></div></figure></div><div><p id="ae1a">이번엔 Preferences: Open Default Settings (UI)를 클릭해 설정을 변경해보겠습니다.</p><p id="d0a1">해당 메뉴를 클릭하면 새로운 탭이 뜨는데, 검색창에 colorization을 입력해 우리가 원하는 기능을 바로 검색합시다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*t3Ahw178_y_jXQxKnOhFXA.png" width="1000" height="600" role="presentation"></p></div></figure></div><div><p id="b87c">체크 박스를 체크해 설정을 마무리하면 끝입니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*Jnn9B6VgBoKncwc-f9BuvQ.png" width="700" height="102" role="presentation"></p></div></figure><h2 id="efc9">마무리</h2><p id="b77b">이제 별도 플러그인 없이 괄호 쌍을 편리하게 확인할 수 있습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*t1AjmJYjlil9tw22.gif" width="700" height="328" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/freeze/max/60/0*t1AjmJYjlil9tw22.gif?q=20"></p></div></figure></div></section></div>

Stories by Violet Bora Lee on Medium

여는 괄호에 대응하는 닫는 괄호를 쉽게 찾게 해주는 Visual Studio Code 서드파티 익스텐션 Bracket Pair Colorizer를 내장 기능으로 대체하는 방법을 소개합니다.
Bracket Pair Colorizer 익스텐션 소개
Bracket Pair Colorizer는 여는 괄호와 닫는 괄호를 같은 색으로 꾸며줘, 코드 블록 시작과 끝이 어딘지를 쉽게 파악할 수 있도록 도와주는 VSCode의 서드파티 익스텐션입니다.
CoenraadS라는 닉네임을 쓰는 개발자에 의해 개발된 이 익스텐션은 버전 1과 2를 합쳐 약 천만 다운로드를 기록할 정도로 유명하고, 유용성이 입증된 익스텐션입니다.
버전 1 마켓플레이스 링크
버전 2 마켓플레이스 링크
VSCode 추천 익스텐션 목록에 빠지지 않고 들어가는 익스텐션이죠.
Bracket Pair Colorizer 의 문제점
아주 유용한 플러그인이긴 하나, 퍼포먼스(성능) 이슈가 있어서 VSCode 개발팀은 VSCode에 Bracket Pair Colorizer와 동일한 기능을 하는 옵션을 제공하게 되었다고 발표하였습니다.
내장 옵션 사용 방법
1. Bracket Pair Colorizer 지우기
Bracket Pair Colorizer가 설치되어있다면 플러그인을 삭제해야 합니다. 플러그인 메뉴의 검색창에 Bracket Pair Colorizer를 입력한 후, Uninstall 버튼을 눌러 플러그인을 삭제합시다.
삭제 후에는 Reload Required 버튼을 눌러 VSCode를 재시작해주세요.
2. Visual Studio Code가 최신 버전인지 확인하기
내장 Bracket Pair Colorization은 2021년 8월에 추가된 기능입니다. 현재 사용하고 있는 VSCode가 최신 버전인지 확인하여 해당 기능을 사용할 수 있는지 확인합시다.
VSCode가 최신 버전인지 아닌지 확인하는 방법은 여러 가지가 있는데, 그중 세팅 메뉴를 사용해보겠습니다.
좌측 하단의 톱니바퀴 모양 아이콘(세팅 메뉴)을 클릭하면 나타나는 컨텍스트 메뉴에서 ‘Check for Updates…’를 선택합시다.
최신 버전이 설치되어있다면 하단 그림과 같이 ‘There are currently no updates available.’이라는 문구가 뜨므로 OK 버튼을 눌러 다음 단계로 넘어갑시다.
동일한 문구가 뜨지 않는다면, 가이드에 따라 업데이트를 진행합니다.
4. User settings 변경하기
사용하는 운영체제에 따라 다음 단축키를 눌러 Command Palette를 띄웁니다.
Mac: CMD + Shift + P
Windows: CTRL + Shift + P
새롭게 뜬 Command Palette에 setting이라는 검색어를 입력하면 세팅과 관련된 여러 기능이 나타나는데, 이 중 Preferences: Open Default Settings (JSON)이나 Preferences: Open Default Settings (UI)를 사용하면 우리가 원하는 기능을 VSCode에 추가할 수 있습니다.
이번엔 Preferences: Open Default Settings (UI)를 클릭해 설정을 변경해보겠습니다.
해당 메뉴를 클릭하면 새로운 탭이 뜨는데, 검색창에 colorization을 입력해 우리가 원하는 기능을 바로 검색합시다.
체크 박스를 체크해 설정을 마무리하면 끝입니다.
마무리
이제 별도 플러그인 없이 괄호 쌍을 편리하게 확인할 수 있습니다.

VSCode에서 Bracket Pair Colorizer 삭제하고 내장 기능 사용하기

댓글