이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

다중 루트 작업 영역

Visual Studio Code에서 멀티 루트 작업 영역을 사용하면 여러 프로젝트 폴더를 관리할 수 있습니다. 이는 여러 관련 프로젝트를 동시에 작업할 때 유용할 수 있습니다. 예를 들어, 제품 소스 코드를 업데이트할 때 최신 상태로 유지하고 싶은 제품 설명서가 포함된 저장소를 가지고 있을 수 있습니다.

multi-root hero

참고: VS Code의 "작업 영역" 개념에 대해 더 자세히 알고 싶으시면 VS Code "작업 영역"이란 무엇인가요?를 참조하십시오. 명시적으로 멀티 루트 작업 영역을 만들지 않는 한, "작업 영역"은 프로젝트의 단일 루트 폴더일 뿐입니다.

폴더 추가

기존 작업 영역에 다른 폴더를 추가하는 것은 쉽습니다. 폴더를 추가하는 몇 가지 방법이 있습니다.

작업 영역에 폴더 추가

파일 > 작업 영역에 폴더 추가 명령은 새 폴더를 선택하기 위한 폴더 열기 대화 상자를 표시합니다.

Add Root Folder

루트 폴더가 추가되면 탐색기에서 새 폴더를 파일 탐색기의 루트로 표시합니다. 루트 폴더 중 하나를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴를 사용하여 폴더를 추가하거나 제거할 수 있습니다.

Remove Root Folder

파일 탐색기는 이전과 같이 작동하고 동작합니다. 루트 폴더 간에 파일을 이동하고 컨텍스트 메뉴 및 탐색기 보기에서 제공되는 일반적인 파일 작업 작업을 사용할 수 있습니다.

files.exclude와 같은 설정은 구성된 경우 각 루트 폴더에 대해 지원되며, 전역 사용자 설정으로 구성된 경우 모든 폴더에 대해 지원됩니다.

드래그 앤 드롭

드래그 앤 드롭을 사용하여 작업 영역에 폴더를 추가할 수 있습니다. 폴더를 파일 탐색기로 드래그하여 현재 작업 영역에 추가합니다. 여러 폴더를 선택하고 드래그할 수도 있습니다.

참고: 단일 폴더를 VS Code의 편집기 영역으로 드롭하면 폴더가 단일 폴더 모드로 열립니다. 여러 폴더를 편집기 영역으로 드래그 앤 드롭하면 새 멀티 루트 작업 영역이 생성됩니다.

드래그 앤 드롭을 사용하여 작업 영역에서 폴더의 순서를 변경할 수도 있습니다.

여러 항목 선택 네이티브 파일 열기 대화 상자

플랫폼의 네이티브 파일 열기 대화 상자를 사용하여 여러 폴더를 열면 멀티 루트 작업 영역이 생성됩니다.

명령줄 --add

멀티 루트 작업 영역의 마지막 활성 VS Code 인스턴스에 폴더 또는 여러 폴더를 추가합니다.

  code --add vscode vscode-docs

폴더 제거

작업 영역에서 폴더 제거 컨텍스트 메뉴 명령을 사용하여 작업 영역에서 폴더를 제거할 수 있습니다.

작업 영역 파일

여러 폴더를 추가하면 처음에는 **UNTITLED WORKSPACE**라는 제목의 작업 영역에 배치되며, 작업 영역을 저장할 때까지 이 이름이 유지됩니다. 예를 들어 바탕 화면에 영구적으로 저장하고 싶을 때까지 작업 영역을 저장할 필요는 없습니다. 제목 없는 작업 영역은 해당 작업 영역을 사용하는 VS Code 인스턴스가 열려 있는 동안 존재합니다. 제목 없는 작업 영역이 있는 인스턴스를 완전히 닫으면 향후 다시 열 계획이 있는 경우 저장할지 묻습니다.

save workspace dialog

작업 영역을 저장하면 .code-workspace 파일이 생성되며 파일 이름이 파일 탐색기에 표시됩니다.

다른 이름으로 작업 영역 저장...

작업 영역 파일을 새 위치로 이동하려면 파일 > 다른 이름으로 작업 영역 저장 명령을 사용할 수 있습니다. 이 명령은 새 작업 영역 파일 위치에 상대적인 올바른 폴더 경로를 자동으로 설정합니다.

작업 영역 파일 열기

작업 영역을 다시 열려면 다음을 수행할 수 있습니다.

  • 플랫폼의 탐색기에서 .code-workspace 파일을 두 번 클릭합니다.
  • 파일 > 작업 영역 열기 명령을 사용하고 작업 영역 파일을 선택합니다.
  • 파일 > 최근 항목 열기 (⌃R (Windows, Linux Ctrl+R)) 목록에서 작업 영역을 선택합니다.
    • 작업 영역은 폴더와 구분하기 위해 (작업 영역) 접미사를 가집니다.

open recent workspace list

VS Code에서 단일 폴더가 열려 있을 때의 폴더 닫기와 마찬가지로, 활성 작업 영역을 닫는 작업 영역 닫기 (⌘K F (Windows, Linux Ctrl+K F)) 명령이 있습니다.

작업 영역 파일 스키마

.code-workspace의 스키마는 상당히 간단합니다. 절대 또는 상대 경로를 가진 폴더 배열이 있습니다. 작업 영역 파일을 공유하려는 경우 상대 경로가 더 좋습니다.

name 속성을 사용하여 폴더의 표시 이름을 재정의하여 탐색기에서 폴더에 더 의미 있는 이름을 지정할 수 있습니다. 예를 들어, 프로젝트 폴더를 'Product' 및 'Documentation'으로 명명하여 폴더 이름으로 콘텐츠를 쉽게 식별할 수 있습니다.

{
  "folders": [
    {
      // Source code
      "name": "Product",
      "path": "vscode"
    },
    {
      // Docs and release notes
      "name": "Documentation",
      "path": "vscode-docs"
    },
    {
      // Yeoman extension generator
      "name": "Extension generator",
      "path": "vscode-generator-code"
    }
  ]
}

그러면 다음과 같은 탐색기 표시가 됩니다.

named folders

위의 예에서 볼 수 있듯이 작업 영역 파일에 주석을 추가할 수 있습니다.

작업 영역 파일은 settings 아래의 작업 영역 전역 설정extensions 아래의 확장 프로그램 권장 사항을 포함할 수도 있습니다. 아래에서 이에 대해 설명합니다.

workspace file schema

일반 UI

편집기

멀티 루트 작업 영역을 사용할 때 VS Code UI에는 몇 가지 변경 사항만 있습니다. 주로 폴더 간의 파일을 명확히 구분하기 위한 것입니다. 예를 들어, 여러 폴더의 파일 간에 이름 충돌이 발생하면 VS Code는 탭 헤더에 폴더 이름을 포함합니다.

tabbed headers

탭 헤더에 폴더를 항상 표시하려면 workbench.editor.labelFormat 설정의 "medium" 또는 "long" 값을 사용하여 폴더 또는 전체 경로를 표시할 수 있습니다.

"workbench.editor.labelFormat": "medium"

열린 편집기빠른 열기 (⌘P (Windows, Linux Ctrl+P)) 목록과 같은 VS Code UI에는 폴더 이름이 포함됩니다.

quick pick has folder name

파일 아이콘 테마를 사용 중이고 활성 테마가 지원하는 경우 특수 작업 영역 아이콘이 표시됩니다.

아래에서 기본 제공 Minimal (Visual Studio Code) 파일 아이콘 테마의 작업 영역 아이콘을 볼 수 있습니다.

custom workspace icon

전역 검색과 같은 VS Code 기능은 모든 폴더에서 작동하며 검색 결과를 폴더별로 그룹화합니다.

multi-root search results

멀티 루트 작업 영역이 열려 있을 때 포함할 파일 상자에 ./ 구문을 사용하여 단일 루트 폴더에서 검색하도록 선택할 수 있습니다. 예를 들어 ./project1/**/*.txt를 입력하면 project1/ 루트 폴더 아래의 모든 .txt 파일을 검색합니다.

설정

하나의 작업 영역에 여러 루트 폴더가 있는 경우 각 루트 폴더에 .vscode 폴더를 포함하여 해당 폴더에 적용할 설정을 정의할 수 있습니다. 설정 충돌을 피하기 위해 멀티 루트 작업 영역을 사용할 때 리소스(파일, 폴더) 설정만 적용됩니다. 편집기 전체에 영향을 미치는 설정(예: UI 레이아웃)은 무시됩니다. 예를 들어 두 프로젝트에서 모두 줌 레벨을 설정할 수는 없습니다.

단일 폴더 프로젝트와 마찬가지로 사용자 설정이 지원되며, 멀티 루트 작업 영역의 모든 폴더에 적용되는 전역 작업 영역 설정을 설정할 수도 있습니다. 전역 작업 영역 설정은 .code-workspace 파일에 저장됩니다.

{
  "folders": [
    {
      "path": "vscode"
    },
    {
      "path": "vscode-docs"
    },
    {
      "path": "vscode-generator-code"
    }
  ],
  "settings": {
    "window.zoomLevel": 1,
    "files.autoSave": "afterDelay"
  }
}

단일 폴더 인스턴스에서 여러 폴더로 이동하면 VS Code는 첫 번째 폴더의 편집기 전체 설정을 새 전역 작업 영역 설정에 추가합니다.

설정 편집기를 통해 다양한 설정 파일을 쉽게 검토하고 수정할 수 있습니다. 설정 편집기 탭을 사용하면 사용자 설정, 전역 작업 영역 설정 및 개별 폴더 설정을 선택할 수 있습니다.

settings dropdown

다음 명령을 사용하여 특정 설정 파일을 열 수도 있습니다.

  • 기본 설정: 사용자 설정 열기 - 전역 사용자 설정 열기
  • 기본 설정: 작업 영역 설정 열기 - 작업 영역 파일의 설정 섹션 열기.
  • 기본 설정: 폴더 설정 열기 - 활성 폴더의 설정 열기.

전역 작업 영역 설정은 사용자 설정을 재정의하며, 폴더 설정은 작업 영역 또는 사용자 설정을 재정의할 수 있습니다.

지원되지 않는 폴더 설정

지원되지 않는 편집기 전체 폴더 설정은 폴더 설정에서 회색으로 표시되며 기본 폴더 설정 목록에서 필터링됩니다. 설정 앞에 정보 아이콘도 표시됩니다.

unsupported setting information

디버깅

멀티 루트 작업 영역에서는 VS Code가 모든 폴더에서 launch.json 디버그 구성 파일을 검색하고 폴더 이름을 접미사로 붙여 표시합니다. 또한 VS Code는 작업 영역 구성 파일에 정의된 실행 구성을 표시합니다.

debugging dropdown

위 예는 TSLint 확장 프로그램의 디버깅 구성을 보여줍니다. tslint 확장 프로그램 폴더에서 확장 프로그램을 VS Code 확장 프로그램 호스트에서 실행하는 tslint 실행 구성과 tslint-server 폴더에서 실행 중인 TSLint 서버에 디버거를 연결하는 attach 구성이 있습니다.

또한 vscode-tslint 작업 영역에서 폴더 tslint, tslint-servertslint-tests에 대한 세 가지 구성 추가 명령을 볼 수 있습니다. 구성 추가 명령은 폴더의 .vscode 하위 폴더에 있는 기존 launch.json 파일을 열거나 새 파일을 만들어 디버깅 구성 템플릿 드롭다운을 표시합니다.

debugging template dropdown

구성에서 사용되는 변수(예: ${workspaceFolder} 또는 더 이상 사용되지 않는 ${workspaceRoot})는 해당 폴더에 속하는 폴더를 기준으로 해결됩니다. 변수에 루트 폴더의 이름을 추가하여(콜론으로 구분) 변수를 작업 영역 폴더별로 범위 지정할 수 있습니다.

작업 영역 실행 구성

작업 영역 범위 실행 구성은 작업 영역 구성 파일의 "launch" 섹션에 있습니다(명령 팔레트에서 작업 영역: 작업 영역 구성 파일 열기).

Workspace Settings

또는 실행 구성 드롭다운 메뉴의 "구성 추가 (작업 영역)" 항목을 통해 새 실행 구성을 추가할 수 있습니다.

Add Config

컴파운드 실행 구성은 작업 영역 내에서 이름이 고유한 경우 개별 실행 구성을 이름으로 참조할 수 있습니다. 예를 들어

  "compounds": [{
      "name": "Launch Server & Client",
      "configurations": [
        "Launch Server",
        "Launch Client"
      ]
  }]

개별 실행 구성 이름이 고유하지 않은 경우, 더 자세한 "folder" 구문을 사용하여 해당 폴더를 지정할 수 있습니다.

  "compounds": [{
      "name": "Launch Server & Client",
      "configurations": [
        "Launch Server",
        {
          "folder": "Web Client",
          "name": "Launch Client"
        },
        {
          "folder": "Desktop Client",
          "name": "Launch Client"
        }
      ]
  }]

compounds 외에도 작업 영역 구성 파일의 launch 섹션에는 일반 실행 구성도 포함될 수 있습니다. 사용된 모든 변수가 특정 폴더에 명시적으로 범위 지정되었는지 확인하십시오. 그렇지 않으면 작업 영역에서 유효하지 않습니다. 명시적으로 범위 지정된 변수에 대한 자세한 내용은 변수 참조에서 확인할 수 있습니다.

다음은 프로그램이 "Program" 폴더에 있고 "Library" 폴더의 모든 파일을 단계별 실행 시 건너뛸 수 있는 실행 구성 예입니다.

"launch": {
  "configurations": [{
      "type": "node",
      "request": "launch",
      "name": "Launch test",
      "program": "${workspaceFolder:Program}/test.js",
      "skipFiles": [
        "${workspaceFolder:Library}/out/**/*.js"
      ]
  }]
}

작업

VS Code가 디버깅 구성을 검색하는 방식과 유사하게, VS Code는 작업 영역의 모든 폴더에서 gulp, grunt, npm 및 TypeScript 프로젝트 파일의 작업을 자동으로 검색하고 tasks.json 파일에 정의된 작업을 검색합니다. 작업의 위치는 폴더 이름 접미사로 표시됩니다. tasks.json에 정의된 작업은 버전 2.0.0이어야 합니다.

tasks dropdown

위의 TSLint 확장 프로그램 작업 영역 예제에서 tslinttslint-tests 폴더의 tasks.json 파일에 있는 두 개의 구성된 작업과 수많은 자동 감지된 npm 및 TypeScript 컴파일러 감지된 작업을 볼 수 있습니다.

작업 영역 작업 구성

작업 영역 범위 작업은 작업 영역 구성 파일의 "tasks" 섹션에 있습니다 (명령 팔레트에서 작업 영역: 작업 영역 구성 파일 열기). 작업 영역 구성 파일에는 "shell""process" 유형의 작업만 정의할 수 있습니다.

소스 제어

멀티 루트 작업 영역에는 여러 활성 리포지토리가 있는 경우 개요를 제공하는 **소스 제어 공급자** 섹션이 있습니다. 여러 SCM 공급자에서 제공될 수 있습니다. 예를 들어 Git 리포지토리를 Azure DevOps Server 작업 영역과 나란히 둘 수 있습니다. 이 보기에서 리포지토리를 선택하면 아래에 소스 제어 세부 정보가 표시됩니다.

multiple scm providers

Ctrl+Click 또는 Shift+Click을 사용하여 여러 리포지토리를 선택할 수 있습니다. 세부 정보는 아래에 별도의 영역으로 나타납니다.

확장

확장 프로그램 작성자라면 VS Code 멀티 루트 작업 영역 API와 확장 프로그램이 여러 폴더에서 잘 작동하도록 만드는 방법에 대해 알아보려면 멀티 루트 작업 영역 API 채택 가이드를 참조하십시오.

아래는 멀티 루트 작업 영역 API를 채택한 인기 있는 확장 프로그램 중 일부입니다.

참고: 확장 프로그램이 아직 여러 폴더를 지원하지 않는 경우에도 멀티 루트 작업 영역의 첫 번째 폴더에서는 작동합니다.

확장 프로그램 추천

VS Code는 폴더의 .vscode 하위 폴더에 있는 extensions.json 파일을 통해 폴더 수준 확장 프로그램 권장 사항을 지원합니다. .code-workspace 파일에 추가하여 전역 작업 영역 확장 프로그램 권장 사항을 제공할 수도 있습니다. 확장 프로그램: 권장 확장 프로그램 구성 (작업 영역 폴더) 명령을 사용하여 작업 영역 파일을 열고 extensions.recommendations 배열에 확장 프로그램 식별자 ({publisherName}.{extensionName})를 추가할 수 있습니다.

{
  "folders": [
    {
      "path": "vscode"
    },
    {
      "path": "vscode-docs"
    }
  ],
  "extensions": {
    "recommendations": ["eg2.tslint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
  }
}

다음 단계

  • VS Code "작업 영역"이란 무엇인가요? - 단일 폴더 및 멀티 루트 작업 영역에 대한 자세한 내용.
  • 디버깅 - 애플리케이션 디버깅을 설정하는 방법을 알아보십시오.
  • 작업 - 작업을 통해 VS Code 내에서 컴파일러와 같은 외부 도구를 실행할 수 있습니다.

자주 묻는 질문

단일 프로젝트 폴더로 돌아가려면 어떻게 해야 하나요?

작업 영역을 닫고 폴더를 직접 열거나 작업 영역에서 폴더를 제거할 수 있습니다.

확장 프로그램 작성자는 무엇을 해야 하나요?

당사의 멀티 루트 작업 영역 API 채택 가이드를 참조하십시오. 대부분의 확장 프로그램은 멀티 루트 작업 영역을 쉽게 지원할 수 있습니다.

© . This site is unofficial and not affiliated with Microsoft.