VSCode 커서 색깔 및 두께 바꾸는 방법 (Feat. 노안이 온건가? 이제 커서가 잘 안보여 ㅠㅠ)

그렇다..

언젠가부터 VSCode로 코딩을 하면서 가끔 이놈의 커서가 어디에 있는지 잘 안보일 때가 있는 것이다. 가급적이면 마우스를 안쓰고 전부 단축키로 윈도우를 이동해 가면서 각종 기능들을 사용하는 것을 선호하는 편인데, 이럴 때 커서의 위치가 바로 눈에 안 들어오는 것 만큼 짜증나는 일은 없을 것이다.

그래서 그 방법을 열심히 찾아봤고, 드디어 적용해봤다!! 그리고 언젠가는 이것도 분명히 까먹을 것이기에 이렇게 기록으로 남겨두기로 했다.

일단 적용된 화면부터 소개한다. 짜잔!!

설마 이렇게 작업을 했는데도 커서를 한 눈에 찾지 못한다면.. 그건 너무 슬픈일일 것이다..

이제 설정 및 적용 방법을 정리한다.

VSCode 최상단에 search bar에 settings.json이라고 검색을 한다. 윈도우 단축키는 Ctrl + Shift + P가 된다. 맥은 나도 잘 모르고, 관심도 없기 때문에 알아서 찾아볼 것 ㅋㅋㅋ

어쨌거나 이렇게 찾으면 여러개가 나오는데, file 옆에.vscode가 아니고 user 어쩌고가 붙은 녀석을 선택해야 한다.

그러면 settings.json 파일을 편집할 수 있다. 그러면 적당한 위치에 다음의 코드를 추가해서 넣으면 된다.

    "editor.cursorStyle": "line",

    "editor.cursorWidth": 4,

    "workbench.colorCustomizations": {

        "editorCursor.foreground": "#ffff00",

        "terminalCursor.foreground": "#ffff00"

    },

이름만 봐도 대충 짐작이 가리라 생각한다. 위의 설정은 커서는 line 형태로 하고, 그 두께를 4로 설정하며, 색상은 노란색으로 하라는 의미이다.

그렇다고 다들 내가 설정한 스타일대로 따라하라고 하면 너무 이기적이니깐, 아주 친절하게 설명해 주겠다.

"editor.cursorStyle"

이 설정은 편집기에서 사용할 커서 스타일을 정의한다. 가능한 값들은:

"block": 커서가 현재 글자를 덮는 사각형 블록이 된다.

"block-outline": 커서가 현재 글자를 덮는 블록의 윤곽선이 된다.

"line": 커서가 세로 선이 된다. (기본값)

"line-thin": 커서가 더 얇은 세로 선이 된다.

"underline": 커서가 현재 글자를 밑줄 친다.

"underline-thin": 커서가 현재 글자를 더 얇게 밑줄 친다.

"editor.cursorWidth"

커서의 너비를 픽셀 단위로 설정한다. 기본값은 1이고, 이 설정은 "line" 또는 "underline" 커서 스타일에서만 사용될 수 있다.

"workbench.colorCustomizations"

커서와 다른 UI 요소의 색상을 사용자 정의할 수 있다. 여기서는 "editorCursor.foreground"와 "terminalCursor.foreground"가 사용되었다.

"editorCursor.foreground": 편집기 커서의 전경색을 설정한다. 여기서는 노란색("#ffff00")으로 설정되었다.

"terminalCursor.foreground": 터미널 커서의 전경색을 설정한다. 여기서도 노란색("#ffff00")으로 설정되었다.

이 외에도 "workbench.colorCustomizations"에서 다양한 UI 요소의 색상을 변경할 수 있다. 예를 들어 "editor.background"으로 편집기의 배경색을 변경할 수 있다.

이러한 설정들을 통해 사용자는 VSCode의 커서 스타일, 너비, 색상 등을 자신의 취향에 맞게 수정할 수 있는 것이다.

이상, 코딩 라이프의 질을 2배 정도 올려주는 커서 바꾸기 팁이었다.