이후에 동영상으로 설명할 계획입니다. 일부 설정의 효과는 시연을 통해야 차이를 확인할 수 있는데, 블로그에 GIF를 만드는 게 귀찮아서요.
서문
프론트엔드를 처음 배울 때는 VSCode가 없어 WebStorm을 사용했습니다(당시 학생이어서 불법 복제판을 썼죠). 바로 사용할 수 있는 경험은 정말 매력적이었습니다. 하지만 사무용 컴퓨터 성능 저하, 4K 및 다중 모니터에서의 지연 문제 해결 부재, 동료들의 영향, 결정적으로 ‘설정 동기화’ 기능이 VSCode로 전환하는 마지막 계기가 되었습니다.
별도의 호버링 검색 상자가 없다는 초기 불편함을 겪은 후, 금세 제가 생각하기에 편리한 설정을 찾아냈습니다. 아래에서 자세히 설명하겠습니다. 더 나은 설정을 가지고 계신 분들은 댓글로 이유와 효과 스크린샷을 첨부해 주시기 바랍니다.
기본 설정은 잘 작동하는 경우를 제외하고 설명하지 않겠습니다. VSCode에서는 대부분의 설정을 변경할 수 있습니다. 예를 들어 "미니맵 오른쪽에 커서 행을 표시할지 여부" 같은 것도 조정 가능합니다.
스타일
테마/폰트
테마는 One Dark Pro입니다:
폰트는 Fira Code입니다:
Fira Code는 공식 추천 폰트로, 내부적으로도 사용됩니다.
Fira Code는 === 및 <= 같은 기호 변형을 아름답게 지원합니다(일부는 문자 세트와 변형을 수동으로 활성화해야 함):
많은 분들이 Fira Code의 기본 & 기호에 익숙하지 않습니다. 이 변형은 설정에서 비활성화할 수 있으며, GitHub 설명을 참조하세요. 제 설정은 다음과 같습니다:
1 | |
줄 간격은 1.4, 글자 크기는 13입니다.
편집기
편집기 설정이 가장 중요합니다. 좋은 편집기는 코딩 효율을 높이기 위한 것이죠. 하나씩 설명하겠습니다.
공백 문자 렌더링
저는 기본값인 'selection’을 사용합니다. 즉, 선택 영역에 공백 문자가 있을 때만 표시되며, 그렇지 않으면 보이지 않아 시각적으로 깔끔합니다. boundary 설정은 항상 표시로, 보기 좋지 않습니다:
자동 괄호 쌍 추가/삭제
이 설정들은 ({[ 같은 시작 괄호를 입력하면 자동으로 )}]을 생성해 줍니다. 삭제 설정도 마찬가지 원리입니다. 기본값은 삽입 시 쌍을 만들고, 삭제 시에도 쌍을 같이 삭제합니다.
괄호 색상(풀)
첫 번째를 활성화하면 각 괄호에 색상이 부여됩니다(흰색 대신). 두 번째를 켜면 각 괄호 유형마다 독립적인 색상 세트를 가집니다(실제로는 다른 괄호 색상이 반복될 수 있지만, 괄호 유형별 표시 순서에 따라 색상이 지정됩니다—제 이해와 테스트 결과입니다).
직사각형 선택 영역
기본적으로 위에서 아래로 선택할 때, 행의 시작과 끝을 지나면 전체 행이 선택됩니다:
이 스위치를 켜면 마우스 드래그로 직사각형 영역을 선택할 수 있습니다(코드 위치가 아닌 마우스 위치 기준). JSON 키 같은 여러 줄의 유사한 들여쓰기를 동시에 편집할 때 유용합니다:
터미널에서 선택할 때 Opt 키를 누르면 같은 효과가 적용됩니다.
복사 시 구문 강조 포함
일부 리치 텍스트 편집기는 특별한 처리가 없어 VSCode에서 코드를 복사할 때 색상 정보도 함께 복사됩니다. 이 설정으로 색상 없이 내용만 복사할 수 있습니다.
드래그 앤 드롭
저는 코딩할 때 코드 블록 이동을 위해 드래그를 거의 사용하지 않아 비활성화를 권장합니다. 두 번째 설정은 shift 키를 누른 상태에서 파일을 VSCode로 드래그하면 미디어 파일인 경우 파일명만 표시되고, shift 없이 드래그하면 미디어 파일이 열립니다(기본 활성화).
빈 선택 영역 시 현재 줄 복사
선택 영역이 없이 커서만 있을 때 복사하면 현재 줄이 선택됩니다. 현재 줄 복사가 더 쉬워집니다(기본 활성화).
자동 접기
코드 접기 기능은 분명히 필요합니다. 접기 범위를 강조 표시하는 것도 필요합니다(마우스를 해당 줄에 올렸을 때 효과, 현재 줄 하이라이트). 그렇지 않으면 현재 줄이 접혀 있는지 알 수 없습니다. 마지막으로 import 부분 자동 접기는 제 생각에는 필요 없습니다.
개인적으로 접기 표시는 항상 보이도록 설정하는 것을 선호합니다. 이 기능은 너무 자주 사용되기 때문에, 먼저 마우스를 올려서 어느 줄이 접혀 있는지 확인한 다음 클릭해서 펼치는 것은 효율이 너무 낮습니다. 접힌 부분을 한눈에 확인할 수 있도록 always로 설정하는 것이 좋습니다:
괄호/들여쓰기 가이드라인
아래 그림과 같지만, '들여쓰기 가이드라인’이 무엇인지 테스트해보지 못했습니다. 일단 활성화해 둡니다.
호버 시 팝업 위치
일반적으로 코드는 위에서 아래로 읽기 때문에, 이 설정은 코드에 마우스를 올리면 팝업이 위쪽에 나타나 내용을 가립니다. 팝업이 사라지도록 마우스를 움직인 다음 다시 나타나게 해야 하므로, 취소하는 것을 권장합니다.
호버 시 힌트 표시
마우스를 벗어나는 것은 일반적으로 표시하지 않으려는 것이므로, 바로 0으로 설정합니다.
마우스로 글자 크기 조정
자주 실수로 작동하므로 비활성화합니다.
에디터 영역 상단 패딩
저는 2로 설정했습니다. 하단 패딩은 필요 없습니다.
스크롤 바
수평 스크롤 바 너비는 6, 수직은 25로 설정합니다(기본값: 수평 12, 수직 14):
개인적으로 스크롤 범위를 벗어나는 것을 좋아하지 않습니다. 한 화면에 완전히 표시될 수 있는 내용에 스크롤 바가 생기므로, 마지막 옵션인 Scroll Beyond Last Line은 비활성화합니다.
수직 스크롤 바를 20으로 넓게 설정한 이유는 해당 영역에 단순히 스크롤 바뿐만 아니라 세 가지 정보가 표시되기 때문입니다:
-
스크롤 바 오른쪽의 밝은 노란색은 에디터 경고 메시지입니다.
-
스크롤 바 중간의 어두운 노란색 블록은 검색 결과(전체 검색 및 현재 에디터 검색)와 일치하는 항목입니다. 어두운 노란색 블록은 회색(커서로 선택한 부분 및 유사 내용) 또는 연한 분홍색(커서로 선택한 내용의 선언 부분)일 수도 있습니다.
-
스크롤 바 전체 줄에 걸친 파란색 선은 커서가 위치한 줄입니다.
-
스크롤 바 왼쪽의 녹색 부분은 코드 변경 사항입니다. Git을 사용 중이라면 연한 노란색으로 수정된 부분이 표시될 수도 있습니다.
이 부분의 정보 표시가 매우 풍부하므로 넓게 설정하는 것이 좋습니다.
부드러운 스크롤
강력히 권장합니다. 이 옵션을 활성화하면 스크롤할 때 대략 몇 줄을 스크롤했는지 알 수 있으며, 갑작스럽게 이동하여 “어디로 스크롤되었는지 모르는” 상황을 방지할 수 있습니다.
스크롤 고정
스크롤할 때 현재 화면을 벗어나는 범위를 확인해야 할 수 있으므로 이 옵션을 활성화합니다. 또한 수평 스크롤 시 sticky 함수가 스크롤되어 사라질 수 있으므로, 마지막 옵션은 취소하는 것을 선호합니다.
커서
첫 번째는 커서 깜빡임의 페이드 효과이고, 두 번째는 다른 위치를 클릭할 때 커서가 이전 위치에서 애니메이션으로 이동하는 효과입니다. 이전 편집 위치에 비해 현재 커서 위치가 어디인지 알 수 있어 정보가 더 풍부해집니다.
찾기
이 옵션은 비활성화하는 것을 권장합니다. 검색 시 비활성화하지 않으면 파일 상단에 불필요한 공간이 생기고 검색 창을 닫을 때 에디터가 흔들리는 현상이 발생할 수 있습니다.
하지만 이 옵션을 활성화하면 에디터 내용이 가려질 수 있으므로 상황에 따라 선택하세요(일반적으로 상단은 import 후의 줄바꿈 내용이므로 가려도 무방합니다).
자동 검색 위젯 채우기
이 옵션은 비활성화하는 것을 권장합니다. 검색을 자주 사용하는데, 검색 후 특정 내용을 선택하고 다시 검색(선택하지 않은 내용)할 때 에디터가 자동으로 선택한 내용을 검색창에 넣어 이전 검색 내용이 사라지는 경우가 있어 불편합니다.
미니맵
에디터 오른쪽의 미니맵은 항상 표시하도록 설정합니다. 미니맵은 현재 편집 위치와 특정 함수/컴포넌트에 대한 상대적 위치를 파악하는 데 도움이 되므로, 미니맵이 스크롤되지 않고 색상 블록만 렌더링되도록 설정합니다. 모든 줄을 렌더링할 필요는 없습니다.
제안
이 옵션은 기본값으로 비활성화하는 것을 권장합니다. Copilot 제안과 혼동될 수 있기 때문입니다. 아래 그림은 Copilot의 제안입니다:
그리고 이것은 미리보기 제안입니다:
이 옵션의 기본값은 first로, 항상 기본적으로 첫 번째 제안을 사용하도록 설정되어 있습니다. 하지만 제가 자주 겪는 문제는 CSS에서 wid를 입력할 때 width을 기대하지만, 실제로는 widow이 제안되는 경우입니다. 저는 이 속성을 사용하지 않지만, 매번 첫 번째로 제안되기 때문에 화살표로 전환해야 하는 번거로움이 있습니다. 따라서 여기서는 "최근 사용"으로 변경할 것을 권장합니다. 이는 입력기의 "동적 조정"과 유사한 개념입니다:
작업 영역
명령 프롬프트
동일한 명령을 반복해서 입력하는 경우가 많기 때문에 명령 기록 목록을 열어보는 것이 유용합니다. 또한 입력 내용을 유지하는 기능도 유용한데, 예를 들어 toggle로 시작하는 명령(예: Toggle Screen Capture Mode)의 경우가 그렇습니다.
주의할 점은, 입력 후 esc를 눌러 입력창이 사라진 경우, 다음에 다시 열었을 때 입력 내용이 유지되지 않습니다. 명령을 선택하여 실행한 후 다시 열면 이전 입력 내용이 유지됩니다.
디렉토리 트리
일반적으로 저는 애니메이션을 활성화합니다. “우아함은 영원하지 않기” 때문입니다. 이 설정은 “설정” 화면의 스크롤에도 영향을 미칩니다(이전에는 편집기 설정에서 부드러운 스크롤을 활성화해도 “설정” 화면과 디렉토리 트리 화면의 스크롤 효과에는 영향을 주지 않았습니다).
빠른 열기 기록
cmd + p를 누르면 quick open 입력창이 나타나며, 기록을 유지하는 기능은 매우 유용합니다. 또 다른 옵션은 포커스를 잃을 때 자동으로 사라지는지 여부인데, 대부분의 경우 자동으로 사라지는 것이 필요하지만 가끔은 그렇지 않을 수도 있습니다. 일단은 기본값인 자동 사라짐으로 유지했습니다.
작업 영역 애니메이션 효과 감소
64G 메모리의 M1 Max를 사용하는 저는 애니메이션을 줄일 필요가 없습니다(기본값은 auto로, 시스템 구성에 따라 자동으로 조정되며, 여러 컴퓨터 간의 설정 동기화 문제에 적합합니다).
글꼴 스무딩
이는 CSS의 -webkit-font-smoothing: antialiased;와 유사합니다. default는 대부분의 non-retina 화면에서 가장 선명한 글꼴을 표시하기 위해 사용됩니다(서브픽셀 레벨). antialiased는 픽셀 레벨 스무딩으로, 글꼴이 더 얇아질 수 있습니다. 다음 이미지를 참조하세요:
이 설정은 “작업 영역” 섹션에 있지만 편집기 영역에도 영향을 미칩니다. antialiased를 활성화하면 편집기 영역과 작업 영역 모두에서 글꼴이 더 어둡고(대비가 약해짐) 얇아지는 것을 확인할 수 있습니다. 저는 후자를 선호하므로 활성화했습니다.
참고로, 이 "서브픽셀 레벨"은 픽셀보다 더 작은 레벨을 의미하는 것이 아니라, “픽셀에 미치지 못하는” 레벨을 의미합니다. 즉, 더 낮은 레벨이지 더 높은 레벨이 아닙니다.
디렉토리 트리 고정
매우 유용한 기능으로, 스크롤할 때 현재 경로를 확인할 수 있습니다. 유일한 아쉬운 점은 box-shadow를 추가하면 더 좋을 것 같다는 점입니다. 그렇지 않으면 구분이 잘 안 될 수 있습니다:
sticky의 최대 레벨도 수정할 수 있으며, 기본값은 7로 충분합니다(편집기 sticky의 기본값은 5입니다).
참고로, 이 설정은 “설정” 화면에도 동일하게 적용됩니다(원래 설정 화면은 편집기가 아닌 작업 영역에 속함):
디렉토리 트리의 들여쓰기는 14로 변경했으며, 가이드라인은 항상 표시하도록 설정했습니다. 그렇지 않으면 동일한 레벨의 파일이 너무 많아 찾기 어려울 수 있습니다:
디렉토리 탐색
디렉토리 탐색은 필요하지만 파일/폴더 아이콘은 필요하지 않습니다. 이렇게 하면 파일 내의 배열 및 클래스와 명확하게 구분할 수 있어 매우 유용합니다:
수정된 탭
이와 관련된 여러 옵션이 있습니다. 예를 들어 수정 후 저장되지 않은 파일 상단에 강조선을 표시하는 옵션:
기본적으로 점이 표시되지만, 이 옵션을 활성화하면 점과 선이 동시에 표시됩니다. 편집기를 다시 시작하면 상단의 파란색 선만 표시됩니다(버그일 수 있으며, 실제로는 편집기를 다시 시작하지 않아도 적용되어야 합니다).
효과:
"점"도 탭 공간의 일부를 차지하기 때문에 더 많은 탭 내용 정보를 표시할 수 없게 됩니다. 따라서 이 옵션을 활성화하는 것을 권장합니다.
마우스 탐색
이것은 기본 옵션이지만 설명하자면, 왼쪽 버튼(오른손 사용자의 경우 4, 5 버튼)이 있는 마우스의 경우 직접 탐색에 사용할 수 있어 매우 유용합니다.
탭 고정
고정된 탭은 기본적으로 편집기 그룹의 왼쪽에 나타나지만, 별도의 행으로 배치하면 더 직관적이며 고정되지 않은 탭과 구분하기 쉽습니다. 효과는 다음과 같습니다:
참고로, 기본적으로 고정된 탭은 마우스 중간 버튼이나 cmd + w로 닫을 수 없습니다(누르면 고정되지 않은 탭이 열리며 고정된 탭이 닫히지 않습니다). 이 동작은 수정할 수 있습니다:
탭 닫기 버튼
왼손으로 cmd + w를 사용해 탭을 닫는 습관이 있어 이 옵션을 해제했습니다. 또, 사실 탭을 더블 클릭해 닫는 게 더 편하지만 공식적으로 구현하지 않겠다고 답변했는데, 아래 참고:
탭 줄바꿈
탭을 많이 열면 스크롤할 때 불편하고 전체를 파악하기 어려워 탭 줄바꿈을 선호합니다. 효과는 다음과 같습니다:
다만, 줄바꿈된 탭은 앞서 언급한 '탭 상단 파란색 강조’와 혼동될 수 있습니다(파란 선이 위 탭의 것인지 아래 탭의 것인지 직관적으로 파악하기 어렵습니다). 탭에 더 많은 내용을 표시할지, 직관성을 우선할지는 선택의 문제입니다:
탭 높이
콤팩트 레이아웃은 전체를 파악하기 쉽고 공간을 덜 차지합니다.
탭 더블 클릭 닫기(?)
이 옵션은 공식적으로 구현하지 않겠다고 한 ‘탭 더블 클릭 닫기’ 기능처럼 보이지만(위에서 언급한 대로), 충돌 가능성이 있는 '탭 더블 클릭 시 에디터 그룹 자동 확장’을 꺼도 이 설정은 작동하지 않습니다. 제가 잘못 이해한 건지 버그인지 모르겠습니다.
네이티브 탭
관련 설정이 두 가지 있습니다:
첫 번째 설정을 활성화하면 여러 프로젝트 창을 하나의 창으로 합칠 수 있습니다. ‘창’ 메뉴에 ‘모든 창 합치기’ 옵션이 나타나, 하나의 창에서 여러 프로젝트를 전환할 수 있어 매우 유용합니다:
하지만 이 경우 사용자 정의 제목을 사용할 수 없습니다(사실 별로 유용하지 않다고 생각합니다). 사용자 정의 제목은 다음과 같습니다:
첫 번째 설정이 켜져 있으면 두 번째 설정은 native나 custom으로 설정해도 효과가 없습니다. 첫 번째 설정이 꺼져 있고 두 번째 설정이 native로 설정되면 '모든 창 합치기’와 '사용자 정의 제목 표시줄’이 모두 사라집니다(이 설정의 의미를 모르겠습니다).
디렉토리 트리 드래그 앤 드롭
자주 실수로 터치해 수백 개의 수정 사항이 발생하므로 껐습니다.
검색 결과 자동 접기
기본적으로 항상 펼쳐져 있지만, 검색 결과가 너무 많으면(보통 입력을 완료하지 않았을 때) 펼치는 것은 불필요하고 전체를 파악하는 데 방해가 됩니다.
또, 검색창에서 '제외할 파일’을 지정하지 않으면 NextJS 프로젝트의 .next 디렉토리 같은 곳에서 방대한 검색 결과가 나올 수 있으므로 이 설정도 필요합니다.
주의할 점은, 이 ‘펼치기’, '접기’의 10개 파일 제한은 검색 결과에서 특정 폴더 아래에 나타나는 파일 수를 의미하며, 전체 검색 결과의 폴더 수가 아닙니다:
따라서 특정 폴더에서 검색 결과에 해당하는 파일이 너무 많으면(폴더가 접힌 상태) 더 많은 검색 정보를 제공해야 할지 확인해야 합니다.
검색창에 선택 내용 자동 입력
보통 내용을 선택한 후 검색하려 하므로 ‘Seed On Focus’ 옵션은 cmd + v 작업을 하나 줄여줍니다.
참고로, 이는 '검색 위젯’에서의 '선택 후 검색에 포커스 시 자동 입력’과 다릅니다. 에디터에서 내용을 선택한 후 검색 위젯에 포커스하는 것은 검색을 위한 것만이 아니라, 현재 에디터에서 선택한 내용을 강조해 보기 위한 것일 수도 있습니다. 하지만 이때 선택 내용이 자동으로 검색창에 입력되면 종종 예상과 다릅니다.
반면, 내용을 선택한 후 검색 뷰(오른쪽)에 포커스하면 대부분 검색을 위한 것입니다.
또, 검색 결과에서 해당 내용이 문서 내 어느 위치에 있는지 알기 위해 줄 번호를 표시하는 것도 유용합니다.
마지막으로 Smart Case는 작은 트릭입니다. 모두 소문자로 입력하면 검색 이름을 잘 기억하지 못한다는 의미이고, 검색 내용(예: 카멜 케이스 함수명)의 특정 문자가 대문자인지 확실하면 대소문자를 구분해 검색하면 매우 유용합니다.
이 외에도, 이전에 입력한 내용을 기억하고 있다면 기억된 내용이 선택된 상태여도, 입력 예상과 다르면 그냥 입력하면 됩니다. 이전 검색 내용이 여전히 유용하다면 더 좋지 않을까요? ↓
검색 시 전역 ignore 무시
Git에는 전역 기본 ignore 기능이 있습니다. 이 옵션을 활성화하면 검색 시 해당 목록에 있는 파일 및 폴더를 무시할 수 있어 일반적으로 유용합니다.
또한 상위 디렉토리에서 ignore를 활성화하는 옵션이 있는데, 정확한 의미는 잘 모르겠지만 다단계 Git 관리와 관련된 것 같습니다. 어차피 무시할 거라면 체크해두었습니다:
디버깅과 테스트
제 기술 수준이 아직 부족하여 VSCode의 디버깅 및 테스트 기능은 거의 사용하지 않습니다. NextJS 같은 NodeJS 애플리케이션 디버깅에만 사용해봤는데, Chrome과 사용법이 비슷했습니다. 자주 사용하지 않아 특별히 개선할 설정이 없어 이 부분은 생략하겠습니다.
파일 수정 효과
줄 번호가 표시되는 열에서 차이점을 실선으로 표시할지 '거터’로 표시할지 설정할 수 있습니다:
저는 실선이 더 선호되어 두 옵션 모두 해제했습니다.
Git 커밋 버튼 비활성화
솔직히 왼쪽에 있는 이 커밋 버튼은 한 번도 사용해본 적 없습니다. 항상 명령줄로 Git 작업을 하기 때문에 이 옵션을 해제했습니다.
마찬가지로 (GitHub Copilot 버튼으로 보이는) 이 자동 커밋 메시지 생성 기능도 해제했습니다. 특히 회사 프로젝트에서는 요구사항/버그 카드 번호를 반드시 입력해야 하므로 이 스마트 커밋 메시지 기능은 더욱 쓸모가 없습니다:
확장 프로그램
알림 비활성화
어떤 확장 프로그램도 제게 지시할 필요가 없습니다. 필요할 때 직접 찾아서 사용할 것입니다.
터미널
우클릭 동작
일반적으로 마우스 왼쪽 버튼으로 선택한 후 우클릭으로 컨텍스트 메뉴가 나타납니다. 하지만 VSCode 기본 동작은 내용(단어)을 선택하면 바로 우클릭 메뉴가 나타납니다. 가능하지만 필요하지 않습니다.
터미널 최대 행 수
사실 이 설정은 변경하지 않아도 됩니다. 가끔 오래된 로그 정보를 확인해야 할 때가 있고, 64GB 메모리를 가지고 있어 크게 늘려도 무방합니다.
터미널 스크롤 애니메이션
애니메이션을 좋아하지만(우아하니까), 터미널의 스크롤 애니메이션은 관성 효과가 있어 스크롤 양을 조절하기 어렵습니다. 에디터나 작업 영역의 스크롤 효과와는 차이가 크므로 비활성화했습니다.
CSS/Less/Sass
중복 속성 경고
이 기능은 매우 유용합니다. 때로는 외부에서 여러 속성 값을 복사해 붙여넣기(주로 브라우저 요소 검사의 스타일에서 복사)한 후 중복 속성을 제거하는 경우가 많기 때문입니다.
Git
자동 Stash
설명이 명확하게 되어 있습니다. 한 단계 작업을 줄일 수 있으므로 활성화를 권장합니다.
서드파티 확장 프로그램
별로 말할 것이 없습니다. 확장 프로그램을 설치하는 것은 각자의 필요에 따른 것이므로 자신의 요구에 맞게 설정하면 됩니다.
GitLens
하지만 일부 플러그인은 유료 기능 추천을 끌 수 있습니다. 바로 GitLens 같은 경우인데, Git 브랜치 병합 상황을 (우연히) 확인할 때 유료 기능 알림이 나타납니다. 이 기능은 끌 수 있습니다(플러그인 개발자의 너그러움에 감사합니다):
One Dark Pro
이 기능이 마음에 듭니다. 메서드와 함수 이름을 더욱 뚜렷하게 볼 수 있습니다:
후기
이렇게 많은 설정을 소개했지만, 자신에게 맞는 것이 가장 중요합니다. 모두 효율적으로 작업하고 일찍 퇴근하시길 바랍니다!
블로거의 말:
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.
