사용자 인터페이스

Visual Studio Code의 핵심은 코드 편집기입니다. 다른 많은 코드 편집기와 마찬가지로 VS Code는 왼쪽에 탐색기가 있고 오른쪽에 편집기가 있는 일반적인 사용자 인터페이스 및 레이아웃을 채택합니다. 탐색기에는 액세스할 수 있는 모든 파일과 폴더가 표시되고, 편집기에는 연 파일의 내용이 표시됩니다.

기본 레이아웃

VS Code는 편집기를 위한 공간을 최대화하면서도 폴더 또는 프로젝트의 전체 컨텍스트를 탐색하고 액세스할 수 있는 충분한 공간을 남겨두는 간단하고 직관적인 레이아웃을 제공합니다. 사용자 인터페이스는 여섯 가지 주요 영역으로 나뉩니다.

• 편집기 - 파일을 편집하는 메인 영역입니다. 원하는 만큼 많은 편집기를 세로 및 가로로 나란히 열 수 있습니다.
• 기본 사이드 바 - 프로젝트 작업 중에 도움이 되는 탐색기와 같은 다양한 보기를 포함합니다.
• 보조 사이드 바 - 기본 사이드 바의 반대쪽에 있습니다. 기본적으로 채팅 보기가 포함됩니다. 기본 사이드 바의 보기를 보조 사이드 바로 드래그 앤 드롭하여 이동할 수 있습니다.
• 상태 표시줄 - 열린 프로젝트 및 편집 중인 파일에 대한 정보입니다.
• 활동 표시줄 - 맨 왼쪽에 있습니다. 보기를 전환할 수 있으며 Git이 활성화된 경우 나가는 변경 횟수와 같은 추가 컨텍스트별 표시기를 제공합니다. 활동 표시줄의 위치를 변경할 수 있습니다.
• 패널 - 편집기 영역 아래에 보기를 위한 추가 공간입니다. 기본적으로 출력, 디버그 정보, 오류 및 경고, 통합 터미널이 포함됩니다. 패널은 더 많은 세로 공간을 위해 왼쪽 또는 오른쪽으로 이동할 수도 있습니다.

VS Code를 시작할 때마다 마지막으로 닫은 상태와 동일한 상태로 열립니다. 폴더, 레이아웃 및 열린 파일이 보존됩니다.

각 편집기에서 열린 파일은 편집기 영역 상단의 탭이 있는 헤더(탭)에 표시됩니다. 탭이 있는 헤더에 대해 자세히 알아보려면 탭 섹션을 참조하십시오.

기본 및 보조 사이드 바 사용에 대해 자세히 알아보십시오.

나란히 편집

원하는 만큼 많은 편집기를 세로 및 가로로 나란히 열 수 있습니다. 이미 편집기가 열려 있는 경우 다른 편집기를 옆에 여는 여러 가지 방법이 있습니다.

• 탐색기 보기에서 파일을 Alt 키를 누른 상태로 선택합니다.
• 활성 편집기를 두 개로 분할하려면 ⌘\ (Windows, Linux Ctrl+\)를 누릅니다.
• 파일의 탐색기 컨텍스트 메뉴에서 옆으로 열기(⌃Enter (Windows, Linux Ctrl+Enter))를 선택합니다.
• 편집기 오른쪽 상단에 있는 편집기 분할 버튼을 선택합니다.
• 파일을 편집기 영역의 아무 쪽이나 드래그 앤 드롭합니다. 탭을 이동하는 대신 복사하려면 드래그하는 동안 Ctrl 키(macOS에서는 Option)를 누르고 있습니다.
• 빠른 열기(⌘P (Windows, Linux Ctrl+P)) 파일 목록에서 ⌃Enter (Windows, Linux Ctrl+Enter)를 누릅니다.

다른 파일을 열면 활성 편집기에 해당 파일의 내용이 표시됩니다. 옆에 두 개의 편집기가 있고 오른쪽 편집기에서 'foo.cs' 파일을 열고 싶다면, 'foo.cs' 파일을 열기 전에 해당 편집기가 활성화되었는지(클릭하여) 확인하십시오.

기본적으로 편집기는 활성 편집기 오른쪽에 열립니다. workbench.editor.openSideBySideDirection 설정을 사용하여 새 편집기가 활성 편집기 아래에 열리도록 이 동작을 변경할 수 있습니다.

하나 이상의 편집기가 열려 있을 때 Ctrl 키(macOS에서는 Cmd)를 누른 상태에서 1, 2 또는 3을 누르면 빠르게 전환할 수 있습니다.

편집기 그룹

편집기를 분할할 때(편집기 분할 또는 옆으로 열기 명령 사용) 새 편집기 영역(편집기 그룹)이 생성되어 항목 그룹을 보유할 수 있습니다. 원하는 만큼 많은 편집기 그룹을 세로 및 가로로 나란히 열 수 있습니다.

탐색기 보기 상단의 열린 편집기 섹션에서 이를 명확하게 볼 수 있습니다(탐색기 보기에서 ... > 열린 편집기 전환).

작업대에서 편집기 그룹을 드래그 앤 드롭하고, 개별 탭을 그룹 간에 이동하고, 전체 그룹을 빠르게 닫을 수 있습니다(모두 닫기).

그룹 내 분할

새 편집기 그룹을 만들지 않고 현재 편집기를 분할하려면 보기: 그룹 내 편집기 분할 명령(⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\))을 사용합니다. 이 편집기 모드 및 양쪽을 탐색하는 특정 명령에 대해 자세히 알아보려면 사용자 지정 레이아웃 기사의 섹션을 읽을 수 있습니다.

플로팅 창

편집기, 터미널 또는 특정 보기를 자체 플로팅 창으로 이동할 수 있습니다. 여러 모니터 설정이 있고 다른 모니터에 파일을 열어 두려는 경우 유용합니다.

현재 VS Code 창에서 편집기 탭을 드래그하여 플로팅 창에서 엽니다. 또는 편집기 탭의 새 창으로 이동 또는 새 창으로 복사 컨텍스트 옵션을 사용합니다.

플로팅 창을 화면 상단에 고정하려면 해당 제목 표시줄에서 항상 위에 고정 옵션(핀 아이콘)을 선택합니다.

플로팅 창에 대해 자세히 알아보려면 사용자 지정 레이아웃 기사의 섹션을 읽으십시오.

미니맵

미니맵(코드 개요)은 소스 코드에 대한 높은 수준의 개요를 제공하여 빠른 탐색 및 코드 이해에 유용합니다. 파일의 미니맵은 편집기 오른쪽에 표시됩니다. 음영 처리된 영역을 선택하거나 드래그하여 파일의 다른 섹션으로 빠르게 이동할 수 있습니다.

편집기에 접기 표시기(예: //#region 주석)가 있는 경우 미니맵에 접기 표시기 이름이 표시됩니다. 접기 표시기는 언어별이므로 언어에 적용되는 표시기를 확인하십시오.

고정 스크롤

고정 스크롤은 현재 보이는 중첩된 범위의 시작 줄을 편집기 상단에 표시합니다. 파일에서 현재 위치를 나타내어 탐색을 용이하게 하고 현재 범위의 맨 위로 빠르게 이동할 수 있습니다.

고정 스크롤은 머리글을 만들기 위해 여러 다른 콘텐츠 모델을 사용합니다. 개요 제공자 모델, 접기 제공자 모델 및 들여쓰기 모델 중에서 선택하여 고정 스크롤 영역에 표시할 줄을 결정할 수 있습니다. 현재 언어에 모델을 사용할 수 없는 경우 VS Code는 위에 제공된 순서대로 다음 모델로 대체됩니다. 처음에 사용되는 기본 모델은 editor.stickyScroll.defaultModel 설정에서 가져옵니다.

들여쓰기 가이드

편집기는 들여쓰기 가이드(세로선)를 표시하여 일치하는 들여쓰기 수준을 빠르게 볼 수 있도록 합니다. 들여쓰기 가이드를 비활성화하려면 사용자 또는 작업 영역 설정에서 editor.guides.indentation을 false로 설정할 수 있습니다.

브레드크럼

편집기에는 상단에 탐색 막대(브레드크럼이라고도 함)가 있습니다. 브레드크럼은 항상 파일 경로를 표시하며, 현재 파일 유형에 기호에 대한 언어 지원이 있는 경우 커서 위치까지의 기호 경로를 표시합니다. 브레드크럼을 사용하면 폴더, 파일 및 기호 간에 빠르게 탐색할 수 있습니다.

보기 > 모양 > 브레드크럼 토글 메뉴 항목 또는 보기: 브레드크럼 토글 명령을 사용하여 브레드크럼을 비활성화할 수 있습니다. 브레드크럼 기능에 대한 자세한 내용(예: 모양 사용자 지정 방법)은 코드 탐색 기사의 브레드크럼 섹션을 참조하십시오.

탐색기 보기

탐색기 보기는 프로젝트의 파일과 폴더를 탐색, 열기 및 관리하는 데 사용됩니다. VS Code는 파일 및 폴더 기반이므로 VS Code에서 파일이나 폴더를 열어 즉시 시작할 수 있습니다.

VS Code에서 폴더를 연 후 폴더의 내용은 탐색기 보기에 표시됩니다. 여기서 많은 작업을 수행할 수 있습니다.

• 파일 및 폴더 생성, 삭제, 이름 바꾸기.
• 드래그 앤 드롭으로 파일 및 폴더 이동.
• 컨텍스트 메뉴를 사용하여 모든 옵션 탐색.

VS Code는 특히 명령줄 도구와 같이 함께 사용하는 다른 도구와 잘 작동합니다. VS Code에서 현재 열려 있는 폴더의 컨텍스트에서 명령줄 도구를 실행하려면 폴더를 마우스 오른쪽 버튼으로 클릭하고 통합 터미널에서 열기를 선택합니다.

또한 파일 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 Windows에서는 파일 탐색기에서 보기, macOS에서는 Finder에서 보기, Linux에서는 포함 폴더 열기를 선택하여 네이티브 운영 체제 파일 탐색기에서 파일 또는 폴더의 위치로 이동할 수 있습니다.

기본적으로 VS Code는 .git과 같이 일부 폴더를 탐색기 보기에 표시하지 않도록 제외합니다. files.exclude 설정을 사용하여 탐색기 보기에서 파일 및 폴더를 숨기기 위한 규칙을 구성합니다.

다중 선택

탐색기 보기 및 열린 편집기 섹션에서 여러 파일을 선택하여 여러 항목에 대한 작업(삭제, 드래그 앤 드롭 또는 옆으로 열기)을 실행할 수 있습니다. Ctrl 키(macOS에서는 Cmd)를 누른 상태로 개별 파일을 선택하거나 Shift 키를 누른 상태로 파일 범위를 선택합니다. 두 항목을 선택하면 컨텍스트 메뉴의 선택 항목 비교 명령을 사용하여 두 파일을 빠르게 비교할 수도 있습니다.

"workbench.list.multiSelectModifier": "alt"

고급 트리 탐색

탐색기 보기에서 파일 및 폴더를 필터링할 수 있습니다. 탐색기 보기에 포커스가 있는 상태에서 ⌥⌘F (Windows, Linux Ctrl+Alt+F)를 눌러 찾기 컨트롤을 열고 일치시킬 파일 또는 폴더 이름의 일부를 입력합니다. 이 탐색 기능은 VS Code의 모든 트리 보기에서 사용할 수 있습니다.

필터 버튼을 누르면 두 모드(강조 표시 및 필터링) 간에 전환됩니다. 아래쪽 화살표를 누르면 첫 번째 일치하는 요소에 포커스를 맞추고 후속 일치하는 요소로 이동할 수 있습니다. 강조 표시 모드에서는 일치하는 파일이 포함된 폴더를 나타내는 배지가 폴더에 표시됩니다.

퍼지 일치 버튼을 누르면 정확한 일치와 퍼지 일치 간에 전환되며, 퍼지 일치에서는 파일 또는 폴더 이름의 모든 부분과 일치하는 문자 시퀀스를 입력할 수 있습니다.

개요 보기

개요 보기는 탐색기 보기 하단에 있는 별도의 섹션입니다. 확장하면 현재 활성 편집기의 기호 트리가 표시됩니다.

개요 보기에는 다양한 정렬 기준 모드, 선택적 커서 추적 기능이 있으며 일반적인 열기 제스처를 지원합니다. 또한 찾기 또는 필터링을 위한 입력 상자가 포함되어 있습니다. 오류 및 경고도 개요 보기에 표시되어 문제의 위치를 한눈에 볼 수 있습니다.

기호의 경우 이 보기는 설치된 확장에서 계산한 파일 형식별 정보를 사용합니다. 예를 들어, 내장 Markdown 지원은 Markdown 파일의 기호에 대한 Markdown 헤더 계층 구조를 반환합니다.

몇 가지 개요 보기 설정이 있습니다. outline.으로 시작하는 설정을 검색하여 개요 보기에 표시되는 정보를 구성합니다.

타임라인 보기

파일 탐색기 하단에서 액세스할 수 있는 타임라인 보기는 파일의 이벤트 기록을 시각화하는 통합 보기입니다. 예를 들어, 타임라인 보기에서 Git 커밋 또는 로컬 파일 저장 기록을 볼 수 있습니다.

타임라인 보기 도구 모음의 필터 작업을 통해 소스 제어 이벤트와 로컬 파일 이벤트 간에 필터링할 수 있습니다.

로컬 파일 기록

설정에 따라 편집기를 저장할 때마다 목록에 새 항목이 추가됩니다. 각 로컬 기록 항목에는 항목이 생성된 시점의 파일 전체 내용이 포함되며, 특정 경우에는 더 의미론적인 정보(예: 리팩터링 표시)를 제공할 수 있습니다.

항목에서 다음을 수행할 수 있습니다.

• 로컬 파일 또는 이전 항목과의 변경 사항 비교.
• 내용 복원.
• 항목 삭제 또는 이름 바꾸기.

로컬 기록 작업을 위한 이러한 설정을 구성할 수 있습니다.

• workbench.localHistory.enabled - 로컬 기록 활성화 또는 비활성화 (기본값: true)
• workbench.localHistory.maxFileSize - 로컬 기록 항목을 만들 때의 파일 크기 제한 (기본값: 256 KB)
• workbench.localHistory.maxFileEntries - 파일당 로컬 기록 항목 제한 (기본값: 50)
• workbench.localHistory.exclude - 로컬 기록에서 특정 파일을 제외하기 위한 glob 패턴
• workbench.localHistory.mergeWindow - 로컬 파일 기록의 마지막 항목에 추가 변경 사항이 추가되는 시간 간격(초) (기본값 10초)

커밋 기록

VS Code의 내장 Git 지원은 지정된 파일의 Git 커밋 기록을 제공합니다. 커밋을 선택하면 해당 커밋에서 도입된 변경 사항의 diff 보기가 열립니다. 커밋을 마우스 오른쪽 버튼으로 클릭하면 커밋 ID 복사 및 커밋 메시지 복사 옵션을 얻을 수 있습니다.

기록에서 커밋을 마우스 오른쪽 버튼으로 클릭하면 다음을 수행할 수 있습니다.

• 변경 내용 열기 - 파일의 변경 내용을 diff 보기로 엽니다.
• 커밋 보기 - 여러 파일의 diff 보기를 열어 커밋의 모든 파일에 대한 변경 내용을 확인합니다.
• 비교용으로 선택 - 다른 항목과 비교할 항목을 선택합니다.
• 커밋 ID 복사 - 클립보드에 커밋 ID를 복사합니다.
• 커밋 메시지 복사 - 클립보드에 커밋 메시지를 복사합니다.

Git 기록 작업을 위한 이 설정을 구성할 수 있습니다.

• git.timeline.date - 파일 커밋의 커밋 날짜 또는 작성 날짜 표시

보기

탐색기 보기는 VS Code에서 사용할 수 있는 보기 중 하나일 뿐입니다. 또한 다음을 위한 보기도 있습니다.

• 검색 - 열린 폴더에 대한 전역 검색 및 바꾸기를 제공합니다.
• 소스 제어 - VS Code에는 기본적으로 Git 소스 제어가 포함됩니다.
• 실행 - VS Code의 실행 및 디버그 보기는 변수, 호출 스택 및 중단점을 표시합니다.
• 확장 - VS Code 내에서 확장을 설치하고 관리합니다.
• 사용자 지정 보기 - 확장에서 제공하는 보기입니다.

활동 표시줄을 마우스 오른쪽 버튼으로 클릭하여 보기를 표시하거나 숨길 수 있으며, 드래그 앤 드롭을 사용하여 순서를 변경할 수 있습니다. 탐색기 보기 내에서는 '...' 메뉴를 통해 섹션을 표시하거나 숨길 수 있으며, 섹션을 드래그 앤 드롭하여 순서를 변경할 수 있습니다.

명령 팔레트

VS Code는 키보드로도 동등하게 액세스할 수 있습니다. 알아야 할 가장 중요한 키 조합은 명령 팔레트를 불러오는 ⇧⌘P (Windows, Linux Ctrl+Shift+P)입니다. 여기서 가장 일반적인 작업에 대한 바로 가기 키를 포함하여 VS Code 내의 모든 기능에 액세스할 수 있습니다.

명령 팔레트는 많은 명령에 액세스할 수 있게 해줍니다. 동일한 대화형 창을 사용하여 편집기 명령을 실행하고, 파일을 열고, 기호를 검색하고, 파일의 빠른 개요를 볼 수 있습니다. 다음은 몇 가지 팁입니다.

• ⌘P (Windows, Linux Ctrl+P)를 사용하면 이름으로 파일을 열거나 기호를 탐색할 수 있습니다.
• ⌃Tab (Windows, Linux Ctrl+Tab)를 누르면 마지막으로 열린 파일 세트 사이를 순환합니다.
• ⇧⌘P (Windows, Linux Ctrl+Shift+P)를 누르면 편집기 명령으로 직접 이동합니다.
• ⇧⌘O (Windows, Linux Ctrl+Shift+O)를 사용하면 파일의 특정 기호로 이동할 수 있습니다.
• ⌃G (Windows, Linux Ctrl+G)를 사용하면 파일의 특정 줄로 이동할 수 있습니다.

입력 필드에 ?를 입력하면 명령 팔레트에서 실행할 수 있는 사용 가능한 명령 목록을 얻을 수 있습니다.

편집기 구성

VS Code는 편집기를 구성할 수 있는 여러 옵션을 제공합니다. 보기 > 모양 메뉴에서 사이드 바, 상태 표시줄, 활동 표시줄과 같이 사용자 인터페이스의 다양한 부분을 숨기거나 전환할 수 있습니다.

메뉴 모음 숨기기 (Windows, Linux)

Windows 및 Linux에서 메뉴 모음을 숨기려면 window.menuBarVisibility 설정을 classic에서 toggle 또는 hidden으로 변경합니다. toggle 설정은 Alt 키를 한 번 누르면 메뉴 모음이 다시 표시됨을 의미합니다.

보기: 메뉴 모음 토글 명령을 사용하여 Windows 및 Linux에서 메뉴 모음을 숨길 수도 있습니다. 이 명령은 window.menuBarVisibility를 classic에서 compact로 설정하여 메뉴 모음이 활동 표시줄로 이동하게 합니다. 메뉴 모음을 classic 위치로 되돌리려면 보기: 메뉴 모음 토글 명령을 다시 실행할 수 있습니다.

설정

대부분의 편집기 구성은 설정에서 관리되며 직접 수정할 수 있습니다. 사용자 설정 또는 작업 영역 설정을 통해 전역적으로 옵션을 설정할 수 있습니다. 설정 값은 settings.json 파일에 저장됩니다.

설정 편집기에서 설정을 보거나 편집할 수 있습니다(파일 > 기본 설정 > 설정 선택 또는 ⌘, (Windows, Linux Ctrl+,) 누름). 사용자 및 작업 영역 탭을 사용하여 사용자 및 작업 영역 설정 간에 전환합니다. 맨 위에 있는 검색 상자를 사용하여 설정을 필터링할 수 있습니다.

또는 settings.json 파일에서 사용자 설정을 직접 수정할 수 있습니다. preferences: Open User Settings (JSON) 명령을 사용하여 settings.json 파일을 엽니다. 작업 영역 설정의 경우 작업 영역의 .vscode 폴더에서 settings.json 파일을 엽니다.

Zen 모드

Zen 모드를 사용하면 편집기만 제외하고 모든 UI 요소를 숨기고, VS Code를 전체 화면으로 전환하고, 편집기를 중앙에 배치하여 코드에 집중할 수 있습니다. Zen 모드는 보기 > 모양 > Zen 모드 메뉴, 명령 팔레트의 보기: Zen 모드 토글 또는 바로 가기 ⌘K Z (Windows, Linux Ctrl+K Z)를 사용하여 토글할 수 있습니다. Zen 모드를 종료하려면 Esc 키를 두 번 누릅니다. 전체 화면으로 전환하는 것은 zenMode.fullScreen을 통해 비활성화할 수 있습니다.

Zen 모드는 다음 설정을 통해 더 세부적으로 조정할 수 있습니다.

• zenMode.hideActivityBar - 활동 표시줄 숨기기. 기본값: true.
• zenMode.hideStatusBar - 상태 표시줄 숨기기. 기본값: true.
• zenMode.hideLineNumbers - 줄 번호 숨기기. 기본값: true.
• zenMode.showTabs - 여러 개, 하나 또는 없음 편집기 탭을 표시할지 여부를 제어합니다. 기본값: multiple.
• zenMode.fullScreen - 작업대를 전체 화면으로 표시합니다. 기본값: true.
• zenMode.restore - 다시 시작 시 Zen 모드 복원. 기본값: true.
• zenMode.centerLayout - 중앙 편집기 레이아웃을 사용합니다. 기본값: true.
• zenMode.silentNotifications - 알림 표시 안 함. 기본값: true.

방해 금지 모드로 알림 줄이기

알림이 팝업되는 것에 압도당하는 경우, 모든 알림에 대해 또는 특정 확장 프로그램의 알림에 대해 알림을 줄이는 방법이 있습니다.

상태 표시줄의 종 모양 아이콘을 선택하여 알림 영역을 엽니다. 이곳은 방해 금지 모드를 활성화한 경우에도 언제든지 모든 알림에 액세스할 수 있는 곳입니다.

물음표가 있는 종 모양 아이콘을 찾아 확장에서 알림을 선택적으로 비활성화하거나 모든 알림을 비활성화하기 위해 전역 방해 금지 모드를 활성화할 수 있는 메뉴에 액세스합니다.

중앙 편집기 레이아웃

중앙 편집기 레이아웃을 사용하면 편집기 영역을 중앙 정렬할 수 있습니다. 단일 모니터에서 단일 편집기를 작업할 때 유용합니다. 측면 테두리를 사용하여 보기를 크기 조정할 수 있습니다(Alt 키를 누른 상태로 측면을 독립적으로 이동).

탭

VS Code는 편집기 위의 제목 영역에 탭(탭 헤더)으로 열린 항목을 표시합니다. 파일을 열면 해당 파일에 대한 새 탭이 추가됩니다. 탭을 사용하면 항목 간에 빠르게 이동할 수 있습니다.

탭을 드래그 앤 드롭하여 순서를 변경할 수 있습니다. 여러 탭에 대해 한 번에 작업을 수행하려면 Ctrl 키(macOS에서는 Cmd)를 누른 상태로 작업하려는 탭을 선택합니다. 탭 범위를 선택하려면 Shift 키를 누른 상태로 범위의 첫 번째와 마지막 탭을 선택합니다.

열린 항목이 제목 영역에 맞지 않을 만큼 많으면 탐색기 보기의 열린 편집기 섹션(... 버튼을 통해 사용 가능)을 사용하여 탭이 있는 항목의 드롭다운 목록을 표시할 수 있습니다.

탭과 편집기 영역 사이에 스크롤 막대가 있어 편집기를 보기로 끌어올 수 있습니다. 작업대 > 편집기: 제목 스크롤바 크기 조정(workbench.editor.titleScrollbarSizing) 설정을 large로 설정하면 스크롤바 높이를 늘려 끌기 쉽게 만들 수 있습니다. workbench.editor.titleScrollbarVisibility 설정을 사용하여 스크롤바의 가시성을 제어합니다.

탭을 사용하지 않으려면 workbench.editor.showTabs 설정을 single로 설정하여 기능을 비활성화할 수 있습니다.

    "workbench.editor.showTabs": "single"

아래 섹션에서 VS Code를 탭 없이 작업하기에 최적화하는 방법을 확인하세요.

탭 순서

기본적으로 새 탭은 기존 탭의 오른쪽에 추가됩니다. workbench.editor.openPositioning 설정을 사용하여 새 탭이 나타나는 위치를 제어할 수 있습니다.

예를 들어, 새 탭이 왼쪽에 나타나는 것을 선호할 수 있습니다.

    "workbench.editor.openPositioning": "left"

탭을 드래그 앤 드롭하여 순서를 변경할 수 있습니다.

편집기 탭이 항상 보이도록 하려면 편집기 탭 표시줄에 고정할 수 있습니다. 탭 고정에 대한 자세한 내용은 사용자 지정 레이아웃 기사에서 알아보십시오.

workbench.editor.showTabIndex 설정을 사용하면 탭 헤더에 각 탭의 인덱스를 표시할 수 있습니다. 이렇게 하면 Ctrl 키(macOS에서는 Cmd) + 숫자 바로 가기를 사용하여 특정 탭으로 빠르게 전환하기 위해 어떤 숫자를 사용해야 하는지 쉽게 알 수 있습니다.

미리 보기 모드

탐색기 보기에서 파일을 한 번 클릭하거나 선택하면 미리 보기 모드로 표시되고 기존 탭(미리 보기 탭)이 재사용됩니다. 방문한 모든 파일에 자체 탭이 생기는 것을 원하지 않고 파일을 빠르게 탐색할 때 유용합니다. 파일을 편집하기 시작하거나 탐색기에서 파일을 열기 위해 두 번 클릭하면 해당 파일에 전용 새 탭이 생성됩니다.

미리 보기 모드는 탭 헤더의 이탤릭체로 표시됩니다.

미리 보기 모드를 사용하지 않고 항상 새 탭을 만들고 싶다면 이 설정을 통해 동작을 제어할 수 있습니다.

• workbench.editor.enablePreview - 미리 보기 편집기를 전역적으로 활성화 또는 비활성화합니다.
• workbench.editor.enablePreviewFromQuickOpen - **빠른 열기**에서 열 때 미리 보기 편집기를 활성화 또는 비활성화합니다.

여러 탭

더 많은 편집기 탭을 보려면 편집기 영역 위에 여러 행을 채우도록 래핑되는 래핑 탭 레이아웃을 사용할 수 있습니다. Workbench > Editor: Wrap Tabs (workbench.editor.wrapTabs) 설정을 사용하여 래핑 탭을 활성화합니다.

탭 레이블 사용자 지정

동시에 이름이 같은 여러 파일을 열면 다른 탭을 구분하기 어려울 수 있습니다. 이를 돕기 위해 탭에 사용자 지정 표시 레이블을 적용할 수 있습니다. 작업 영역에서 사용자 지정 레이블을 적용할 파일을 선택할 수 있습니다.

탭에 사용자 지정 표시 레이블을 활성화하려면 workbench.editor.customLabels.enabled 설정을 지정합니다.

    "workbench.editor.customLabels.enabled": true

탭 표시 레이블에 대해 하나 이상의 명명 패턴을 workbench.editor.customLabels.patterns 설정으로 지정할 수 있습니다. 이름 패턴은 두 가지 구성 요소로 구성됩니다.

• 항목 - 사용자 지정 레이블을 적용할 파일 경로와 일치하는 glob 패턴입니다. 예: **/static/**/*.html.
• 값 - 사용자 지정 레이블의 템플릿입니다. 템플릿은 ${filename}, ${extname}, ${extname(N)}, ${dirname}, ${dirname(N)}과 같은 변수를 사용할 수 있으며, 이들은 파일 경로의 값으로 동적으로 대체됩니다.

다음 샘플은 /src/orders/index.html 파일을 orders/index라는 탭 레이블로 표시합니다.

    "workbench.editor.customLabels.patterns": {
        "**/src/**/index.html": "${dirname}/${filename}"
    }

다음 예는 tests/editor.test.ts 파일에 대해 ${extname} 변수를 사용합니다.

• ${filename} => 편집기
• ${extname} => test.ts
• ${extname(0)} => ts
• ${extname(1)} => test
• ${extname(-1)} => test
• ${extname(-2)} => ts

그리드 편집기 레이아웃

기본적으로 편집기 그룹은 세로 열로 배치됩니다. 예를 들어 편집기를 분할하면 편집기가 옆에 열립니다. 편집기 그룹을 세로 및 가로로 원하는 레이아웃으로 배열할 수 있습니다.

유연한 레이아웃을 지원하려면 빈 편집기 그룹을 만들 수 있습니다. 기본적으로 편집기 그룹의 마지막 편집기를 닫으면 그룹 자체도 닫히지만, 새 설정 workbench.editor.closeEmptyGroups: false를 통해 이 동작을 변경할 수 있습니다.

보기 > 편집기 레이아웃 메뉴에는 미리 정의된 편집기 레이아웃 세트가 있습니다.

기본적으로 편집기 도구 모음의 편집기 분할 작업을 선택하는 등 옆에 열리는 편집기는 활성 편집기의 오른쪽 측면에 열립니다. 활성 편집기 아래에 편집기를 열고 싶다면 workbench.editor.openSideBySideDirection을 down으로 설정하십시오.

키보드를 사용하여 편집기 레이아웃을 조정하는 다양한 키보드 명령이 있습니다. 마우스를 사용하려면 드래그 앤 드롭을 사용하여 편집기를 모든 방향으로 분할할 수 있습니다.

키보드 단축키

편집기 및 편집기 그룹 간에 빠르게 탐색하기 위한 유용한 키보드 단축키는 다음과 같습니다.

• ⌥⌘→ (Windows, Linux Ctrl+PageDown) - 오른쪽 편집기로 이동합니다.
• ⌥⌘← (Windows, Linux Ctrl+PageUp) - 왼쪽 편집기로 이동합니다.
• ⌃Tab (Windows, Linux Ctrl+Tab) - 편집기 그룹의 최근 사용 목록에서 이전 편집기를 엽니다.
• ⌘1 (Windows, Linux Ctrl+1) - 가장 왼쪽 편집기 그룹으로 이동합니다.
• ⌘2 (Windows, Linux Ctrl+2) - 가운데 편집기 그룹으로 이동합니다.
• ⌘3 (Windows, Linux Ctrl+3) - 가장 오른쪽 편집기 그룹으로 이동합니다.
• ⌘W (Windows Ctrl+F4, Linux Ctrl+W) - 활성 편집기를 닫습니다.
• ⌘K W (Windows, Linux Ctrl+K W) - 편집기 그룹의 모든 편집기를 닫습니다.
• ⌘K ⌘W (Windows, Linux Ctrl+K Ctrl+W) - 모든 편집기를 닫습니다.

기본 키보드 단축키를 수정하려면 키 바인딩에서 자세한 내용을 확인하십시오.

탭 없이 작업하기

탭(탭 헤더)을 사용하지 않으려면 workbench.editor.showTabs 설정을 single 또는 none으로 설정하여 탭을 완전히 비활성화할 수 있습니다.

미리 보기 모드 비활성화

탭이 없으면 탐색기 보기의 열린 편집기 섹션은 파일 탐색을 빠르게 할 수 있는 방법입니다. 그러나 미리 보기 편집기 모드가 활성화되어 있으면 파일이 열린 편집기 섹션에 추가되지 않습니다. workbench.editor.enablePreview 및 workbench.editor.enablePreviewFromQuickOpen 설정을 통해 이 기능을 비활성화할 수 있습니다.

키보드 단축키를 사용하여 편집기 기록 탐색

Ctrl+Tab에 대한 vs를 변경하여 활성 편집기 그룹에 관계없이 기록에서 열린 모든 편집기 목록을 표시하도록 할 수 있습니다.

키보드 단축키를 편집하고 다음을 추가하십시오.

{ "key": "ctrl+tab", "command": "workbench.action.openPreviousEditorFromHistory" },
{ "key": "ctrl+tab", "command": "workbench.action.quickOpenNavigateNext", "when": "inQuickOpen" },

단일 편집기 대신 전체 그룹 닫기

하나의 편집기를 닫을 때 전체 그룹을 닫는 VS Code 동작이 마음에 들었다면, 키 바인딩에 다음을 바인딩할 수 있습니다.

macOS

{ "key": "cmd+w", "command": "workbench.action.closeEditorsInGroup" }

Windows/Linux

{ "key": "ctrl+w", "command": "workbench.action.closeEditorsInGroup" }

창 관리

VS Code에는 세션 간에 VS Code 창(인스턴스)을 열거나 복원하는 방법을 제어하는 다양한 옵션이 있습니다.

window.openFoldersInNewWindow 및 window.openFilesInNewWindow 설정은 새 창을 열거나 파일 또는 폴더에 대해 마지막 활성 창을 재사용하도록 구성하는 데 제공되며 가능한 값은 default, on, off입니다.

default로 구성된 경우 VS Code는 열기 요청이 이루어진 컨텍스트를 기반으로 새 창을 열거나 재사용할지 결정합니다. 항상 동일하게 작동하도록 on 또는 off로 전환하십시오. 예를 들어, 파일 메뉴에서 파일이나 폴더를 선택하는 것이 항상 새 창에서 열리도록 하려면 이 설정을 on으로 설정하십시오.

window.restoreWindows 설정은 이전 세션의 열린 창을 복원하는 방법에 대해 VS Code에 알려줍니다. 기본적으로 VS Code는 이전 세션 중에 작업한 모든 창을 복원합니다(설정: all). 모든 창을 다시 열지 않고 항상 비어 있는 VS Code 인스턴스로 시작하려면 이 설정을 none으로 변경하십시오. 마지막으로 작업한 창을 다시 열려면 one으로 변경하거나 폴더만 복원하려면 folders로 변경하십시오.

다음 단계

VS Code의 전체 레이아웃을 알았으므로 다음 문서를 참조하여 원하는 방식으로 편집기를 사용자 지정하십시오.

• 테마 변경 - 원하는 색상 및/또는 파일 아이콘 테마를 설정합니다.
• 사용자 지정 레이아웃 사용 - VS Code의 워크벤치 및 편집기 레이아웃 사용자 지정에 대해 자세히 알아보세요.

자주 묻는 질문

들여쓰기 안내선의 색상을 변경하려면 어떻게 해야 하나요?

들여쓰기 안내선 색상은 대부분의 VS Code 사용자 인터페이스 요소와 마찬가지로 사용자 지정할 수 있습니다. 활성 색상 테마에 대한 들여쓰기 안내선 색상을 사용자 지정하려면 workbench.colorCustomizations 설정(workbench.colorCustomizations)을 사용하고 editorIndentGuide.background 값을 수정하십시오.

예를 들어, 들여쓰기 안내선을 밝은 파란색으로 만들려면 settings.json에 다음을 추가하십시오.

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#0000ff"
}

탐색기 보기에서 열린 편집기 섹션을 숨길 수 있나요?

예, 탐색기의 보기 메뉴를 사용하고 열린 편집기 메뉴 항목을 토글하여 열린 편집기 섹션을 표시하거나 숨길 수 있습니다.