VS Code에서 Copilot 사용 팁 및 요령

이 문서는 Visual Studio Code에서 GitHub Copilot을 사용하는 개발 경험을 최적화하기 위한 팁과 요령을 제공합니다.

VS Code에서 Copilot 사용 체크리스트

Copilot을 최대한 활용하기 위해 다음 체크리스트를 사용하세요.

1. 올바른 도구 선택. 편집, 질문 또는 코드 작성 흐름 유지에 최적화된 도구를 사용하세요.

2. Copilot 개인화. 사용자 지정 인스트럭션을 사용하여 스타일 및 코딩 방식에 맞는 코드 제안을 받으세요.

3. 효과적인 프롬프트 작성 및 컨텍스트 제공. 가장 관련성 높은 응답을 받으세요.

4. 작업 공간 인덱싱. 코드베이스에 대한 질문에 정확한 응답을 받으세요.

5. AI 모델 선택. 빠른 코딩 또는 계획/추론을 위한 모델 중에서 선택하세요.

6. 프롬프트 재사용. 작업별 프롬프트를 팀 전체에 저장하고 재사용하여 시간을 절약하세요.

올바른 Copilot 도구 선택

작업에 따라 다양한 Copilot 도구 중에서 선택할 수 있습니다.

인스트럭션 파일로 Copilot 개인화

Copilot이 코드를 생성하거나 질문에 답변할 때, 사용하는 라이브러리나 변수 이름 지정 방식과 같은 코딩 방식 및 선호도를 일치시키려고 노력합니다. 그러나 이 작업을 효과적으로 수행하기에 충분한 컨텍스트가 없을 수도 있습니다. 예를 들어, 특정 프레임워크 버전을 사용하는 경우 프롬프트에 추가 컨텍스트를 제공해야 합니다.

AI 응답을 개선하기 위해 인스트럭션 파일을 사용하여 팀의 코딩 방식, 도구 또는 프로젝트 특정 정보에 대한 컨텍스트 세부 정보를 제공할 수 있습니다. 그런 다음 이러한 인스트럭션을 채팅 프롬프트에 첨부하거나 자동으로 적용되도록 할 수 있습니다.

작업 공간에 대한 인스트럭션 파일 활성화

1. 명령 팔레트에서 Chat: New Instructions File 명령을 실행하세요.

   이 명령은 .github/instructions 폴더에 .instructions.md 파일을 생성합니다.

2. 파일에 Markdown 형식으로 인스트럭션을 추가하세요. 예를 들어

   # Custom instructions for Copilot
   
   ## Project context
   This project is a web application built with React and Node.js.
   
   ## Indentation
   We use tabs, not spaces.
   
   ## Coding style
   Use camelCase for variable names and prefer arrow functions over traditional function expressions.
   
   ## Testing
   We use Jest for unit testing and Playwright for end-to-end testing.
   

3. 선택적으로 applyTo 메타데이터 필드에 glob 패턴을 추가하여 인스트럭션이 적용되는 파일을 지정하세요.

   ---
   applyTo: "**/*.ts"
   ---
   Coding practices for TypeScript files.
   ...
   

VS Code에서 인스트럭션 파일 사용에 대한 자세한 내용은 여기를 참조하세요.

프롬프트 엔지니어링

효과적인 프롬프트를 사용하여 Copilot의 응답 품질을 향상시킬 수 있습니다. 잘 만들어진 프롬프트는 Copilot이 요구 사항을 더 잘 이해하고 보다 관련성 높은 코드 제안을 생성하는 데 도움이 될 수 있습니다.

• 일반적으로 시작하여 구체적으로 진행하세요.

  Generate a Calculator class.
  Add methods for addition, subtraction, multiplication, division, and factorial.
  Don't use any external libraries and don't use recursion.
  

• 원하는 것의 예를 제공하세요.

  Generate a function that takes a string and returns the number of vowels in it.
  Example:
  findVowels("hello") returns 2
  findVowels("sky") returns 0
  

• 복잡한 작업을 더 간단한 작업으로 나누세요.

  Copilot에게 식사 계획 앱을 생성하도록 요청하는 대신, 더 작은 작업으로 나누세요.

  • 재료 목록을 입력받아 레시피 목록을 반환하는 함수를 생성하세요.
  • 레시피 목록을 입력받아 쇼핑 목록을 반환하는 함수를 생성하세요.
  • 레시피 목록을 입력받아 한 주간의 식사 계획을 반환하는 함수를 생성하세요.

• 코드 선택, 파일, 터미널 출력 등 적절한 컨텍스트를 제공하세요.

  예: #codebase 변수를 사용하여 전체 코드베이스를 참조하세요.

  Where is the database connection string used in #codebase?
  

• 프롬프트 반복

  후속 프롬프트를 제공하여 응답을 개선하거나 수정하세요. 예를 들어

  • "숫자의 팩토리얼을 계산하는 함수를 작성하세요."
  • "재귀를 사용하지 않고 캐싱을 사용하여 최적화하세요."
  • "의미 있는 변수 이름을 사용하세요."

• 채팅 기록을 관련성 있게 유지하세요.

  Copilot은 컨텍스트를 제공하기 위해 대화 기록을 사용합니다. 관련 없는 과거 질문 및 응답은 기록에서 제거하세요. 또는 컨텍스트를 변경하려면 새 세션을 시작하세요.

프롬프트 엔지니어링에 대한 자세한 내용은 여기를 참조하세요.

GitHub Copilot 설명서에서 채팅과 함께 사용할 프롬프트의 실제 예를 찾아보세요.

적절한 컨텍스트 및 도구 제공

채팅에서 더 정확하고 관련성 높은 응답을 얻기 위해 관련 컨텍스트로 프롬프트를 풍부하게 만드세요. 올바른 도구를 사용하면 개발자 생산성을 높일 수 있습니다.

• 채팅에서 채팅에서 도구 버튼을 선택하여 사용하려는 도구를 구성하거나 프롬프트에 명시적으로 추가하세요.
• Copilot이 코드 검색을 수행하여 올바른 파일을 자동으로 찾도록 #codebase를 사용하세요.
• #fetch 도구를 사용하여 웹 페이지에서 콘텐츠를 가져오거나 #githubRepo를 사용하여 GitHub 리포지토리에서 코드 검색을 수행하세요.
• #<file name>, #<folder name> 또는 #<symbol>을 사용하여 프롬프트에서 파일, 폴더 또는 기호를 참조하세요.
• 파일, 폴더 또는 편집기 탭을 채팅 프롬프트로 드래그 앤 드롭하세요.
• 시나리오별 컨텍스트를 위해 문제, 테스트 실패 또는 터미널 출력을 채팅 프롬프트에 추가하세요.
• Copilot이 이미지를 분석할 수 있도록 이미지 또는 스크린샷을 프롬프트에 추가하세요.
• 에이전트를 사용할 때 앱을 미리 보려면 프롬프트하여 내장된 간단한 브라우저에서 직접 열도록 하세요.

에이전트를 사용하면 에이전트가 관련 파일 및 컨텍스트를 자동으로 찾아줍니다.

채팅 프롬프트에 컨텍스트를 추가하는 방법에 대한 자세한 내용은 여기를 참조하세요.

재사용 가능한 프롬프트

프롬프트 파일은 특정 작업에 대한 프롬프트와 컨텍스트 및 인스트럭션을 Markdown 파일에 저장할 수 있도록 합니다. 그런 다음 채팅에서 해당 프롬프트를 첨부하고 재사용할 수 있습니다. 프롬프트를 작업 공간에 저장하면 팀과 공유할 수도 있습니다.

재사용 가능한 프롬프트 만들기

1. 명령 팔레트에서 Chat: New Prompt File 명령을 사용하여 프롬프트 파일을 만드세요.

   이 명령은 작업 공간의 루트에 있는 .github/prompts 폴더에 .prompt.md 파일을 생성합니다.

2. Markdown 형식으로 프롬프트와 관련 컨텍스트를 설명하세요.

   예를 들어, 이 프롬프트를 사용하여 새 React 폼 구성 요소를 생성하세요.

   Your goal is to generate a new React form component.
   
   Ask for the form name and fields if not provided.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   * Prefer *uncontrolled* components using register
   * Use `defaultValues` to prevent unnecessary rerenders
   * Use `yup` for validation:
   * Create reusable validation schemas in separate files
   * Use TypeScript types to ensure type safety
   * Customize UX-friendly validation rules
   

3. 선택적으로 채팅에서 프롬프트를 실행하는 방법에 대한 메타데이터를 추가하세요. agent 필드를 사용하여 에이전트를 지정하고 tools 필드를 사용하여 사용할 에이전트 모드 도구를 지정하세요.

   ---
   agent: 'agent'
   tools: ['githubRepo', 'search/codebase']
   description: 'Generate a new React form component'
   ---
   Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   

4. 채팅 입력 필드에 / 뒤에 프롬프트 파일 이름을 입력하여 명령을 실행하세요.

   예를 들어, new-react-form.prompt.md라는 프롬프트 파일을 실행하려면 /new-react-form을 입력하세요.

프롬프트 파일로 시작하세요. 여기를 참조하세요.

AI 모델 선택

Copilot은 선택할 수 있는 다양한 AI 모델을 제공합니다. 일부 모델은 빠른 코딩 작업에 최적화되어 있고, 다른 모델은 느린 계획 및 추론 작업에 더 적합합니다.

채팅 입력 필드의 모델 선택기를 사용하여 요구 사항에 가장 적합한 모델을 선택하세요.

GitHub Copilot 설명서에서 Copilot Chat에 대한 AI 모델에 대해 자세히 알아보세요.

작업 공간 인덱싱

Copilot은 코드베이스에서 관련 코드 조각을 빠르고 정확하게 검색하기 위한 인덱스를 사용합니다. 이 인덱스는 GitHub에서 유지 관리하거나 로컬 컴퓨터에 저장할 수 있습니다.

GitHub 리포지토리의 경우, GitHub 코드 검색을 기반으로 작업 공간의 원격 인덱스를 사용할 수 있습니다. 이렇게 하면 코드베이스가 매우 크더라도 Copilot이 전체 코드베이스를 매우 빠르게 검색할 수 있습니다.

작업 공간 인덱싱에 대한 자세한 내용은 여기를 참조하세요.

관련 리소스

• 프롬프트 엔지니어링 가이드
• GitHub Copilot 설명서의 GitHub Copilot 사용 모범 사례
• VS Code에서 채팅 사용자 지정