Link
VSCode 익스텐션
Search

트리 뷰 가이드

이번 가이드에서는 Visual Studio Code에 뷰 컨테이너와 트리 뷰를 사용하는 익스텐션을 작성하는 방법을 설명할 것입니다. 여러분은 소스 코드를 포함한 예시 익스텐션을 여기서 확인 할 수 있습니다 : https://github.com/Microsoft/vscode-extension-samples/tree/master/tree-view-sample.

뷰 컨테이너

뷰 컨테이너는 빌트인 뷰 컨테이너 옆에 보여질 뷰들의 목록을 담고 있습니다.

  • id: 새롭게 생성하는 뷰 컨테이너의 이름
  • title: 뷰 컨테이너의 윗 부분에 보여질 이름
  • icon: 액티비티 바에서 뷰 컨테이너에 대하여 보여질 이미지
"contributes": {
  "viewsContainers": {
    "activitybar": [
      {
        "id": "package-explorer",
        "title": "Package Explorer",
        "icon": "media/dep.svg"
      }
    ]
  }
}

트리 뷰

뷰는 뷰 컨테이너 내부에서 보여지는 UI 를 지칭합니다. contributes.views Contribution Point를 통해 여러분은 새로운 뷰를 빌트인 혹은 작성한 뷰 컨테이너에 더할 수 있습니다.

View

뷰를 작성하기 위하여, 여러분은 먼저 package.json의 contributes.views Contribution Point를 사용하여 등록 해야 합니다. 아래의 필수 요소들을 명시하면, 해당하는 위치에 작성 할 수 있습니다.

  • explorer: 사이드 바의 탐색기 뷰
  • debug: 사이드 바의 디버그 뷰
  • scm: 사이드 바의 소스 컨트롤 뷰
  • test: 사이드 바의 테스트 탐색기 뷰
  • 작성한 뷰 컨테이너들

예시:

"contributes": {
  "views": {
    "package-explorer": [
      {
        "id": "nodeDependencies",
        "name": "Node Dependencies",
        "when": "explorer"
      }
    ]
  }
}

사용자가 뷰를 열었을때, VS Code는 activationEvent onView:${viewId}를 호출 할것입니다 (위의 코드의 경우,onView:nodeDependencies). 한편 여러분은 뷰의 가시성을 when의 값을 통해 조절 할 수 있습니다.

뷰 액션

여러분은 뷰에 다음 위치에서 액션을 작성 할 수 있습니다.

  • view/title: 뷰 제목에서 액션이 보여질 위치, 1차 혹은 인라인 액션은 "group": "navigation"를 사용하고 나머지는 ... 메뉴 안의 2차 액션입니다.
  • view/item/context: 트리 아이템에서 액션이 보여질 위치, 인라인 액션은 "group": "inline"를 사용하고 나머지는 ... 메뉴 안의 2차 액션입니다.

여러분은 when속성을 통해 액션들의 가시성을 조절할 수 있습니다.

View Actions

예시:

"contributes": {
  "commands": [
    {
      "command": "nodeDependencies.refreshEntry",
      "title": "Refresh",
      "icon": {
        "light": "resources/light/refresh.svg",
        "dark": "resources/dark/refresh.svg"
      }
    },
    {
      "command": "nodeDependencies.addEntry",
      "title": "Add"
    },
    {
      "command": "nodeDependencies.editEntry",
      "title": "Edit",
      "icon": {
        "light": "resources/light/edit.svg",
        "dark": "resources/dark/edit.svg"
      }
    },
    {
      "command": "nodeDependencies.deleteEntry",
      "title": "Delete"
    }
  ],
  "menus": {
    "view/title": [
      {
        "command": "nodeDependencies.refreshEntry",
        "when": "view == nodeDependencies",
        "group": "navigation"
      },
      {
        "command": "nodeDependencies.addEntry",
        "when": "view == nodeDependencies"
      }
    ],
    "view/item/context": [
      {
        "command": "nodeDependencies.editEntry",
        "when": "view == nodeDependencies && viewItem == dependency",
        "group": "inline"
      },
      {
        "command": "nodeDependencies.deleteEntry",
        "when": "view == nodeDependencies && viewItem == dependency"
      }
    ]
  }
}

주의: 만약 여러분이 액션을 특정 아이템에 보여주고 싶다면, TreeItem.contextValue를 통해 트리 아이템의 내용을 설정하고, when에 viewItem을 명시 할 수 있습니다.

예시:

"contributes": {
  "menus": {
    "view/item/context": [
      {
        "command": "nodeDependencies.deleteEntry",
        "when": "view == nodeDependencies && viewItem == dependency"
      }
    ]
  }
}

트리데이터제공기

뷰에 데이터를 담기 위해 익스텐션 작성시 TreeDataProvider를 프로그래밍하게 등록해야 합니다.

vscode.window.registerTreeDataProvider('nodeDependencies', new DepNodeProvider());

구현을 위해 nodeDependencies.ts 를 참조 하십시오.

트리 뷰

만약 어떤 UI 동작을 프로그래밍하게 실행 하고 싶다면, window.registerTreeDataProvider 대신 window.createTreeView를 사용할 수 있습니다. 이는 뷰 동작을 실행 할수 있는 권한을 제공합니다.

vscode.window.createTreeView('ftpExplorer', {
  treeDataProvider: new FtpTreeDataProvider()
});

구현을 위해서 ftpExplorer.ts 를 참조하십시오.