ChatGPT를 VSCode안으로 데리고 오는 방법

📌AI Code Helper

ChatGPT를 VSCode 안으로 데리고 와서 코드 생산성을 높여보자.

VSCode에는 익스텐션이라는 확장플러그인을 사용하여 다양한 기능을 사용할 수 있다.

설치방법

첫 번째로 익스텐션에서 AICodeHelper를 검색하여 설치해주자.

AICodeHelper는 코드에 주석을 달아 주기도 하고, 우리가 만든 코드가 개선돼야 할 점은 어떤 점들이 있는지, 잘한 부분은 어떤 점이 있는지에 대한 코드 리뷰를 해준다. 또한 코드를 리팩토링 해주기도 한다. 추가적으로 우리가 만들고 싶은 코드를 말로 설명하면 그 코드를 만들어 주기도 한다!!

해당 링크에 들어가면 더욱 자세한 예시를 볼 수 있다.

필요한 준비물은 OpenAI에서 발급해주는 GPT API이다. API Key를 발급 받아야 하는데 위의 사이트에 들어가면 아래와 같은 곳을 클릭하자.

그렇다면 아래와 같은 사이트에 들어갈 수 있을것이다.

여기서 Create new secretkey를 클릭하여 API key를 발급받고 해당 키를 복사한다.

이후 VScode에서 ctrl+, 를 눌러 설정창을 켜주고, aicodehelper를 검색해준다. 이후 아래 사진과 같이 Gptkey 칸에 복사한 API key를 붙여넣기 해주면 완료가 된다.

추가적으로 바로 아래 칸에 보면 Language설정 칸이 있다. 해당 칸은 korean이라고 설정하면, AI가 나에게 도움을 줄 때(ex. 주석달기, 코드리뷰) 한국어로 도움을 받을 수 있다.

단축키

• Ctrl+Alt+Shift+z 주석달기
  

• Ctrl+Alt+Shift+r 리팩토링

  • 변경 전
    
  • 변경 후
    

• Ctrl+Alt+Shift+c 코드리뷰

      let a = 20;
       if(a==30){
          console.log('d is 300')
       }
       if(a==10){
          console.log('d is 100')
       }
       if(a==20){
          console.log('d is 200')
       }

  이것은 아래와 같이 변환됩니다

    // Good part: 
    // The code correctly checks the value of variable "a" against different conditions and prints the corresponding message when the condition is true. 
    // Bad part: 
    // The code uses multiple if statements instead of else if or switch statement, which can result in unnecessary checks and slower performance. Additionally, there is no default or catch-all condition for when "a" does not match any of the given conditions, so the code will not output anything in that case.
    let a = 20;
    if(a==30){
       console.log('d is 300')
    }
    if(a==10){
       console.log('d is 100')
    }
    if(a==20){
       console.log('d is 200')
    }

• Ctrl+Alt+Shift+g 자연어명령->코드

• Ctrl+Alt+Shift+m 개발 이외 일반적인 질문

• 맥 : Shift+Ctrl+Option

AI Code Helper에 가면 더 많은 기능을 확인할 수 있다.

다만 OpenAPI의 GPT를 사용하다 보니 요금이 청구될 수 있다.

위 사진은 gpt-3.5-turbo 모델의 사용료이다.

또한 요금은 OpenAI 사이트에서 personal usage 에서 확인 가능하다.

참고
코드깎는노인/ChatGPT를 VSCode안으로 데리고 오자 | 인공지능 코딩
AICodeHelper