[ChatGPT] CodeGpt - vscode에 chatGpt 적용하기

이번에는 visual studio code에서 ChatGPT를 적용하는 방법을 알아보겠습니다. vscode에는 CodeGPT라는 extension이 있는데 이 기능을 활용하면 쉽게 ChatGPT를 적용할 수 있습니다.

 

https://code-gpt-docs.vercel.app/

Basics | Code GPT

Extension 설치

먼저 vscode 좌측에 Extension 탭으로 들어간 다음 CodeGPT를 검색해서 install 합니다.

install 버튼을 누르고 들어가보면 

설치중인 화면이 보입니다.

 

설정

vscode 설정

설치를 완료하고나면 ChatGPT API Key를 등록해야 합니다.

먼저 key 등록하는 곳을 알아 보겠습니다.

설치가 된 CodeGPT화면에서 톱니봐퀴 버튼을 누르면 메뉴가 뜨는데 여기서 Extension Settings를 누릅니다.

누르고 나면 위 화면처럼 Api Key를 입력하는 칸이 나옵니다. 이제 Api key를 발급받으러 가보겠습니다.

 

API Key 발급

먼저 Api Key를 발급 받을 수 있는 OpenAI 홈페이지를 들어갑니다.

https://openai.com/api/

OpenAI API

홈페이지에 들어가서 로그인을 하고 우측 상단을 보면 Personal 버튼을 클릭하면 다음과 같은 화면이 나옵니다.

저 화면에서 View API Keys 버튼을 누르면 Api key발급 페이지로 이동합니다.

그리고 화면 중간에 Create new secret Key 버튼을 누르면 Api key를 생성해줍니다. 

위 화면에서 api key를 복사 한 뒤에 다시 vscode로 돌아와 api key를 입력합니다.

이제 모든 설정이 끝났습니다.

 

실행

실행 방법은 간단합니다.  

코드 리팩토링

코드를 고치고 싶다면 원하는 부분을 드래그 한 뒤에 마우스 우측 클릭하여 원하는 CodeGPT 옵션을 고릅니다.

CodeGPT: Refactor Selection을 클릭하면 좌측 화면에서 추천 코드가 나옵니다.

Ask CodeGPT

이번에는 ChatGPT에 질문하는 것처럼 vscode에서도 질문해서 답을 받는 방법을 알아보겠습니다. 좌측에 CodeGPT아이콘을 클릭하거나 화면 아무데서나 마우스 우측 클릭하여 Ask CodeGPT 버튼을 누릅니다.

그러면 화면 상단에 질문할 수 있는 칸이 나오는데 여기에 질문을 적으면 됩니다.