웹 IDE

Tier: Free, Premium, Ultimate Offering: GitLab.com, Self-managed, GitLab Dedicated
Self-managed GitLab에서는 기본적으로 이 기능을 사용할 수 있습니다. 관리자는 vscode_web_ide라는 기능 플래그를 비활성화할 수 있습니다. GitLab.com 및 GitLab Dedicated에서는 이 기능을 사용할 수 있습니다.

웹 IDE는 고급 편집기로 커밋 스테이징을 지원합니다. 웹 IDE를 사용하여 GitLab UI에서 직접 여러 파일을 변경할 수 있습니다. 더 기본적인 구현은 웹 편집기를 참조하세요.

웹 IDE를 원격 개발 환경과 함께 사용하려면 원격 개발을 참조하세요.

웹 IDE 열기

웹 IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하여 프로젝트를 찾습니다.
  2. . 키보드 단축키를 사용합니다.

파일 또는 디렉토리에서

파일 또는 디렉토리에서 웹 IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하여 프로젝트를 찾습니다.
  2. 파일 또는 디렉토리로 이동합니다.
  3. 편집 > 웹 IDE에서 열기를 선택합니다.

병합 요청에서

병합 요청에서 웹 IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하여 프로젝트를 찾습니다.
  2. 병합 요청으로 이동합니다.
  3. 오른쪽 상단에서 코드 > 웹 IDE에서 열기를 선택합니다.

웹 IDE는 새로운 파일과 수정된 파일을 각각의 탭으로 열고 변경 사항을 나란히 표시합니다. 로드 시간을 줄이기 위해 변경된 라인이 가장 많이 포함된 10개의 파일만 자동으로 열립니다.

왼쪽 탐색기 사이드바에서 새로운 또는 수정된 파일은 파일 이름 옆에 병합 요청 아이콘()으로 표시됩니다. 파일의 변경 사항을 보려면 파일을 마우스 오른쪽 단추로 클릭하고 병합 요청 기준과 비교를 선택하세요.

파일 열기

파일을 이름으로 웹 IDE에서 열려면:

  1. Command+P를 누릅니다.
  2. 검색 상자에 파일 이름을 입력합니다.

열린 파일 검색

웹 IDE의 열린 파일 전체를 검색하려면:

  1. Shift+Command+F를 누릅니다.
  2. 검색 상자에 검색 용어를 입력합니다.

수정된 파일 목록 보기

웹 IDE에서 수정한 파일 목록을 보려면:

  • 왼쪽 상태 표시줄에서 소스 컨트롤을 선택하거나 Control+Shift+G를 누릅니다.

당신의 CHANGES, STAGED CHANGES, 그리고 MERGE CHANGES가 표시됩니다. 자세한 정보는 VS Code documentation를 참조하세요.

수정하지 않은 변경 사항 복원

웹 IDE에서 수정한 파일을 수동으로 저장할 필요가 없습니다. 수정한 파일은 자동으로 스테이징되어 커밋될 수 있습니다. 수정하지 않은 변경 사항은 브라우저의 로컬 저장소에 저장되어 브라우저 탭을 닫거나 웹 IDE를 새로 고침해도 유지됩니다.

수정하지 않은 변경 사항이 없는 경우, 로컬 기록에서 변경 사항을 복원할 수 있습니다. 웹 IDE에서 수정하지 않은 변경 사항을 복원하려면:

  1. Shift+Command+P를 누릅니다.
  2. 검색 상자에 Local History: Find Entry to Restore를 입력합니다.
  3. 수정하지 않은 변경 사항이 포함된 파일을 선택합니다.

파일 업로드

웹 IDE에서 파일을 업로드하려면:

  1. 왼쪽 상태 표시줄에서 탐색기를 선택하거나 Shift+Command+E를 누릅니다.

  2. 파일을 업로드하고 싶은 디렉토리로 이동합니다. 새 디렉토리를 만들려면:

    • 왼쪽 탐색기 사이드바에서 오른쪽 상단에서 새 폴더 ()를 선택하세요.
  3. 디렉토리를 마우스 오른쪽 단추로 클릭하고 업로드를 선택하세요.
  4. 업로드하려는 파일을 선택하세요.

여러 파일을 한꺼번에 업로드할 수 있습니다. 파일은 업로드되어 자동으로 저장소에 추가됩니다.

브랜치 변경

Web IDE는 기본적으로 현재 브랜치를 사용합니다. Web IDE에서 브랜치를 변경하려면 다음을 수행하세요.

  1. 하단 상태 표시줄에서 왼쪽으로 이동하여 현재 브랜치 이름을 선택합니다.
  2. 기존 브랜치를 입력하거나 선택합니다.

브랜치 생성

Web IDE에서 현재 브랜치에서 새 브랜치를 생성하려면 다음을 수행하세요.

  1. 하단 상태 표시줄에서 왼쪽으로 이동하여 현재 브랜치 이름을 선택합니다.
  2. 드롭다운 목록에서 Create new branch를 선택합니다.
  3. 새 브랜치 이름을 입력합니다.

저장소에 쓰기 액세스 권한이 없는 경우 Create new branch가 표시되지 않습니다.

변경 사항 커밋

Web IDE에서 변경 사항을 커밋하려면 다음을 수행하세요.

  1. 왼쪽 활동 표시줄에서 소스 제어를 선택하거나 Ctrl+Shift+G를 누릅니다.
  2. 커밋 메시지를 입력합니다.
  3. 현재 브랜치에 커밋하거나 새 브랜치를 만듭니다.

병합 요청 작성

Web IDE에서 병합 요청을 작성하려면 다음을 수행하세요.

  1. 변경 사항을 커밋합니다.
  2. 오른쪽 하단에 나타나는 알림에서 Create MR을 선택합니다.

자세한 정보는 누락된 알림 보기를 참조하세요.

명령 팔레트 사용

명령 팔레트를 사용하여 많은 명령에 액세스할 수 있습니다. Web IDE에서 명령 팔레트를 열고 명령을 실행하려면 다음을 수행하세요.

  1. Shift+Command+P를 누릅니다.
  2. 명령을 입력하거나 선택합니다.

설정 수정

설정 편집기를 사용하여 사용자 및 워크스페이스 설정을 보고 수정할 수 있습니다. Web IDE에서 설정 편집기를 열려면 다음을 수행하세요.

  • 상단 메뉴 바에서 파일 > 기본 설정 > 설정을 선택하거나 Command+,를 누릅니다.

설정 편집기에서 수정하려는 설정을 검색할 수 있습니다.

키보드 단축키 수정

사용 가능한 모든 명령의 기본 키 바인딩을 보고 수정할 수 있는 키보드 단축키 편집기를 사용할 수 있습니다. Web IDE에서 키보드 단축키 편집기를 열려면 다음을 수행하세요.

  • 상단 메뉴 바에서 파일 > 기본 설정 > 키보드 단축키를 선택하거나 Command+K를 누른 후 Command+S를 누릅니다.

키보드 단축키 편집기에서 다음을 검색할 수 있습니다.

  • 변경하려는 키 바인딩
  • 추가하거나 제거하려는 명령의 키 바인딩

키 바인딩은 키보드 레이아웃에 따라 다릅니다. 키보드 레이아웃을 변경하면 기존 키 바인딩이 자동으로 업데이트됩니다.

색 테마 변경

Web IDE에서 다양한 색 테마 중에서 선택할 수 있습니다. 기본 테마는 GitLab Dark입니다.

Web IDE에서 색 테마를 변경하려면 다음을 수행하세요.

  1. 상단 메뉴 바에서 파일 > 기본 설정 > 테마 > 색 테마를 선택하거나 Command+K를 누른 후 Command+T를 누릅니다.
  2. 드롭다운 목록에서 테마를 미리보기합니다.
  3. 테마를 선택합니다.

활성 색 테마는 사용자 설정에 저장됩니다.

누락된 알림 보기

Web IDE에서 작업을 수행하는 동안 알림이 오른쪽 하단에 나타납니다. 놓친 알림을 확인하려면 다음을 수행하세요.

  1. 하단 상태 표시줄에서 오른쪽으로 이동하여 알림 목록을 보려면 종 모양 아이콘()을 선택합니다.
  2. 확인하려는 알림을 선택합니다.

대화형 웹 터미널

Status: Beta

경고: 이 기능은 베타 상태이며 사전 통보 없이 변경될 수 있습니다.

Web IDE에서 원격 개발 서버를 설정하면 대화형 웹 터미널을 사용하여 다음을 수행할 수 있습니다.

  • 서버에서 원격 셸에 액세스합니다.
  • 서버의 파일 시스템과 원격으로 명령을 실행합니다.

대화형 웹 터미널을 사용하여 러너와 상호 작용할 수는 없지만, 의존성 설치 및 코드 컴파일 및 디버깅을 위해 터미널을 사용할 수 있습니다.

자세한 정보는 원격 개발를 참조하세요.

관련 주제

문제 해결

웹 IDE를 사용할 때 다음과 같은 문제가 발생할 수 있습니다.

입력 중 문자 오프셋

웹 IDE에서 입력을 할 때 4개의 문자 오프셋이 발생할 수 있습니다. 해결책:

  1. 상단 메뉴 바에서 File > Preferences > Settings을 선택하거나 Command+,를 누릅니다.
  2. 오른쪽 상단에서 Open Settings (JSON)을 선택합니다.
  3. settings.json 파일에서 "editor.disableMonospaceOptimizations": true를 추가하거나 "editor.fontFamily" 설정을 수정합니다.

자세한 정보는 VS Code issue 80170을 참조하세요.