Visual Studio Code 팁과 요령

이 문서의 팁과 요령을 사용하여 바로 시작하고 Visual Studio Code를 생산적으로 사용하는 방법을 배우세요. 강력한 편집, 코드 인텔리전스 및 소스 코드 제어 기능에 익숙해지고 유용한 키보드 단축키를 배우세요. 시작하기 및 사용자 가이드의 다른 심층 주제를 탐색하여 더 자세히 알아보세요.

이제 막 시작하는 경우 VS Code 튜토리얼을 확인하여 주요 기능을 단계별로 알아보세요.

Visual Studio Code를 설치하지 않은 경우 다운로드 페이지로 이동하세요. Linux에서 VS Code 실행, macOS 및 Windows에 대한 플랫폼별 설정 지침을 찾을 수 있습니다.

비디오를 선호하시나요? Visual Studio Code 팁과 요령 또는 VS Code 경험 향상을 위한 VS Code Day 토크를 시청할 수 있습니다.

기본

시작하기

VS Code를 직접 경험해 보는 가장 좋은 방법은 **시작** 페이지를 열고 **안내**를 선택하여 VS Code가 제공하는 설정 단계, 기능 및 심층 사용자 지정에 대한 자체 안내 투어를 받는 것입니다. 학습하면서 안내는 진행 상황을 추적합니다.

**도움말** > **시작** 메뉴에서 시작 페이지를 열거나 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **도움말: 시작** 명령을 사용하세요.

확장 프로그램도 안내를 제공할 수 있습니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **도움말: 안내 열기...** 명령을 사용하여 안내를 직접 열 수도 있습니다.

코드 편집 기술을 향상시키고 싶다면 **대화형 편집기 플레이그라운드**를 열어보세요. VS Code의 코드 편집 기능(다중 커서 편집, IntelliSense, 스니펫, Emmet 등)을 사용해 보세요.

**도움말** > **편집기 플레이그라운드** 메뉴에서 시작 페이지를 열거나 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **도움말: 대화형 편집기 플레이그라운드** 명령을 사용하세요.

명령 팔레트

현재 컨텍스트에 따라 사용할 수 있는 모든 명령에 액세스합니다.

키보드 단축키: ⇧⌘P (Windows, Linux Ctrl+Shift+P)

기본 키보드 단축키

명령 팔레트의 많은 명령에는 기본 키보드 단축키가 연결되어 있습니다. **명령 팔레트**(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 명령 옆에 있는 기본 키보드 단축키를 볼 수 있습니다.

키보드 참조 시트

플랫폼별 키보드 단축키 참조 시트를 다운로드하세요 (macOS, Windows, Linux).

플로팅 창

편집기, 터미널 또는 특정 보기를 플로팅 창으로 열어 모니터의 다른 위치나 다른 모니터로 이동할 수 있습니다.

편집기 탭을 현재 VS Code 창 밖으로 끌어 플로팅 창으로 엽니다. 또는 편집기 탭의 **새 창으로 이동** 또는 **새 창으로 복사** 컨텍스트 옵션을 사용하세요.

통합 터미널

키보드 단축키: ⌃` (Windows, Linux Ctrl+`)

드롭다운에서 다른 터미널 셸을 선택할 수 있습니다. 운영 체제 및 시스템 구성에 따라 나열된 다른 셸이 표시될 수 있습니다.

추가 자료

• 통합 터미널 문서
• VS Code 터미널 마스터하기 기사

사이드바 전환

키보드 단축키: ⌘B (Windows, Linux Ctrl+B)

패널 전환

키보드 단축키: ⌘J (Windows, Linux Ctrl+J)

젠 모드

방해 없이 젠 모드로 들어갑니다.

키보드 단축키: ⌘K Z (Windows, Linux Ctrl+K Z)

젠 모드를 종료하려면 Esc를 두 번 누릅니다.

명령줄

VS Code에는 편집기가 다양한 시나리오를 지원하도록 시작 방식을 사용자 지정할 수 있는 강력한 명령줄 인터페이스(CLI)가 있습니다. 예를 들어, 명령줄에서 VS Code를 시작하여 두 파일을 비교하는 diff 편집기를 열 수 있습니다.

VS Code 바이너리가 경로에 있는지 확인하여 'code'를 입력하여 VS Code를 시작할 수 있습니다. 설치 중에 VS Code가 환경 경로에 추가되는 경우 플랫폼별 설정 주제를 참조하세요 (Linux에서 VS Code 실행, macOS, Windows).

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.vscode 폴더

작업 영역별 구성 파일은 작업 영역의 루트에 있는 .vscode 폴더에 있습니다. 예를 들어 작업 실행기의 경우 tasks.json, 디버거의 경우 launch.json입니다.

상태 표시줄

오류 및 경고

키보드 단축키: ⇧⌘M (Windows, Linux Ctrl+Shift+M)

프로젝트의 오류 및 경고로 빠르게 이동합니다.

F8 또는 ⇧F8 (Windows, Linux Shift+F8)으로 오류를 순환합니다.

유형('정보', '오류', '경고') 또는 텍스트 일치로 문제 목록을 필터링할 수 있습니다.

언어 모드 변경

상태 표시줄의 언어 모드는 활성 편집기와 관련된 언어(예: Markdown, Python 등)를 나타냅니다. 상태 표시줄 언어 모드 표시기를 선택하거나 키보드 단축키를 사용하여 현재 편집기의 언어 모드를 변경할 수 있습니다.

키보드 단축키: ⌘K M (Windows, Linux Ctrl+K M)

파일 형식에 대한 새 언어 모드를 유지하려면 **파일 연결 구성** 명령을 사용하여 현재 파일 확장자를 설치된 언어와 연결하세요.

맞춤 설정

기본 설정을 충족하도록 VS Code를 사용자 지정하는 다양한 옵션이 있습니다.

• 테마 변경
• 키보드 단축키 변경
• 설정 조정
• JSON 유효성 검사 추가
• 스니펫 만들기
• 확장 프로그램 설치

테마 변경

VS Code에는 여러 색상 테마가 내장되어 있습니다. **환경 설정: 색상 테마** 명령을 사용하거나 키보드 단축키를 사용하세요.

키보드 단축키: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

VS Code 확장 프로그램 Marketplace에서 더 많은 테마를 설치할 수 있습니다. **환경 설정: 색상 테마** > **+ 추가 색상 테마 검색...** 명령을 선택하여 Marketplace에서 테마를 검색하세요.

또한 파일 아이콘 테마를 설치하고 변경할 수 있습니다.

키맵

다른 편집기의 키보드 단축키에 익숙하신가요? 키맵 확장 프로그램을 설치하여 즐겨 사용하는 편집기의 키보드 단축키를 VS Code로 가져올 수 있습니다. **환경 설정: 키맵** 명령을 사용하여 Visual Studio Marketplace의 현재 목록을 확인하세요.

더 인기 있는 키맵은 다음과 같습니다.

• Vim
• Sublime Text Keymap
• Emacs Keymap
• Atom Keymap
• Brackets Keymap
• Eclipse Keymap
• Visual Studio Keymap

키보드 단축키 사용자 지정

**키보드 단축키** 편집기에서 키보드 단축키를 보거나 사용자 지정할 수 있습니다. **환경 설정: 키보드 단축키 열기** 명령을 사용하거나 바로 가기를 사용하여 편집기를 엽니다.

키보드 단축키: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

연필 아이콘을 선택하거나 특정 항목에서 Enter를 눌러 키보드 단축키를 편집합니다. 검색 필드를 사용하여 목록을 필터링합니다.

바로 가기를 검색하고 `keybindings.json` 파일에 자체 키보드 단축키를 추가할 수도 있습니다.

Visual Studio Code 키 바인딩에서 더 자세히 알아보세요.

설정 조정

기본적으로 VS Code는 설정을 보고 편집하기 위해 설정 편집기를 표시합니다. **사용자 설정 열기(JSON)** 명령을 사용하거나 workbench.settings.editor 설정을 변경하여 **사용자 설정 열기(JSON)** 명령을 사용하거나 기본 설정 편집기를 변경하여 `settings.json` 파일을 직접 편집할 수도 있습니다.

사용자 설정 `settings.json` 열기

키보드 단축키: ⌘, (Windows, Linux Ctrl+,)

다양한 UI 요소의 글꼴 크기 변경

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

확대/축소 수준 변경

"window.zoomLevel": 5

글꼴 연결

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

**팁:** 글꼴 연결을 지원하는 글꼴이 설치되어 있어야 합니다. FiraCode는 VS Code 팀에서 인기 있는 글꼴입니다.

자동 저장

"files.autoSave": "afterDelay"

최상위 메뉴에서 **파일** > **자동 저장**을 사용하여 자동 저장을 전환할 수도 있습니다.

저장 시 서식 지정

"editor.formatOnSave": true

붙여넣기 시 서식 지정

"editor.formatOnPaste": true

탭 문자의 크기 변경

"editor.tabSize": 4

공백 또는 탭

"editor.insertSpaces": true

공백 렌더링

"editor.renderWhitespace": "all"

텍스트 선택 시 공백 문자가 기본적으로 렌더링됩니다.

파일/폴더 무시

편집기 창에서 해당 파일/폴더를 제거합니다.

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

검색 결과에서 해당 파일/폴더를 제거합니다.

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

다른 사용자 지정에 대해 알아보세요.

언어별 설정

언어 식별자를 사용하여 특정 언어에 대한 설정을 범위로 지정할 수 있습니다. 언어 식별자 참조에서 자주 사용되는 언어 ID 목록을 찾을 수 있습니다.

"[languageid]": {

}

**팁:** **언어별 설정 구성** 명령을 사용하여 언어별 설정을 만들 수도 있습니다.

JSON 유효성 검사 추가

JSON 유효성 검사는 여러 파일 유형에 대해 기본적으로 활성화됩니다. `settings.json`에서 자체 스키마와 유효성 검사를 만듭니다.

"json.schemas": [
    {
        "fileMatch": [
            "bower.json"
        ],
        "url": "https://json.schemastore.org/bower"
    }
]

또는 작업 영역에 정의된 스키마에 대해

"json.schemas": [
    {
        "fileMatch": [
            "**/foo.json"
        ],
        "url": "./myschema.json"
    }
]

또는 사용자 지정 스키마를 사용하려면

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

JSON 문서에서 더 자세히 알아보세요.

기본 브라우저 구성

VS Code에서 링크를 Ctrl+클릭 (macOS의 경우 Cmd+클릭)하여 기본 브라우저에서 열 수 있습니다. workbench.externalBrowser 설정을 구성하여 기본 브라우저를 구성할 수 있습니다.

설정 값으로 브라우저 실행 파일의 전체 경로를 지정합니다. 또는 장치 간 올바른 작동을 보장하기 위해 `edge`, `chrome` 또는 `firefox`와 같은 브라우저 별칭을 사용할 수도 있습니다.

"workbench.externalBrowser": "edge"

여러 로그를 단일 보기로 결합

출력 패널은 다양한 서비스의 출력을 표시합니다. 각 서비스에는 일반적으로 자체 로그가 있습니다. 여러 서비스의 관련 로그 정보를 분석하려면 여러 로그를 단일 *복합 로그*로 결합할 수 있습니다.

출력 패널의 오버플로 메뉴에서 **복합 로그 만들기...**를 선택합니다.

확장

키보드 단축키: ⇧⌘X (Windows, Linux Ctrl+Shift+X)

확장 프로그램 찾기

확장 프로그램을 찾기 위해 여러 소스를 사용할 수 있습니다.

• VS Code Marketplace에서.
• **확장 프로그램** 보기에서 VS Code 내에서 검색합니다.
• 확장 프로그램 추천 보기
• awesome-vscode와 같은 커뮤니티 큐레이션 확장 프로그램 목록입니다.

인기 확장 프로그램 찾기

**확장 프로그램** 보기에서 **필터** 컨트롤을 선택한 다음 **가장 인기 있는** 또는 **정렬 기준** > **설치 수**를 선택합니다.

확장 프로그램 추천

**확장 프로그램** 보기에서 **필터** 컨트롤을 선택한 다음 **추천**을 선택하여 추천 확장 프로그램 목록을 봅니다.

자체 확장 프로그램 만들기

자체 확장 프로그램을 만드는 데 관심이 있으신가요? 확장 프로그램 API 문서에서 방법을 배울 수 있으며, 특히 기여 포인트 문서를 확인하세요.

• configuration
• commands
• keyboard shortcuts
• languages
• debuggers
• grammars
• themes
• snippets
• jsonValidation

파일 및 폴더

간단한 파일 대화 상자

간단한 파일 대화 상자를 사용하면 VS Code 내의 간단한 빠른 선택 대화 상자로 파일 및 폴더를 열고 저장하는 시스템의 기본 파일 대화 상자를 바꿀 수 있습니다.

설정: files.simpleDialog

탐색기 보기 표시

키보드 단축키: ⇧⌘E (Windows, Linux Ctrl+Shift+E)

빠른 열기

파일을 빠르게 검색하고 엽니다.

키보드 단축키: ⌘P (Windows, Linux Ctrl+P)

**팁:** ?를 입력하여 명령 제안을 확인합니다.

`edt` 또는 `term`과 같은 명령을 입력한 다음 공백을 입력하면 드롭다운 목록이 나타납니다.

최근에 연 파일 간 탐색

**빠른 열기** 키보드 단축키를 반복해서 누르면 최근에 연 파일 간에 빠르게 전환됩니다.

빠른 열기에서 여러 파일 열기

오른쪽 화살표 키를 눌러 **빠른 열기**에서 여러 파일을 열 수 있습니다. 이렇게 하면 현재 선택한 파일이 백그라운드에서 열리고 **빠른 열기**에서 계속 파일을 선택할 수 있습니다.

최근에 연 폴더 및 작업 영역 간 탐색

최근 폴더 또는 작업 영역을 엽니다.

키보드 단축키: ⌃R (Windows, Linux Ctrl+R)

**파일** > **최근 열기** 목록에서 최근에 연 폴더와 작업 영역, 이어서 파일이 있는 빠른 선택 드롭다운을 표시합니다.

링크에서 파일 만들기 또는 열기

키보드 단축키: Ctrl+클릭 (macOS의 경우 Cmd+클릭)

파일 링크로 커서를 이동한 다음 Ctrl+클릭을 누르면 파일 또는 이미지를 빠르게 열거나 새 파일을 만들 수 있습니다.

현재 열린 폴더 닫기

키보드 단축키: ⌘K F (Windows, Linux Ctrl+K F)

탐색 기록

전체 기록 탐색: ⌃Tab (Windows, Linux Ctrl+Tab)

뒤로 탐색: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

앞으로 탐색: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-)

파일 연결

올바르게 감지되지 않은 파일에 대해 언어 연결을 만듭니다. 예를 들어, 사용자 지정 확장자를 가진 많은 구성 파일은 실제로 JSON입니다.

"files.associations": {
    ".database": "json"
}

더티 쓰기 방지

VS Code는 디스크에서 변경된 파일로 인해 저장할 수 없는 파일을 저장하려고 할 때 오류 메시지를 표시합니다. VS Code는 편집기 외부에서 이루어진 변경 사항을 덮어쓰지 않도록 파일 저장을 차단합니다.

저장 충돌을 해결하려면 알림 팝업에서 **비교** 작업을 선택하여 디스크의 파일 내용(왼쪽)과 VS Code의 내용(오른쪽)을 보여주는 diff 편집기를 엽니다.

편집기 도구 모음의 작업을 사용하여 저장 충돌을 해결합니다. 변경 사항을 **수락**하여 디스크의 변경 사항을 덮어쓰거나 디스크의 버전으로 **되돌릴** 수 있습니다. 되돌리기는 변경 사항이 손실됨을 의미합니다.

**참고:** 충돌을 해결하기 위한 두 가지 작업 중 하나를 선택할 때까지 파일은 더티 상태로 유지되며 저장할 수 없습니다.

편집기 해킹

다음은 코드 편집을 위한 일반적인 기능 모음입니다. 다른 편집기의 키보드 단축키에 더 익숙하다면 키맵 확장 프로그램 설치를 고려하세요.

**팁**: `@recommended:keymaps`로 검색을 필터링하여 **확장 프로그램** 보기에서 추천 키맵 확장 프로그램을 볼 수 있습니다.

나란히 편집

키보드 단축키: ⌘\ (Windows, Linux Ctrl+\)

편집기를 끌어서 새 편집기 그룹을 만들고 그룹 간에 편집기를 이동할 수도 있습니다.

편집기 간 전환

키보드 단축키: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3)

다중 커서 선택

임의 위치에 커서를 추가하려면 마우스로 위치를 선택하고 Alt+클릭 (macOS의 경우 Option+클릭)을 사용하세요.

현재 위치 위 또는 아래에 커서를 설정하려면

키보드 단축키: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) 또는 ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down)

현재 선택 영역의 모든 발생에 추가 커서를 추가하려면 ⇧⌘L (Windows, Linux Ctrl+Shift+L)을 사용하세요.

참고: editor.multiCursorModifier 설정을 사용하여 다중 커서 적용을 위해 수정자를 Ctrl/Cmd로 변경할 수도 있습니다. 자세한 내용은 다중 커서 수정자를 참조하세요.

현재 선택 영역의 모든 발생을 추가하지 않으려면 대신 ⌘D (Windows, Linux Ctrl+D)을 사용할 수 있습니다. 이렇게 하면 선택한 항목 다음의 다음 발생만 선택되므로 선택 항목을 하나씩 추가할 수 있습니다.

열(상자) 선택

마우스를 드래그하는 동안 Shift+Alt (macOS의 경우 Shift+Option)를 누르고 있으면 텍스트 블록을 선택할 수 있습니다. 각 선택된 줄의 끝에 별도의 커서가 추가됩니다.

열 선택을 트리거하는 키보드 단축키를 사용할 수도 있습니다.

세로 눈금자

편집기에서 세로 열 눈금자를 추가하려면 editor.rulers 설정을 사용하세요. 이 설정은 세로 눈금자를 표시하려는 열 문자 위치의 배열을 사용합니다.

{
  "editor.rulers": [20, 40, 60]
}

빠른 스크롤

Alt 키를 누르면 편집기 및 탐색기에서 빠른 스크롤이 활성화됩니다. 기본적으로 빠른 스크롤은 5배 속도 승수를 사용하지만 **편집기: 빠른 스크롤 감도**(editor.fastScrollSensitivity) 설정을 사용하여 승수를 제어할 수 있습니다.

잠긴 스크롤

**보기: 모든 편집기 간 잠긴 스크롤 토글** 명령을 사용하여 모든 보이는 편집기 간의 스크롤을 동기화할 수 있습니다. 이는 한 편집기에서 스크롤하면 다른 모든 편집기도 같은 양으로 스크롤되어 모든 것이 정렬됨을 의미합니다.

특정 키보드 단축키를 누르고 있을 때만 스크롤 동기화를 활성화하도록 선택할 수 있습니다. `workbench.action.holdLockedScrolling` 명령에 대한 키보드 단축키를 설정하여 편집기 간의 스크롤을 일시적으로 잠급니다.

줄 위/아래 복사

키보드 단축키: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) 또는 ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)

Linux에서는 VS Code 기본 키보드 단축키가 Ubuntu 키보드 단축키와 충돌하므로 **줄 위/아래 복사** 명령이 바인딩되지 않았습니다. 이슈 #509를 참조하세요. 원하는 키보드 단축키로 `editor.action.copyLinesUpAction` 및 `editor.action.copyLinesDownAction` 명령을 설정할 수 있습니다.

줄 위/아래 이동

키보드 단축키: ⌥↑ (Windows, Linux Alt+Up) 또는 ⌥↓ (Windows, Linux Alt+Down)

선택 영역 축소/확장

키보드 단축키: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) 또는 ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)

기본 편집 문서에서 자세히 알아볼 수 있습니다.

파일의 기호로 이동

키보드 단축키: ⇧⌘O (Windows, Linux Ctrl+Shift+O)

콜론 `:@:`을 추가하여 기호를 종류별로 그룹화할 수 있습니다.

작업 영역의 기호로 이동

키보드 단축키: ⌘T (Windows, Linux Ctrl+T)

개요 보기

파일 탐색기의 개요 보기(기본적으로 하단에 축소됨)는 현재 열린 파일의 기호를 보여줍니다.

기호 이름, 범주 및 파일 내 위치별로 정렬하고 기호 위치로 빠르게 이동할 수 있습니다.

특정 줄로 이동

키보드 단축키: ⌃G (Windows, Linux Ctrl+G)

커서 위치 실행 취소

키보드 단축키: ⌘U (Windows, Linux Ctrl+U)

후행 공백 제거

키보드 단축키: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

텍스트 변환 명령

명령 팔레트의 **변환** 명령을 사용하여 선택한 텍스트를 대문자, 소문자 및 제목 형식으로 변경할 수 있습니다.

코드 서식 지정

현재 선택된 소스 코드: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

전체 문서 서식: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

코드 접기

키보드 단축키: ⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) 및 ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

편집기에서 모든 영역을 접거나 펼치려면 **모두 접기**(⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) 및 **모두 펼치기**(⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J))를 사용하세요.

모든 블록 주석을 접으려면 **모든 블록 주석 접기**(⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/))를 사용하세요.

현재 줄 선택

키보드 단축키: ⌘L (Windows, Linux Ctrl+L)

파일 시작 및 끝으로 이동

키보드 단축키: ⌘↑ (Windows, Linux Ctrl+Home) 및 ⌘↓ (Windows, Linux Ctrl+End)

Markdown 미리보기 열기

Markdown 파일에서

키보드 단축키: ⇧⌘V (Windows, Linux Ctrl+Shift+V)

나란히 Markdown 편집 및 미리보기

Markdown 파일에서

키보드 단축키: ⌘K V (Windows, Linux Ctrl+K V)

미리보기와 편집기는 어느 쪽이든 스크롤하면 동기화됩니다.

IntelliSense

제안 위젯을 트리거하려면 ⌃Space (Windows, Linux Ctrl+Space)을 사용하세요.

사용 가능한 메서드, 매개변수 힌트, 짧은 설명 등을 볼 수 있습니다.

피크

기호를 선택하고 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)을 입력합니다. 또는 컨텍스트 메뉴를 사용할 수 있습니다.

정의로 이동

기호를 선택하고 F12을 입력합니다. 또는 컨텍스트 메뉴 또는 Ctrl+클릭 (macOS의 경우 Cmd+클릭)을 사용할 수 있습니다.

**이동** > **뒤로** 명령 또는 ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)을 사용하여 이전 위치로 돌아갈 수 있습니다.

또는 유형 위로 마우스를 가져갈 때 Ctrl (macOS의 경우 Cmd)을 누르면 유형 정의를 볼 수 있습니다.

참조로 이동

기호를 선택하고 ⇧F12 (Windows, Linux Shift+F12)을 입력합니다. 또는 컨텍스트 메뉴를 사용할 수 있습니다.

모든 참조 보기

기호를 선택하고 ⇧⌥F12 (Windows, Linux Shift+Alt+F12)을 입력하면 전용 보기에 파일의 모든 기호를 표시하는 참조 보기가 열립니다.

기호 이름 바꾸기

기호를 선택하고 F2을 입력합니다. 또는 컨텍스트 메뉴를 사용할 수 있습니다.

검색 및 수정

표현식을 검색하고 바꾸는 것 외에도, 캡처 그룹이 있는 정규 표현식을 사용하여 일치하는 부분의 일부를 검색하고 재사용할 수도 있습니다. 검색 상자에서 정규식 사용 .* 버튼을 클릭하여 정규 표현식을 활성화하고 (⌥⌘R (Windows, Linux Alt+R)) 정규 표현식을 작성한 후 괄호를 사용하여 그룹을 정의하십시오. 그런 다음 대체 필드에서 $1, $2 등을 사용하여 각 그룹에서 일치하는 내용을 재사용할 수 있습니다.

.eslintrc.json

ESLint 확장 프로그램을 설치하세요. 원하는 대로 린터를 구성하세요. 린팅 규칙 및 옵션에 대한 자세한 내용은 ESLint 사양을 참조하세요.

ES6를 사용하기 위한 구성은 다음과 같습니다.

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classes": true,
      "defaultParams": true
    }
  },
  "rules": {
    "no-const-assign": 1,
    "no-extra-semi": 0,
    "semi": 0,
    "no-fallthrough": 0,
    "no-empty": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-redeclare": 0,
    "no-this-before-super": 1,
    "no-undef": 1,
    "no-unreachable": 1,
    "no-use-before-define": 0,
    "constructor-super": 1,
    "curly": 0,
    "eqeqeq": 0,
    "func-names": 0,
    "valid-typeof": 1
  }
}

package.json

package.json 파일에 대한 IntelliSense를 참조하세요.

Emmet 구문

Emmet 구문 지원.

코드 조각

사용자 지정 스니펫 만들기

파일 > 기본 설정 > 스니펫 구성에서 언어를 선택하고 스니펫을 만드세요.

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

자신만의 스니펫 만들기에서 자세한 내용을 참조하세요.

Git 통합

바로 가기 키: ⌃⇧G (Windows, Linux Ctrl+Shift+G)

Git 통합은 VS Code에 "기본으로 제공"됩니다. VS Code 확장 프로그램 마켓플레이스에서 다른 소스 제어 관리(SCM) 공급자를 설치할 수 있습니다. 이 섹션에서는 Git 통합을 설명하지만 UI와 제스처의 대부분은 다른 SCM 공급자에도 공통됩니다.

Git blame

VS Code는 편집기의 인라인 및 상태 표시줄에 Git blame 정보를 표시합니다. 자세한 Git blame 정보를 보려면 상태 표시줄 항목 또는 인라인 힌트에 마우스를 올리세요.

Git blame 정보를 활성화하거나 비활성화하려면 Git: Git Blame Editor Decoration 토글 및 Git: Git Blame Status Bar Item 토글 명령을 사용하거나 이러한 설정을 구성하세요.

• git.blame.statusBarItem.enabled (기본적으로 활성화됨)
• git.blame.editorDecoration.enabled

VS Code의 Git blame 지원 및 레이아웃 사용자 지정 방법에 대해 자세히 알아보세요.

차이점

소스 제어 보기에서 파일을 선택하여 diff 편집기를 엽니다. 또는 현재 열려 있는 파일의 차이점을 보려면 오른쪽 상단의 변경 내용 열기 버튼을 선택하세요.

보기

차이점의 기본 보기는 나란히 보기입니다.

오른쪽 상단의 추가 작업 (...) 버튼을 선택한 다음 인라인 보기를 선택하여 인라인 보기를 전환하세요.

인라인 보기를 기본값으로 사용하려면 "diffEditor.renderSideBySide": false 설정을 구성하세요.

액세스 가능한 Diff 뷰어

F7 및 ⇧F7 (Windows, Linux Shift+F7)을 사용하여 diff를 탐색하세요. 이렇게 하면 변경 사항이 통합 패치 형식으로 표시됩니다. 줄은 화살표 키로 탐색할 수 있으며 Enter를 누르면 diff 편집기 및 선택한 줄로 다시 이동합니다.

대기 중인 변경 내용 편집

diff 편집기에서 변경 내용을 보는 동안 diff 편집기의 대기 중인 변경 내용 측면에서 직접 편집할 수 있습니다.

브랜치

상태 표시줄을 통해 Git 브랜치 간에 쉽게 전환하세요.

스테이징

파일 변경 내용 스테이징

파일 수를 호버하고 더하기 버튼을 선택하여 파일을 스테이징하세요.

빼기 버튼을 선택하여 변경 내용을 스테이징 해제하세요.

선택한 내용 스테이징

파일의 일부를 스테이징하려면 파일에서 텍스트를 선택한 다음 명령 팔레트 또는 diff 편집기 컨텍스트 메뉴(마우스 오른쪽 클릭)에서 선택한 범위 스테이징을 선택하세요.

마지막 커밋 취소

(...) 버튼을 선택한 다음 커밋 > 마지막 커밋 취소를 선택하여 이전 커밋을 취소하세요. 변경 내용은 스테이징된 변경 내용 섹션에 추가됩니다.

Git 출력 보기

VS Code는 실행 중인 Git 명령을 쉽게 볼 수 있도록 합니다. 이는 Git을 아직 배우고 있거나 어려운 소스 제어 문제를 디버깅할 때 유용할 수 있습니다.

Git 출력을 보려면 소스 제어 보기의 (...) 버튼을 선택한 다음 Git 출력 보기를 선택하거나, Git: Git 출력 보기 명령을 사용하거나, 출력 토글 명령(⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H))을 사용한 후 드롭다운에서 Git을 선택하세요.

여백 표시기

편집기는 변경된 내용(추가, 변경 또는 삭제된 줄)이 어디서 어떻게 변경되었는지에 대한 시각적 단서를 여백에 제공합니다. 자세한 내용은 소스 제어 설명서를 참조하세요.

병합 충돌 해결

병합 중에 소스 제어 보기(⌃⇧G (Windows, Linux Ctrl+Shift+G))로 이동하여 diff 보기에서 변경하세요.

인라인 CodeLens를 사용하여 병합 충돌을 해결할 수 있습니다. 이 기능을 사용하면 현재 변경 내용 수락, 들어오는 변경 내용 수락, 두 변경 내용 모두 수락 및 변경 내용 비교를 할 수 있습니다.

소스 제어 설명서에서 병합 충돌 해결에 대해 자세히 알아보세요.

VS Code를 기본 병합 도구로 설정

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

VS Code를 기본 diff 도구로 설정

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

클립보드와 파일 비교

바로 가기 키: ⌘K C (Windows, Linux Ctrl+K C)

명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 파일: 활성 파일과 클립보드 비교 명령을 사용하여 활성 파일을 클립보드 내용과 빠르게 비교하세요.

디버깅

디버거 구성

실행 및 디버그 보기(⇧⌘D (Windows, Linux Ctrl+Shift+D))에서 launch.json 파일 만들기를 선택하면 프로젝트에 맞는 환경(Node.js, Python, C++ 등)을 선택하라는 메시지가 표시됩니다. 그러면 작업 영역에 디버거 구성이 포함된 launch.json 파일이 생성됩니다.

Node.js 지원은 기본 내장되어 있으며 다른 환경은 해당 언어 확장을 설치해야 합니다. 자세한 내용은 디버깅 설명서를 참조하세요.

중단점 및 단계별 실행

편집기 여백을 선택하거나 현재 줄에서 F9를 사용하여 중단점을 토글하세요. 편집기 여백의 중단점은 일반적으로 빨간색 채워진 원으로 표시됩니다.

디버그 세션이 시작되면 편집기 상단에 디버그 도구 모음이 나타나 디버깅 중에 코드를 단계별로 실행하거나 코드로 단계별 실행할 수 있습니다. 디버깅 설명서에서 디버그 작업에 대해 자세히 알아보세요.

데이터 검사

변수는 실행 및 디버그 보기의 변수 섹션에서, 편집기의 해당 소스에 마우스를 올리거나, 디버그 콘솔을 사용하여 검사할 수 있습니다.

로그 포인트

로그 포인트는 중단점과 유사하게 작동하지만, 히트하면 디버거를 중지하는 대신 콘솔에 메시지를 기록합니다. 로그 포인트는 수정하거나 일시 중지할 수 없는 프로덕션 서버를 디버깅하는 동안 로깅을 삽입하는 데 특히 유용합니다.

왼쪽 편집기 여백에서 로그 포인트 추가 명령을 사용하여 로그 포인트를 추가하면 "다이아몬드" 모양 아이콘으로 표시됩니다. 로그 메시지는 일반 텍스트이지만 중괄호('{}') 내에서 평가될 표현식을 포함할 수 있습니다.

트리거된 중단점

트리거된 중단점은 다른 중단점이 히트되면 자동으로 활성화되는 중단점입니다. 특정 사전 조건 후에만 발생하는 코드의 실패 사례를 진단할 때 매우 유용할 수 있습니다.

트리거된 중단점은 글리프 여백을 마우스 오른쪽 버튼으로 클릭하고 트리거된 중단점 추가를 선택한 다음 어떤 다른 중단점이 중단점을 활성화하는지 선택하여 설정할 수 있습니다.

작업 실행기

VS Code의 작업은 스크립트를 실행하고 프로세스를 시작하도록 구성할 수 있으므로 명령줄을 입력하거나 새 코드를 작성하지 않고도 VS Code 내에서 이러한 도구를 사용할 수 있습니다.

작업 자동 감지

최상위 메뉴에서 터미널을 선택하고 작업 구성 명령을 실행한 다음 실행하려는 작업 유형을 선택하세요. 이렇게 하면 다음과 같은 내용의 tasks.json 파일이 생성됩니다. 자세한 내용은 작업 설명서를 참조하세요.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

자동 생성 시 가끔 문제가 발생합니다. 제대로 작동하도록 하기 위한 설명서를 확인하세요.

터미널 메뉴에서 작업 실행

최상위 메뉴에서 터미널을 선택하고 작업 실행 명령을 실행한 다음 실행하려는 작업을 선택하세요. 작업 종료 명령을 실행하여 실행 중인 작업을 종료하세요.

작업에 대한 바로 가기 키 정의

모든 작업에 대한 바로 가기 키를 정의할 수 있습니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 기본 설정: 키보드 바로 가기 파일 열기를 선택하고, 원하는 바로 가기를 workbench.action.tasks.runTask 명령에 바인딩한 다음, 작업을 args로 정의하세요.

예를 들어, 테스트 실행 작업에 Ctrl+H를 바인딩하려면 다음을 추가하세요.

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}

탐색기에서 npm 스크립트를 작업으로 실행

탐색기 보기에서 스크립트를 편집기에서 열고, 작업으로 실행하고, 노드 디버거로 실행할 수 있습니다(스크립트가 --inspect-brk와 같은 디버그 옵션을 정의한 경우). 클릭 시 기본 작업은 스크립트를 여는 것입니다. 한 번의 클릭으로 스크립트를 실행하려면 npm.scriptExplorerAction을 run으로 설정하세요. npm.exclude 설정을 사용하여 특정 폴더에 포함된 package.json 파일의 스크립트를 제외하세요.

npm.enableRunFromFolder 설정을 사용하면 폴더의 탐색기 보기 컨텍스트 메뉴에서 npm 스크립트를 실행하도록 활성화할 수 있습니다. 이 설정은 폴더가 선택되었을 때 폴더에서 npm 스크립트 실행... 명령을 활성화합니다. 이 명령은 해당 폴더에 포함된 npm 스크립트 목록을 Quick Pick로 표시하며, 작업으로 실행할 스크립트를 선택할 수 있습니다.

이식 모드

VS Code에는 설정을 설치와 동일한 위치, 예를 들어 USB 드라이브에 유지할 수 있는 휴대용 모드가 있습니다.

Insider 빌드

Visual Studio Code 팀은 Insiders 버전을 사용하여 VS Code의 최신 기능과 버그 수정을 테스트합니다. 여기에서 다운로드하여 Insiders 버전을 사용할 수도 있습니다.

• 얼리 어답터를 위해 - Insiders는 사용자와 확장 프로그램 작성자가 최신 코드 변경 사항을 테스트할 수 있도록 가장 최신 버전을 제공합니다.
• 잦은 빌드 - 최신 버그 수정 및 기능을 매일 빌드합니다.
• 병렬 설치 - Insiders는 안정 버전과 함께 설치되어 둘 다 독립적으로 사용할 수 있습니다.