VS Code에서 GitHub Copilot의 인라인 제안

GitHub Copilot은 AI 기반 페어 프로그래머 역할을 하여 코드, 주석, 테스트 등을 자동으로 완성하는 인라인 제안을 제공합니다. 코드를 작성하는 동안 편집기에서 직접 제안을 제공하며, 다양한 프로그래밍 언어 및 프레임워크와 함께 작동할 수 있습니다.

Copilot에서 두 가지 종류의 인라인 제안을 경험할 수 있으며, 두 가지 모두 코딩 스타일과 일치하고 기존 코드를 고려합니다.

• 유령 텍스트 제안 - 편집기에서 입력을 시작하면 Copilot은 현재 커서 위치에 흐릿한 유령 텍스트 제안을 제공합니다.

• 다음 편집 제안 - Copilot의 다음 편집 제안, 즉 Copilot NES로 다음 코드 편집을 예측합니다. 사용자가 수행하는 편집을 기반으로 NES는 다음에 수행하려는 편집의 위치와 해당 편집이 무엇이어야 하는지를 모두 예측합니다.

시작하기

1. GitHub Copilot 확장을 설치합니다.

   GitHub Copilot 확장 설치

2. Copilot을 사용하려면 GitHub 계정으로 로그인하세요.

   팁

   아직 Copilot 구독이 없는 경우, Copilot 무료 플랜에 가입하여 Copilot을 무료로 사용할 수 있으며 월별 인라인 제안 및 채팅 상호 작용 제한을 받을 수 있습니다.

3. Copilot 빠른 시작을 통해 VS Code에서 Copilot의 주요 기능을 알아보세요.

첫 제안 받기

Copilot은 입력 시 흐릿한 유령 텍스트 제안을 제공합니다. 때로는 현재 줄의 완성, 때로는 완전히 새로운 코드 블록입니다. 제안의 전부 또는 일부를 수락하거나, 계속 입력하여 제안을 무시할 수 있습니다.

다음 예에서 Copilot이 흐릿한 유령 텍스트를 사용하여 calculateDaysBetweenDates JavaScript 함수의 구현을 제안하는 방법을 확인하세요.

인라인 제안이 표시되면 Tab 키로 수락할 수 있습니다.

Copilot은 코드에 이미 있는 것과 동일한 코딩 스타일을 적용하려고 합니다. 다음 예에서 Copilot이 제안된 subtract 메서드에 대해 add 메서드의 동일한 입력 매개변수 명명 규칙을 적용하는 방법을 확인하세요.

부분적으로 제안 수락

GitHub Copilot의 전체 제안을 수락하고 싶지 않을 수도 있습니다. ⌘→ (Windows, Linux Ctrl+Right) 키보드 단축키를 사용하여 제안의 다음 단어 또는 다음 줄을 수락할 수 있습니다.

대안 제안

주어진 입력에 대해 Copilot은 여러 대안 제안을 제공할 수 있습니다. 제안 위로 마우스를 가져가 다른 제안을 탐색할 수 있습니다.

코드 주석에서 제안 생성

Copilot이 제안을 제공하도록 기다리는 대신, 코드 주석을 사용하여 예상하는 코드에 대한 힌트를 제공할 수 있습니다. 예를 들어, 사용할 알고리즘 또는 개념의 유형("재귀 사용" 또는 "싱글톤 패턴 사용" 등)을 지정하거나 클래스에 추가할 메서드 및 속성을 지정할 수 있습니다.

다음 예는 Copilot에게 학생을 나타내는 TypeScript 클래스를 만들도록 지시하고 메서드 및 속성에 대한 정보를 제공하는 방법을 보여줍니다.

다음 편집 제안

유령 텍스트 제안은 코드 섹션을 자동 완성하는 데 탁월합니다. 하지만 대부분의 코딩 활동은 기존 코드를 편집하는 것이므로, 편집에도 도움을 주는 인라인 제안의 자연스러운 발전은 커서 위치뿐만 아니라 더 먼 곳에서도 편집을 돕는 것입니다. 편집은 종종 독립적으로 이루어지지 않습니다. 다양한 시나리오에서 수행해야 할 편집의 논리적 흐름이 있습니다. 다음 편집 제안(Copilot NES)은 이러한 발전입니다.

사용자가 수행하는 편집을 기반으로, 다음 편집 제안은 수행하려는 다음 편집의 위치와 해당 편집이 무엇이어야 하는지를 모두 예측합니다. Copilot NES는 현재 작업과 관련된 향후 변경 사항을 제안하여 흐름을 유지하도록 돕습니다. 간단히 Tab을 눌러 Copilot의 제안을 빠르게 탐색하고 수락할 수 있습니다. 제안은 잠재적인 변경의 범위에 따라 단일 기호, 전체 줄 또는 여러 줄에 걸쳐 있을 수 있습니다.

Copilot NES를 시작하려면 VS Code 설정을 활성화하세요. github.copilot.nextEditSuggestions.enabled.

편집 제안 탐색 및 수락

Tab 키를 사용하여 제안된 코드 변경 사항을 빠르게 탐색할 수 있으므로 다음 관련 편집을 찾는 시간을 절약할 수 있습니다(파일이나 참조를 수동으로 검색할 필요 없음). 그런 다음 Tab 키를 다시 눌러 제안을 수락할 수 있습니다.

여백의 화살표는 편집 제안이 있는지 여부를 나타냅니다. 화살표는 현재 커서 위치에 상대적으로 다음 편집 제안이 있는 위치를 나타냅니다.

화살표 위로 마우스를 가져가면 키보드 단축키 및 설정 구성을 포함한 편집 제안 메뉴를 탐색할 수 있습니다.

편집 제안으로 방해 요소 줄이기

기본적으로 편집 제안은 여백의 화살표로 표시되고 코드 변경 사항은 편집기에 표시됩니다. editor.inlineSuggest.edits.showCollapsed 설정을 활성화하면 제안으로 이동하기 위해 Tab 키를 누르거나 여백 화살표 위로 마우스를 가져갈 때까지만 편집기에서 코드 변경 사항이 표시됩니다. 또는 여백 화살표 위로 마우스를 가져가 메뉴에서 축소 표시 옵션을 선택합니다.

다음 편집 제안 사용 사례

실수 감지 및 수정

• Copilot은 오타와 같은 간단한 실수를 돕습니다. 누락되거나 순서가 바뀐 문자를 수정하는 제안을 제공합니다. 예를 들어 cont x = 5 또는 conts x = 5는 const x = 5여야 합니다.

  

• Copilot은 논리의 더 어려운 실수도 도울 수 있습니다. 예를 들어 뒤집힌 삼항 연산자.

  

  또는 || 대신 &&를 사용해야 했던 비교

  

의도 변경

• Copilot은 새로운 의도 변경과 일치하도록 나머지 코드에 대한 변경을 제안합니다. 예를 들어 클래스를 Point에서 Point3D로 변경할 때 Copilot은 클래스 정의에 z 변수를 추가하도록 제안합니다. 변경 사항을 수락한 후 Copilot NES는 거리 계산에 z를 추가하도록 권장합니다.

  

리팩터링

• 파일에서 변수를 한 번만 이름을 바꾸면 Copilot이 다른 모든 곳에서도 업데이트하도록 제안합니다. 새 이름이나 명명 규칙을 사용하면 Copilot은 후속 코드도 유사하게 업데이트하도록 제안합니다.

  

• 코드 스타일 일치. 코드를 복사하여 붙여넣은 후 Copilot은 붙여넣기가 발생한 현재 코드와 일치하도록 조정하는 방법을 제안합니다.

인라인 제안 활성화 또는 비활성화

모든 언어 또는 특정 언어에 대해서만 인라인 제안을 활성화하거나 비활성화할 수 있습니다. 인라인 제안을 활성화하거나 비활성화하려면 상태 표시줄의 Copilot 메뉴를 선택한 다음 인라인 제안을 활성화하거나 비활성화하는 옵션을 선택하거나 선택 취소합니다. 특정 언어에 대한 인라인 제안 비활성화 옵션은 활성 편집기의 언어에 따라 다릅니다.

또는 설정 편집기에서 github.copilot.enable 설정을 수정합니다. 활성화하거나 비활성화하려는 각 언어에 대한 항목을 추가합니다. 모든 언어에 대해 인라인 제안을 활성화하거나 비활성화하려면 *의 값을 true 또는 false로 설정합니다.

편집기에서 모든 인라인 제안을 일시적으로 비활성화하려면 상태 표시줄의 Copilot 메뉴를 선택한 다음 스누즈 버튼을 선택하여 스누즈 시간을 5분씩 늘립니다. 인라인 제안을 다시 시작하려면 Copilot 메뉴에서 스누즈 취소 버튼을 선택합니다.

또는 명령 팔레트에서 인라인 제안 스누즈 및 스누즈 취소 명령을 사용합니다.

제안에 사용할 AI 모델 변경

다른 대규모 언어 모델(LLM)은 다른 종류의 데이터로 훈련되며 다른 기능과 강점을 가질 수 있습니다. VS Code에서 AI 언어 모델 선택에 대해 자세히 알아보세요.

편집기에서 유령 텍스트 제안을 생성하는 데 사용되는 언어 모델을 변경하려면

1. 명령 팔레트(F1)를 엽니다.

2. 완성 모델 변경을 입력하고 GitHub Copilot: 완성 모델 변경 명령을 선택합니다.

3. 드롭다운 메뉴에서 사용하려는 모델을 선택합니다.

팁 & 요령

컨텍스트

관련성 있는 인라인 제안을 제공하기 위해 Copilot은 현재 및 열려 있는 파일을 분석하여 컨텍스트를 파악하고 적절한 제안을 생성합니다. Copilot을 사용하는 동안 VS Code에서 관련 파일을 열어두면 컨텍스트를 설정하고 Copilot이 프로젝트의 더 큰 그림을 이해하는 데 도움이 됩니다.

설정

유령 텍스트 제안 설정

• github.copilot.enable - 모든 언어 또는 특정 언어에 대한 인라인 완성 활성화 또는 비활성화.

• editor.inlineSuggest.fontFamily - 인라인 완성의 글꼴 구성.

• editor.inlineSuggest.showToolbar - 인라인 완성을 위해 표시되는 도구 모음 활성화 또는 비활성화.

• editor.inlineSuggest.syntaxHighlightingEnabled - 인라인 완성의 구문 강조 표시 활성화 또는 비활성화.

다음 편집 제안 설정

• github.copilot.nextEditSuggestions.enabled - Copilot 다음 편집 제안(Copilot NES) 활성화.

• editor.inlineSuggest.edits.allowCodeShifting - Copilot NES가 제안을 표시하기 위해 코드를 이동할 수 있는지 여부 구성.

• editor.inlineSuggest.edits.renderSideBySide - Copilot NES가 가능한 경우 큰 제안을 나란히 표시할 수 있는지, 또는 Copilot NES가 항상 큰 제안을 관련 코드 아래에 표시해야 하는지 구성.

  • auto (기본값): 뷰포트에 충분한 공간이 있으면 큰 편집 제안을 나란히 표시하고, 그렇지 않으면 제안은 관련 코드 아래에 표시됩니다.
  • never: 제안을 나란히 표시하지 않고 항상 관련 코드 아래에 표시합니다.

• github.copilot.nextEditSuggestions.fixes - 진단(밑줄)을 기반으로 다음 편집 제안 활성화. 예를 들어, 누락된 가져오기.

• editor.inlineSuggest.minShowDelay - 인라인 제안을 표시하기 전에 기다리는 시간(밀리초). 기본값은 0입니다.

다음 단계

• 빠른 시작에서 주요 기능을 알아보세요.

• VS Code에서 채팅을 사용하여 AI 채팅 대화를 사용하세요.

• YouTube의 VS Code Copilot 시리즈에서 동영상을 시청하세요.