기본 편집

Visual Studio Code는 무엇보다도 편집기이며, 생산적인 소스 코드 편집에 필요한 기능을 제공합니다. 이 주제에서는 편집기의 기본 사항을 다루고 코딩을 시작하는 데 도움을 줍니다.

키보드 단축키

코드를 작성할 때 키보드에서 손을 떼지 않고 작업하는 것은 높은 생산성에 매우 중요합니다. VS Code에는 기본 제공되는 풍부한 키보드 단축키 세트가 있으며, 사용자 지정도 가능합니다.

• 키보드 단축키 참조 - 참조 시트를 다운로드하여 가장 일반적으로 사용되고 인기 있는 키보드 단축키를 알아보세요.
• 키맵 확장 프로그램 설치 - 키맵 확장 프로그램을 설치하여 Sublime Text, Atom, Vim 등과 같은 이전 편집기의 키보드 단축키를 VS Code에서 사용하세요.
• 키보드 단축키 사용자 지정 - 자신의 스타일에 맞게 기본 키보드 단축키를 변경하세요.

여러 선택 (다중 커서)

VS Code는 빠르고 동시적인 편집을 위해 다중 커서를 지원합니다. Alt+클릭으로 보조 커서(더 얇게 렌더링됨)를 추가할 수 있습니다. 각 커서는 해당 컨텍스트에 따라 독립적으로 작동합니다. 더 많은 커서를 추가하는 일반적인 방법은 ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) 또는 ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up)을 사용하여 커서를 아래 또는 위에 삽입하는 것입니다.

⌘D (Windows, Linux Ctrl+D)는 커서에 있는 단어 또는 현재 선택 영역의 다음 일치 항목을 선택합니다.

다중 커서 수정자

macOS에서는 Cmd+클릭, Windows 및 Linux에서는 Ctrl+클릭으로 다중 커서 적용 수정자 키를 변경하려면 editor.multiCursorModifier 설정을 사용하세요. 이를 통해 Sublime Text 또는 Atom과 같은 다른 편집기에서 온 사용자가 익숙한 키보드 수정자를 계속 사용할 수 있습니다.

이 설정은 다음과 같이 설정할 수 있습니다.

• ctrlCmd - Windows에서는 Ctrl, macOS에서는 Cmd에 매핑됩니다.
• alt - 기존 기본값인 Alt입니다.

선택 > 다중 커서에 Ctrl+클릭 사용 또는 선택 > 다중 커서에 Alt+클릭 사용 메뉴 항목을 통해 이 설정을 빠르게 전환할 수도 있습니다.

정의로 이동 및 링크 열기 제스처도 이 설정을 존중하고 충돌하지 않도록 조정됩니다. 예를 들어, 설정이 ctrlCmd인 경우 Ctrl/Cmd+클릭으로 다중 커서를 추가할 수 있으며, Alt+클릭으로 링크를 열거나 정의로 이동할 수 있습니다.

선택 영역 축소/확장

현재 선택 영역을 빠르게 축소하거나 확장합니다. ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) 및 ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)로 트리거합니다.

⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)로 선택 영역을 확장하는 예시입니다.

열 (박스) 선택

한쪽 모서리에 커서를 놓고 Shift+Alt를 누른 채 반대쪽 모서리로 드래그합니다.

macOS 및 Windows에는 열 선택에 대한 기본 키보드 단축키가 있지만 Linux에는 없습니다.

원하는 경우 keybindings.json을 편집하여 익숙한 단축키로 바인딩할 수 있습니다.

열 선택 모드

사용자 설정 **편집기: 열 선택**이 이 기능을 제어합니다. 이 모드가 활성화되면 상태 표시줄에 표시되며, 마우스 제스처와 화살표 키를 사용하여 기본적으로 열 선택을 생성합니다. 이 전역 토글은 **선택** > **열 선택 모드** 메뉴 항목에서도 액세스할 수 있습니다. 또한 상태 표시줄에서 열 선택 모드를 비활성화할 수도 있습니다.

저장 / 자동 저장

기본적으로 VS Code는 변경 사항을 디스크에 저장하기 위해 명시적인 작업이 필요합니다. ⌘S (Windows, Linux Ctrl+S)

하지만 자동 저장을 켜는 것은 쉽습니다. 이 옵션을 사용하면 구성된 지연 시간 후 또는 포커스가 편집기를 벗어날 때 변경 사항이 저장됩니다. 이 옵션을 켜면 파일을 명시적으로 저장할 필요가 없습니다. 자동 저장을 켜는 가장 쉬운 방법은 지연 시간 후 저장을 켜고 끄는 **파일** > **자동 저장** 토글입니다.

자동 저장에 대한 더 많은 제어를 위해 사용자 또는 작업 영역 설정을 열고 관련 설정을 찾으십시오.

• files.autoSave: 다음과 같은 값을 가질 수 있습니다.
  • off - 자동 저장을 비활성화합니다.
  • afterDelay - 구성된 지연 시간 후 파일을 저장합니다 (기본값 1000ms).
  • onFocusChange - 더티 파일에서 편집기 밖으로 포커스가 이동할 때 파일을 저장합니다.
  • onWindowChange - VS Code 창 밖으로 포커스가 이동할 때 파일을 저장합니다.
• files.autoSaveDelay: files.autoSave가 afterDelay로 구성된 경우 지연 시간을 밀리초 단위로 구성합니다. 기본값은 1000ms입니다.

특정 언어나 파일 형식에 대한 자동 저장 기능을 사용자 지정하려면 settings.json 파일에 언어별 규칙을 추가하여 수행할 수 있습니다.

예를 들어, LaTeX 파일에 대한 자동 저장을 비활성화하려면

    "[latex]": {
        "files.autoSave": "off",
    },

핫 종료

기본적으로 VS Code는 종료 시 파일의 저장되지 않은 변경 사항을 기억합니다. 핫 종료는 애플리케이션이 **파일** > **종료**(macOS의 경우 **코드** > **종료**)를 통해 닫히거나 마지막 창이 닫힐 때 트리거됩니다.

다음 값으로 files.hotExit를 설정하여 핫 종료를 구성할 수 있습니다.

• "off": 핫 종료를 비활성화합니다.
• "onExit": 애플리케이션이 닫힐 때, 즉 Windows/Linux에서 마지막 창이 닫힐 때 또는 (명령 팔레트, 키보드 단축키 또는 메뉴에서) workbench.action.quit 명령이 트리거될 때 핫 종료가 트리거됩니다. 폴더가 열려 있지 않은 모든 창은 다음 시작 시 복원됩니다.
• "onExitAndWindowClose": 애플리케이션이 닫힐 때, 즉 Windows/Linux에서 마지막 창이 닫힐 때 또는 (명령 팔레트, 키보드 단축키 또는 메뉴에서) workbench.action.quit 명령이 트리거될 때, 그리고 폴더가 열려 있는 창이 마지막 창인지 여부에 관계없이 핫 종료가 트리거됩니다. 폴더가 열려 있지 않은 모든 창은 다음 시작 시 복원됩니다. 폴더 창을 종료 전과 같이 복원하려면 window.restoreWindows를 all로 설정하십시오.

핫 종료에 문제가 발생하는 경우, 모든 백업은 표준 설치 위치에 대해 다음 폴더에 저장됩니다.

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

찾기 및 바꾸기

VS Code를 사용하면 현재 열려 있는 파일에서 텍스트를 빠르게 찾고 바꿀 수 있습니다. ⌘F (Windows, Linux Ctrl+F)를 눌러 편집기의 찾기 컨트롤을 열고 검색 문자열을 입력합니다. 검색 결과는 편집기, 개요 눈금자 및 미니맵에 강조 표시됩니다.

VS Code는 입력하는 대로 즉시 검색을 시작합니다. Enter를 눌러서만 검색을 시작하려면 editor.find.findOnType 설정을 지우십시오.

현재 파일에 여러 개의 일치 항목이 있는 경우, 찾기 입력 상자가 포커스된 상태에서 Enter를 눌러 다음 결과로 이동하거나 ⇧Enter (Windows, Linux Shift+Enter)를 눌러 이전 결과로 이동할 수 있습니다.

기본적으로 VS Code는 작업 영역에 대한 찾기 및 바꾸기 쿼리 기록을 저장하고 다시 시작할 때 복원합니다. 이 동작은 editor.find.history 및 editor.find.replaceHistory 설정을 사용하여 구성할 수 있습니다. 기록 저장을 비활성화하려면 값을 never로 설정하십시오.

선택 영역에서 검색 문자열 시드

찾기 컨트롤이 열리면 편집기에 선택된 텍스트가 자동으로 찾기 입력 상자에 채워집니다. 선택 영역이 비어 있으면 커서 아래의 단어가 대신 입력 상자에 삽입됩니다.

이 기능은 editor.find.seedSearchStringFromSelection을 "never"로 설정하여 끌 수 있습니다.

선택 영역에서 찾기

기본적으로 찾기 작업은 편집기의 전체 파일에서 수행됩니다. 검색을 텍스트 선택 영역으로 제한하려면 찾기 컨트롤의 **선택 영역에서 찾기** 아이콘을 클릭하거나 ⌥⌘L (Windows, Linux Alt+L)를 누릅니다.

찾기 컨트롤의 기본 동작으로 만들려면 editor.find.autoFindInSelection을 always로 설정하거나, 여러 줄의 내용이 선택된 경우에만 선택된 텍스트에서 실행되도록 하려면 multiline으로 설정할 수 있습니다.

고급 찾기 및 바꾸기 옵션

더 고급 시나리오를 위해 찾기 및 바꾸기 컨트롤에는 다음과 같은 옵션이 있습니다.

• 찾기 컨트롤

  • 대소문자 구분
  • 전체 단어 일치
  • 정규 표현식

• 바꾸기 컨트롤

  • 대소문자 유지

여러 줄 지원 및 찾기 컨트롤 크기 조정

찾기 입력 상자와 바꾸기 입력 상자에 텍스트를 붙여 넣어 여러 줄 텍스트를 검색할 수 있습니다. Ctrl+Enter를 누르면 입력 상자에 새 줄이 삽입됩니다.

긴 텍스트를 검색하는 동안 찾기 컨트롤의 기본 크기가 너무 작을 수 있습니다. 왼쪽 새시를 드래그하여 찾기 컨트롤을 확장하거나 왼쪽 새시를 두 번 클릭하여 최대화하거나 기본 크기로 축소할 수 있습니다.

파일 검색

VS Code를 사용하면 현재 열려 있는 폴더의 모든 파일에서 빠르게 검색할 수 있습니다. ⇧⌘F (Windows, Linux Ctrl+Shift+F)를 누르고 검색어를 입력합니다. 검색 결과는 검색어를 포함하는 파일별로 그룹화되며, 각 파일의 히트 및 해당 위치가 표시됩니다. 파일을 확장하면 해당 파일 내의 모든 히트 미리보기를 볼 수 있습니다. 그런 다음 히트 중 하나를 한 번 클릭하여 편집기에서 봅니다.

검색 상자 오른쪽 아래의 타원형(검색 세부 정보 토글)을 선택하거나 (⇧⌘J (Windows, Linux Ctrl+Shift+J))를 눌러 고급 검색 옵션을 구성할 수 있습니다. 이렇게 하면 검색을 구성하기 위한 추가 필드가 표시됩니다.

고급 검색 옵션

검색 상자 아래의 두 입력 상자에 포함하거나 제외할 패턴을 입력할 수 있습니다. example을 입력하면 작업 영역에서 example이라는 이름의 모든 폴더와 파일이 일치합니다. ./example을 입력하면 작업 영역 최상위의 example/ 폴더가 일치합니다. 여러 패턴을 구분하려면 ,를 사용합니다. 경로는 슬래시를 사용해야 합니다. 또한 Glob 패턴 구문을 사용할 수 있습니다.

• * - 경로 세그먼트에서 0개 이상의 문자를 일치시킵니다.
• ? - 경로 세그먼트에서 하나의 문자를 일치시킵니다.
• ** - 0개 이상의 경로 세그먼트를 포함하여 일치시킵니다.
• {} - 조건을 그룹화합니다 (예: {**/*.html,**/*.txt}는 모든 HTML 및 텍스트 파일과 일치합니다).
• [] - 일치시킬 문자 범위를 **선언**합니다 (example.[0-9]는 example.0, example.1 등과 일치합니다).
• [!...] - 일치시킬 문자 범위의 **부정**을 수행합니다 (example.[!0-9]는 example.a, example.b 등과 일치하지만 example.0은 일치하지 않습니다).

VS Code는 관심 없는 검색 결과 수를 줄이기 위해 기본적으로 일부 폴더를 제외합니다(예: node_modules). files.exclude 및 search.exclude 섹션 아래의 설정을 열어 이러한 규칙을 변경하세요.

검색 보기의 Glob 패턴은 files.exclude 및 search.exclude와 같은 설정과 다르게 작동합니다. 설정에서는 **/example을 사용하여 작업 영역의 하위 폴더 folder1/example에 있는 example이라는 폴더와 일치시켜야 합니다. 검색 보기에서는 ** 접두사가 암시됩니다. 이러한 설정의 Glob 패턴은 항상 작업 영역 폴더의 경로에 상대적으로 평가됩니다.

또한 제외할 파일 상자에 있는 **제외 설정 및 무시 파일 사용** 토글 버튼에 유의하세요. 이 토글은 .gitignore 파일에 의해 무시되거나 files.exclude 및 search.exclude 설정과 일치하는 파일을 제외할지 여부를 결정합니다.

검색 및 바꾸기

파일 간 검색 및 바꾸기도 할 수 있습니다. 검색 위젯을 확장하여 바꾸기 텍스트 상자를 표시합니다.

바꾸기 텍스트 상자에 텍스트를 입력하면 보류 중인 변경 사항의 차이점 표시가 표시됩니다. 바꾸기 텍스트 상자에서 모든 파일에 대해 바꾸거나, 한 파일에서 모두 바꾸거나, 단일 변경 사항을 바꿀 수 있습니다.

정규식 바꾸기에서 대소문자 변경

VS Code는 편집기 또는 전역에서 검색 및 바꾸기를 수행하는 동안 정규식 일치 그룹의 대소문자를 변경하는 것을 지원합니다. 이는 \u\U\l\L 수정자를 사용하여 수행됩니다. 여기서 \u 및 \l은 단일 문자를 대문자/소문자로 변경하고, \U 및 \L은 일치 그룹의 나머지 부분을 대문자/소문자로 변경합니다.

예

수정자는 중첩될 수도 있습니다. 예를 들어, \u\u\u$1은 그룹의 처음 세 문자를 대문자로 만들고, \l\U$1은 첫 번째 문자를 소문자로, 나머지는 대문자로 만듭니다. 캡처 그룹은 바꾸기 문자열에서 $n으로 참조되며, 여기서 n은 캡처 그룹의 순서입니다.

검색 에디터

검색 편집기를 사용하면 구문 강조 표시와 주변 컨텍스트 줄(선택 사항)이 포함된 전체 크기 편집기에서 작업 영역 검색 결과를 볼 수 있습니다.

다음은 'SearchEditor'라는 단어에 대해 일치하는 부분의 앞뒤로 두 줄의 텍스트를 컨텍스트로 표시한 검색 결과입니다.

검색 편집기 열기 명령은 기존 검색 편집기가 있으면 열고, 그렇지 않으면 새 검색 편집기를 만듭니다. 새 검색 편집기 명령은 항상 새 검색 편집기를 만듭니다.

검색 편집기에서 결과는 **정의로 이동** 동작을 사용하여 탐색할 수 있습니다. 예를 들어 F12를 사용하여 현재 편집기 그룹에서 소스 위치를 열거나, ⌘K F12 (Windows, Linux Ctrl+K F12)를 사용하여 옆에 있는 편집기에서 위치를 엽니다. 또한 search.searchEditor.singleClickBehaviour 및 search.searchEditor.doubleClickBehaviour 설정을 사용하여 단일 클릭 또는 더블 클릭 시 동작을 구성할 수 있습니다. 예를 들어, 정의 미리보기 창을 열거나 소스 위치를 열 수 있습니다.

검색 보기 상단에 있는 **새 검색 편집기 열기** 버튼을 사용하거나, 결과 트리 상단에 있는 **편집기에서 열기** 링크 또는 **검색 편집기: 편집기에서 결과 열기** 명령을 사용하여 기존 검색 보기의 결과를 검색 편집기로 복사할 수도 있습니다.

위의 검색 편집기는 검색 보기 상단에 있는 (세 번째) **새 검색 편집기 열기** 버튼을 선택하여 열렸습니다.

검색 편집기 명령 및 인수

• search.action.openNewEditor - 새 탭에서 검색 편집기를 엽니다.
• search.action.openInEditor - 현재 검색 결과를 새 검색 편집기로 복사합니다.
• search.action.openNewEditorToSide - 현재 열려 있는 창 옆에 새 창에서 검색 편집기를 엽니다.

새 검색 편집기가 어떻게 동작해야 하는지 구성하는 키보드 단축키를 사용하려면 검색 편집기 명령 (search.action.openNewEditor, search.action.openNewEditorToSide)에 전달할 수 있는 두 가지 인수가 있습니다.

• triggerSearch - 검색 편집기가 열릴 때 자동으로 검색을 실행할지 여부입니다. 기본값은 true입니다.
• focusResults - 검색 결과에 포커스를 둘지 또는 쿼리 입력에 포커스를 둘지 여부입니다. 기본값은 true입니다.

예를 들어, 다음 키보드 단축키는 검색 편집기가 열릴 때 검색을 실행하지만 검색 쿼리 컨트롤에 포커스를 유지합니다.

{
  "key": "ctrl+o",
  "command": "search.action.openNewEditor",
  "args": { "query": "VS Code", "triggerSearch": true, "focusResults": false }
}

검색 편집기 컨텍스트 기본값

search.searchEditor.defaultNumberOfContextLines 설정은 기본값 1을 가지며, 이는 검색 편집기에서 각 결과 줄의 앞과 뒤에 컨텍스트 줄이 하나씩 표시된다는 것을 의미합니다.

마지막 검색 편집기 구성 재사용

search.searchEditor.reusePriorSearchConfiguration 설정(기본값 false)을 사용하면 새 검색 편집기를 만들 때 마지막 활성 검색 편집기의 구성을 재사용할 수 있습니다.

IntelliSense

항상 단어 완성 기능을 제공하지만, JavaScript, JSON, HTML, CSS, SCSS, Less, C# 및 TypeScript와 같은 풍부한 언어의 경우 진정한 IntelliSense 환경을 제공합니다. 언어 서비스가 가능한 완료를 알고 있으면 입력하는 동안 IntelliSense 제안이 팝업됩니다. 언제든지 ⌃Space (Windows, Linux Ctrl+Space)로 수동으로 트리거할 수 있습니다. 기본적으로 Tab 또는 Enter가 수락 키보드 트리거이지만 이러한 키보드 단축키를 사용자 지정할 수도 있습니다.

JavaScript 및 TypeScript 개발자는 npmjs 유형 선언(타이핑) 파일 리포지토리를 활용하여 일반적인 JavaScript 라이브러리(Node.js, React, Angular)에 대한 IntelliSense를 얻을 수 있습니다. 유형 선언 파일 사용에 대한 좋은 설명은 JavaScript 언어 주제와 Node.js 자습서에서 찾을 수 있습니다.

IntelliSense 문서에서 자세히 알아보세요.

서식

VS Code는 소스 코드 형식 지정에 대한 훌륭한 지원을 제공합니다. 편집기에는 두 가지 명시적인 형식 지정 작업이 있습니다.

• 문서 서식 (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) - 전체 활성 파일을 서식 지정합니다.
• 선택 영역 서식 (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) - 선택한 텍스트를 서식 지정합니다.

명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P)) 또는 편집기 컨텍스트 메뉴에서 이러한 작업을 호출할 수 있습니다.

VS Code는 JavaScript, TypeScript, JSON, HTML 및 CSS에 대한 기본 서식 지정 프로그램을 제공합니다. 각 언어에는 특정 서식 지정 옵션(예: html.format.indentInnerHtml)이 있으며, 사용자 또는 작업 영역 설정에서 선호도에 맞게 조정할 수 있습니다. 동일한 언어에 대한 서식 지정을 제공하는 다른 확장 프로그램이 설치된 경우 기본 언어 서식 지정 프로그램을 비활성화할 수도 있습니다.

"html.format.enable": false

코드 서식을 수동으로 호출하는 것 외에도 타이핑, 저장 또는 붙여넣기와 같은 사용자 제스처에 따라 서식을 트리거할 수도 있습니다. 기본적으로 비활성화되어 있지만 다음 설정을 통해 이러한 동작을 활성화할 수 있습니다.

• editor.formatOnType - 타이핑 후 줄 서식을 지정합니다.
• editor.formatOnSave - 저장 시 파일 서식을 지정합니다.
• editor.formatOnPaste - 붙여넣은 내용의 서식을 지정합니다.

기본 서식 지정기 외에도 Marketplace에서 다른 언어나 서식 지정 도구를 지원하는 확장 프로그램을 찾을 수 있습니다. Formatters 범주가 있으므로 서식 지정 확장 프로그램을 쉽게 검색하고 찾을 수 있습니다. **확장 프로그램** 보기 검색 상자에 'formatters' 또는 'category:formatters'를 입력하여 VS Code 내의 확장 프로그램 목록을 필터링할 수 있습니다.

폴딩

코드 폴딩 아이콘을 사용하여 소스 코드 영역을 폴딩할 수 있습니다. 줄 번호와 줄 시작 사이의 홈통에 마우스를 올리고 클릭하여 영역을 폴딩하고 펼칩니다. 폴딩 아이콘을 Shift + 클릭하면 영역과 그 안의 모든 영역을 폴딩하거나 펼칩니다.

다음 작업도 사용할 수 있습니다.

• 폴드 (⌥⌘[ (Windows, Linux Ctrl+Shift+[)) - 커서에서 가장 안쪽의 접히지 않은 영역을 폴드합니다.
• 펼치기 (⌥⌘] (Windows, Linux Ctrl+Shift+])) - 커서에서 접힌 영역을 펼칩니다.
• 토글 접기 (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L))는 커서 위치의 영역을 접거나 펼칩니다.
• 재귀적으로 접기 (⌘K ⌘[ (Windows, Linux Ctrl+K Ctrl+[))는 커서 위치의 가장 안쪽으로 접히지 않은 영역과 해당 영역 내부의 모든 영역을 접습니다.
• 재귀적으로 펼치기 (⌘K ⌘] (Windows, Linux Ctrl+K Ctrl+]))는 커서 위치의 영역과 해당 영역 내부의 모든 영역을 펼칩니다.
• 모두 접기 (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0))는 편집기의 모든 영역을 접습니다.
• 모두 펼치기 (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J))는 편집기의 모든 영역을 펼칩니다.
• 레벨 X 접기 (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2)는 레벨 2를 의미)는 현재 커서 위치의 영역을 제외한 레벨 X의 모든 영역을 접습니다.
• 블록 주석 모두 접기 (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/))는 블록 주석 토큰으로 시작하는 모든 영역을 접습니다.

기본적으로 접기 영역은 줄의 들여쓰기를 기반으로 평가됩니다. 접기 영역은 줄의 들여쓰기가 뒤따르는 하나 이상의 줄보다 작을 때 시작하고, 들여쓰기가 같거나 작은 줄이 있을 때 끝납니다.

접기 영역은 편집기의 구성된 언어의 구문 토큰을 기반으로 계산할 수도 있습니다. 다음 언어는 이미 구문 인지 접기를 제공합니다: Markdown, HTML, CSS, LESS, SCSS, JSON.

위 언어 중 하나(또는 모두)에 대해 들여쓰기 기반 접기로 다시 전환하려면 다음을 사용하십시오.

  "[html]": {
    "editor.foldingStrategy": "indentation"
  },

영역은 각 언어에서 정의한 마커에 의해 정의될 수도 있습니다. 현재 정의된 마커가 있는 언어는 다음과 같습니다.

마커로 정의된 영역만 접고 펼치려면 다음을 사용하십시오.

• 마커 영역 모두 접기 (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8))는 모든 마커 영역을 접습니다.
• 마커 영역 모두 펼치기 (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9))는 모든 마커 영역을 펼칩니다.

선택 영역 접기

선택 영역에서 수동 접기 범위 만들기 명령 (⌘K ⌘, (Windows, Linux Ctrl+K Ctrl+,))은 현재 선택된 줄에서 접기 범위를 만들고 이를 접습니다. 해당 범위는 접기 제공자가 계산한 범위 위에 오는 수동 접기 범위라고 합니다.

수동 접기 범위는 수동 접기 범위 제거 명령 (⌘K ⌘. (Windows, Linux Ctrl+K Ctrl+.))으로 제거할 수 있습니다.

수동 접기 범위는 프로그래밍 언어에서 접기를 지원하지 않는 경우에 특히 유용합니다.

들여쓰기

VS Code는 텍스트 들여쓰기와 공백 또는 탭을 사용할지 여부를 제어할 수 있게 해줍니다. 기본적으로 VS Code는 공백을 삽입하며 Tab 키당 4개의 공백을 사용합니다. 다른 기본값을 사용하려면 editor.insertSpaces 및 editor.tabSize 설정을 수정할 수 있습니다.

    "editor.insertSpaces": true,
    "editor.tabSize": 4,

자동 감지

VS Code는 열린 파일을 분석하고 문서에 사용된 들여쓰기를 결정합니다. 자동 감지된 들여쓰기는 기본 들여쓰기 설정을 재정의합니다. 감지된 설정은 상태 표시줄의 오른쪽 면에 표시됩니다.

상태 표시줄 들여쓰기 표시를 클릭하면 들여쓰기 명령이 포함된 드롭다운 메뉴가 나타나 열린 파일의 기본 설정을 변경하거나 탭과 공백 간에 변환할 수 있습니다.

    "editor.detectIndentation": false,
    "editor.tabSize": 3,

파일 인코딩 지원

사용자 설정 또는 작업 영역 설정에서 files.encoding 설정을 사용하여 전역 또는 작업 영역별로 파일 인코딩을 설정할 수 있습니다.

상태 표시줄에서 파일 인코딩을 볼 수 있습니다.

다른 인코딩으로 활성 파일을 다시 열거나 저장하려면 상태 표시줄의 인코딩 버튼을 클릭합니다.

그런 다음 인코딩을 선택합니다.

덮어쓰기 모드

1.96 릴리스 이전에는 Vim 키맵 확장을 설치하지 않는 한 VS Code는 문자열이 커서 위치에 삽입되는 삽입 모드만 지원했습니다.

1.96 릴리스부터 VS Code는 커서 위치에 문자를 삽입하는 대신 기존 문자를 덮어쓸 수 있는 덮어쓰기 모드를 지원합니다. 기본적으로 덮어쓰기 모드는 꺼져 있습니다.

삽입 모드와 덮어쓰기 모드를 전환하려면 명령 팔레트에서 덮어쓰기/삽입 모드 전환 명령을 실행하거나 (⌥⌘O (Windows, Linux Insert))를 누릅니다. 덮어쓰기 모드일 때는 상태 표시줄에 OVR 표시가 나타납니다.

덮어쓰기 모드의 커서 스타일은 editor.overtypeCursorStyle 설정을 구성하여 변경할 수 있습니다.

붙여넣을 때 텍스트를 덮어쓰려면 editor.overtypeOnPaste 설정을 사용합니다. 이 설정이 적용되려면 덮어쓰기 모드여야 합니다.

파일 비교

VS Code는 현재 파일 또는 두 파일의 내용을 비교하는 여러 가지 방법을 지원합니다.

편집기에서 활성 파일을 연 경우 다음과 같은 비교 옵션이 있습니다.

• 작업 영역 파일과 비교: 명령 팔레트에서 파일: 활성 파일을 ...와 비교를 선택한 다음 비교할 다른 파일을 선택합니다.
• 클립보드와 비교: 명령 팔레트에서 파일: 활성 파일을 클립보드와 비교 (⌘K C (Windows, Linux Ctrl+K C))를 선택하여 현재 파일과 클립보드 내용을 비교합니다.
• 저장된 파일과 비교: 명령 팔레트에서 파일: 활성 파일을 저장된 파일과 비교 (⌘K D (Windows, Linux Ctrl+K D))를 선택하여 현재 파일과 마지막으로 저장된 버전을 비교합니다.

두 파일을 비교하려면

• 탐색기 보기에서 파일에 마우스 오른쪽 버튼을 클릭하고 비교를 위해 선택을 선택합니다. 그런 다음 두 번째 파일에 마우스 오른쪽 버튼을 클릭하고 선택한 파일과 비교를 선택합니다.
• 두 개의 빈 편집기 창 간의 비교를 시작하려면 명령 팔레트에서 파일: 새 이름 없는 텍스트 파일 비교를 선택합니다.

다음 단계

기본 사용자 인터페이스를 살펴보았습니다. VS Code에는 훨씬 더 많은 기능이 있습니다. 다음 내용을 계속 읽어보세요.

• 소개 비디오 - 설정 및 기본 사항 - VS Code 기본 사항에 대한 튜토리얼을 시청하세요.
• 사용자/작업 영역 설정 - 사용자 및 작업 영역 설정을 통해 VS Code를 환경에 맞게 구성하는 방법을 알아보세요.
• 코드 탐색 - 정의 보기 및 goto, 그리고 더 많은 기능.
• 통합 터미널 - VS Code 내에서 빠르게 명령줄 작업을 수행하기 위한 통합 터미널에 대해 알아보세요.
• IntelliSense - VS Code는 스마트 코드 완성 기능을 제공합니다.
• 디버깅 - VS Code가 진정한 빛을 발하는 부분입니다.

자주 묻는 질문

전역적으로 검색 및 바꾸기가 가능한가요?

예, 검색 보기 텍스트 상자를 확장하여 바꾸기 텍스트 필드를 포함할 수 있습니다. 작업 영역의 모든 파일에 대해 검색 및 바꾸기를 수행할 수 있습니다. 폴더에서 VS Code를 열지 않은 경우 검색은 현재 열려 있는 파일에만 실행된다는 점에 유의하십시오.

줄 바꿈을 켜려면 어떻게 해야 하나요?

editor.wordWrap 설정을 통해 줄 바꿈을 제어할 수 있습니다. 기본적으로 editor.wordWrap은 off이지만 on으로 설정하면 텍스트가 편집기 뷰포트 너비에 맞춰 줄 바꿈됩니다.

    "editor.wordWrap": "on"

VS Code 세션에 대한 줄 바꿈을 토글하려면 ⌥Z (Windows, Linux Alt+Z)를 누릅니다.

또한 editor.rulers 설정을 사용하여 편집기에 수직 열 눈금을 추가할 수 있으며, 이 설정은 세로 눈금을 추가하려는 열 문자 위치 배열을 받습니다.

다른 편집기와 마찬가지로 잘라내기 및 복사와 같은 명령은 줄 바꿈된 전체 줄에 적용됩니다. 세 번 클릭하면 줄 바꿈된 전체 줄이 선택됩니다. Home 키를 두 번 누르면 커서가 줄의 맨 처음으로 이동합니다. End 키를 두 번 누르면 커서가 줄의 맨 끝으로 이동합니다.

줄 바꿈된 줄에 추가 커서가 배치되는 것을 방지하려면 어떻게 해야 하나요?

현재 선택 영역 위 또는 아래에 커서를 추가할 때 줄 바꿈을 무시하려면 키보드 바로 가기에서 args에 { "logicalLine": true }를 다음과 같이 전달할 수 있습니다.

{
  "key": "shift+alt+down",
  "command": "editor.action.insertCursorBelow",
  "when": "textInputFocus",
  "args": { "logicalLine": true },
},
{
  "key": "shift+alt+up",
  "command": "editor.action.insertCursorAbove",
  "when": "textInputFocus",
  "args": { "logicalLine": true },
},