ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Neovim에서 Copilot 사용하기
    Study/개발 2025. 2. 28. 19:08

    회사에서 Copilot 지원이 시작되었다. 바로 신청해서 사용해보았지만 너무 큰 문제가 있었다.
    VSCode와 Neovim의 싱크가 깨지는 문제였다.

    Vscode Neovim 익스텐션은 VScode 탭과 Neovim 인스턴스 사이에서 싱크를 맞춘다.
    이 때, 코파일럿의 자동완성을 사용하면 간할적으로 Neovim의 싱크가 깨졌다.
    키들이 동작하지 않았고 매번 익스텐션을 재시작 해야했다.

    Sync가 깨져 발생하는 오류

    아래 등록된 이슈로 확인할 수 있는데, 25.02.28 기준 아직 진행 중으로 확인된다.

    Github 이슈 참고: https://github.com/vscode-neovim/vscode-neovim/issues/2184
     

    bug: "Syncing layout: Syncing active editor" keeps running forever · Issue #2184 · vscode-neovim/vscode-neovim

    Check the following: I have checked the behavior after setting "vscode-neovim.neovimClean" in VSCode settings. I have read the vscode-neovim docs. I have searched existing issues. Neovim version (n...

    github.com

     

    Copilot in Neovim

    그래서, 다시 Neovim으로 돌아갈 생각은 없었지만 잠시 Copilot을 사용해보기위해 Neovim으로 돌아갔다.

    다행히, 내가 사용하는 Lazyvim에서는 쉽게 CopilotCopilot-chat을 지원하고 있다.

    :LazyExtras로 extra 플러그인 설치로 진입하여 CopilotCopilot-chat을 설치해주면 된다.

    LazyExtras 플러그인 설치 화면

    사용하는 플러그인은

    lazyvim이 아니라도 위 깃헙을 참고하면 쉽게 설정할 수 있다.

    주의!
    Copilot 플러그인은 Node >= 18에서 동작한다.
    vim.g.node\_host\_prog = "/path/to/node"를 통해 적당한 노드 버전을 지정해줘야한다.

    설치 후, :Copilot Auth를 실행하면 깃헙 인증 링크가 열린다. 인증하면 성공.

    Inline Suggestion

    개인 프로젝트에서 inline suggestion이 잘 되는지 실행해보았다.

    아래 gif를 보면, handle까지 입력했을때 현재 구현이 안되어있는 handleUpload에 대한 제안이 나온다.
    2개의 후보를 제시해줘서 next, prev 키를 통해 둘 중 고를 수 있다.

    입력에 즉각적으로 추천을 제시하는것을 보고, 출시 초기보다 많이 발전했음을 느꼈다.

    Handle Upload에 대한 inline suggestion 예시

    기본적으로 lazyvim에서는 blink.cmp (또는 nvim.cmp)를 통해 auto complete에 copilot suggestion이 통합되어있다.
    개인적으로는 VSCode에서처럼 inline suggestion을 사용하는 것이 편해서 이 부분만 따로 설정해주었다.

    아래 값을 false로 수정해주면 inline으로 사용가능하다.

    -- init.lua
    vim.g.ai_cmp = false
    Github 이슈 참고: https://github.com/LazyVim/LazyVim/discussions/4830
     

    I want to use Copilot suggestion with <Tab> but it does not work properly · LazyVim LazyVim · Discussion #4830

    Hi, I am using LazyVim almost bare bones with plugins; however, I wanted to have copilot suggestions to be completed with <Tab> instead of going to the autocomplete panel and being mixed with varia...

    github.com

     

    Suggestion에서는 아직 얼마전 출시한 Copilot의 GPT-4o 모델을 지원하지 않는다.
    (개발 예정 https://github.com/zbirenbaum/copilot.lua/issues/365)

     

    Copilot Chat

    VSCode의 코파일럿 패널처럼 동작하는 Neovim 플러그인이다.
    여러 파일에 대한 분석 및 수정, 커밋 메시지 동작 등 생각보다 Copilot의 기능들을 충실히 제공한다.

    플러그인에서 제공한 영상링크를 보면 프로젝트에서 수정할 파일들을 분석해서 적용하고, 커밋메시지까지 작성해준다.

    영상 링크 참고

    단계별로 실행하는 과정은 다음과 같다.

    1. 코파일럿 챗 열기

    챗은 기본적으로 추가 버퍼를 통해 열린다.
    창에서 모델 선택, 컨텍스트 입력, 명령 입력을 통해 동작한다.

    2. 모델 선택 (생략 가능)

    다양한 모델을 선택할 수 있다.

    AI 모델 선택

    3. 컨텍스트 입력 (생략 가능)

    컨텍스트는 코드에 사용할 맥락을 제공한다. buffers를 통해 열린 buffer에서 맥락을 얻을 수 있고, files를 통해 workspace 내의 모든 파일에 접근하거나, file으로 특정 파일을 제공할 수도 있다.

    컨텍스트 입력

    4. 질문

    마지막으로 질문 프롬프트를 입력한다.
    전체 예시를 보기 위해 코딩을 잘하기로 유명한 Claude 3.7 Sonnet을 사용해서 간단한 코드 작성을 요청해보았다.

    전체 과정 진행 예시


    Thinking 모델을 사용하여 조금 오래걸려서 결과까지는 녹화하지 않았다.
    코파일럿이 코드를 개선해주고, 아래에 간단한 설명과 참고한 파일을 보여준다.

    <C-y> 단축키를 통해 제안 사항을 바로 반영할 수 있다는 것이 굉장히 편리하다.

    수정 내용
    설명 및 참고 파일

     // 변경사항
     
     const FileUploadButton = () => {
        ...
        function formatFileSize(bytes: number) {
            if (bytes < 1024) return `${bytes} Bytes`;
            else if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
            else return `${(bytes / 1048576).toFixed(1)} MB`;
        }
    
        return ( 
          ...
          {file && (
            <div className="mt-3 flex items-center p-3 rounded-md bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
              <FileIcon className="mr-2 h-4 w-4 text-slate-500 dark:text-slate-400" />
              <div className="flex flex-col">
                <span className="text-sm font-medium">{file.name}</span>
                <span className="text-xs text-slate-500 dark:text-slate-400">
                  {formatFileSize(file.size)}
                </span>
              </div>
            </div>
          )}
          ...
        )}

     

    5. 기타

    프롬프트 기능을 통해, 미리 정의된 기능들을 사용할 수 있다.

    Fix, Commit, Tests, Explain, Docs, Optimize, Review 가 현재 정의되어 있다.
    각각의 목적에 맞는 기능을 제공하는데 개발 시 자주 사용할 수 있는 기능들이 모여있어서 유용하다.

    코파일럿 프롬프트 액션 창

     

    마무리

    Neovim에서도 Copilot을 생각보다 더 자연스럽게 쓸 수 있다.
    특히, Chat 기능들도 너무 잘돼서 이정도면 실무에서 써볼만 하다는 생각을 했다.

    아쉬움이 있다면, 아직 4o를 미지원한다는 것과, Neovim 기반이기 때문에 VSCode 만큼의 UI는 지원하지 않는다는 점이 있다.

    개인적으로도 사용할만한 것 같아서 한 한달정도 사용하면서 장단점을 파악해볼 예정이다.

    728x90
Designed by Tistory.