[OSSCA] vscode에서 Continue 익스텐션 설치 및 설정하는 방법

 

 

 

 

 

 

 

Continue는 오픈소스 코딩 어시스턴트 프로젝트로,

VS Code, Intellij 와 같은 idle에서 사용할 수 있는 Github copliot같은 도구이다.
다양한 상용 llm도 지원 가능해서 자신만의 ai로 커스터마이징할 수 있다는 장점이 있다. 

 

 chatGPT랑 클로드는 자주 써봤지만 idle에서 써본적은 없어서 정보를 열심히 찾아보았다. 

다행히 공식문서가 잘 정리되어 있어 아래 링크를 통해 설치하고 설정하는 방법을 쉽게 이해할 수 있었다.

 

Continue

 

 

---

Continue 설치 방법

 

1. Vscode 익스텐션에서 Continue를 검색 후 Install 버튼 누르기

 

2. 1초만에 설치됨. 아주 쉽다😊

 

 

이렇게 잘 설치된 것을 확인할 수 있고, 왼쪽 사이드바에도 추가되었다!

 

 

팝업이 열리면서 Continue 도구를 어떻게 사용하는지 간단히 소개하고 있다.

내용은 다음과 같다.

1. Edit in natural language

코드 섹션을 하이라이트하고 리팩토링하라고 지시할 수 있다.

 

2. Get possible Explanations

내 코드를 다른 시각에서 보고 설명해달라고 부탁할 수 있다.

 

3. Generate files from search 

파이썬 스캐폴딩, 리액트 컴포넌트 등을 만들어달라고 할 수 있다.

 

 

기초 설정

OpenAI(chatGPT mini-4) or Claude(Anthropic) 둘 다 사용해볼 예정.

먼저 테스트를 위해 가장 익숙한 open ai를 사용하기로 했다.

 

https://platform.openai.com/docs/overview

 

위 링크 openAI 사이트에서 Continue를 위한 새로운 프로젝트를 하나 만들었다.

이후 오른쪽 상단 내 프로필 사진을 눌러 Setting에 접속한다.

 

 

결제수단 등록하기

프로젝트 내 사이트바에서 Billing을 선택해 결제 수단을 등록한다. (최소 5달러)

해외 결제가 가능한 카드로 등록해야 한다.

 

 

이렇게 카드 정보 및 개인 정보를 입력하고 최소 한도인 5달러로 설정했다.

그리고 공부 목적으로 사용하는 것이기에 자동 결제를 비활성화함

 

결제 수단이 성공적으로 등록되었으면 5달러가 설정된 것을 확인할 수 있다.

이게 무료로 사용할 수 있는 한도 역할을 한다.

 

 

OpenAI Key 발급하기

이제 Create new secret key를 눌러 새로운 키를 발급받고 복사해둔다.

한번 발급된 키를 다시 확인할 수 없어 백업해둬야함!

 

 

 

설정 파일에 키 등록

config.json에 모델 정보과 함께 키를 등록한다.

나의 경우 익스텐션에서 add 버튼을 눌러서 자동 추가했지만, json 파일을 직접 수정해도 상관없다.

 

 

 

 

 

설정 파일인 config.json을 다음과 같이 수정한다.

gpt-4o-mini에 있는 apiKey에 아까 발급해둔 키를 복붙하면 끝!!

 

{
  "models": [
    {
      "title": "Claude 3 Sonnet (Free Trial)",
      "provider": "free-trial",
      "model": "claude-3-5-sonnet-20240620"
    },
    {
      "title": "GPT-4o (Free Trial)",
      "provider": "free-trial",
      "model": "gpt-4o"
    },
    {
      "title": "Llama3 70b (Free Trial)",
      "provider": "free-trial",
      "model": "llama3.1-70b"
    },
    {
      "title": "Codestral (Free Trial)",
      "provider": "free-trial",
      "model": "codestral-latest"
    },
    {
      "model": "gpt-4o-mini",
      "contextLength": 128000,
      "title": "GPT-4o Mini",
      "provider": "openai",
      "apiKey": "키"
    },

    {
      "model": "claude-3-5-sonnet-20240620",
      "contextLength": 200000,
      "title": "Claude 3.5 Sonnet",
      "apiKey": "키",
      "provider": "anthropic"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Tab Autocomplete",
    "provider": "free-trial",
    "model": "codestral-latest"
  },
  "embeddingsProvider": {
    "provider": "free-trial"
  },
  "reranker": {
    "name": "free-trial"
  }
}

 

 

free-trial은 키를 등록하지 않아도 사용 가능하지만, 

최대 50번밖에 사용할 수 없기 때문에 공부를 위해서는 부족하다..

따라서 이렇게 키를 등록해주면 공부할만큼은 사용 가능한 것으로 보인다😊

 

자 이제 Continue와 대화를 시도해보자..!!

 

 

 

쨘. 영어와 한국어 모두 잘 알아듣는다. 

slash(/)를 통해 명령어를 입력하면 다양한 기능을 활용 가능하다.

일단 이번에는 간단히 edit 기능만 테스트해보기로 했다.

 

 

 

타입스크립트 공부용 파일에서 드래그 후 ctrl + l을 클릭해 이렇게 물어보았다.

실제로 다음 강의가 배열과 튜플이라 미리 예습할 겸 질문!

 

 

모델이 작성해준 배열과 튜플 타입 학습용 코드이다.

따로 부탁하지 않았는데도 알아서 gpt가 내가 위에서 작성한 주석 형식까지 맞춰서 작성해줌..!

맨위 Accept All을 눌러서 변경사항을 확인해주면 바로 저장된다.

 

 

 

그리고 Dashboard > Usage에서 모델 사용량도 확인 가능하니 참고할 것!

 

 

 

앞으로 더 다양한 기능을 탐방해보고 Continue를 활용해보아야겠다!

오픈소스 기여도 도전해보기..는 내 작은 바람이다...🥹

 

 

---