[Github Codespace] Codespace 생성 시 필요 확장 자동 설치 되도록 구성

Visual Studio Code의 확장은 고유한 확장ID (Extension ID)를 가지고 있다. 확장에서 톱니바퀴를 누르면 해당 ID를 복사하여 확인할 수 있다.

VSCode를 CLI 기반으로 설치할 때 해당 값을 이용해 확장도 함께 설치할 수 있도록 처리할 수 있는데, Codespace에서도 이것을 이용해 개발환경 생성시 확장도 함께 설치할 수 있도록 구성할 수 있다.

아래는 지난번 생성했던 devcontainer.json 파일에 vscode 확장을 설치 할 수 있는 구성을 추가한 내용이다.

image가 이전과 달리 base:ubuntu로 되어 있는데 필요한 항목만 설치하여 Codespace 구축시간을 단축하고자 바꾼 것이므로 이번 내용과는 무관하다.

{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "features": {
    "ghcr.io/devcontainers/features/dotnet:1": {},
    "ghcr.io/devcontainers/features/powershell:1": {}
  },
    "customizations": {
    "vscode": {
      // 확장 추가
      "extensions": ["GitHub.copilot", "ms-vscode.powershell", "ms-edgedevtools.vscode-edge-devtools"]
    }
  }
}

작성 후 Codespace를 새로 생성하면 extensions에 추가한 확장들이 설치된 것을 확인할 수 있다.

추가 반영된 확장툴 모습

이미 구축된 Codespace 내에서 반영하는 방법도 존재한다. 구성된 환경에서 확장의 톱니바퀴 버튼을 누르면  Add to devcontainer.json 메뉴가 존재한다. 하지만 선택한다고 해서 devcontainer.json에 바로 반영되는게 아닌 커밋 항목으로 남게 된다.

선택 후 리포지토리 메인 화면으로 돌아가 code -> codespace를 선택해보면 Uncommitted changes라고 기록되어 있는 것을 확인할 수 있다. 반영하려면 메뉴에서 Export changes to a branch를 눌러 별도 브랜치로 Push 한 후, Merge 해야한다.

main 브랜치에 커밋되지 않은 모습

Export changes to a branch를 눌러 신규 브랜치를 생성하는 작업을 거쳐야 한다

pull request 작업을 통해 main 브랜치에 반영하는 모습