VS Code 및 Ollama를 사용하여 코드 주석 달기 자동화

작가: Carlos Mucuho✏️

코드 주석은 소프트웨어 개발에서 중요한 역할을 합니다. 그들은:

• * 복잡한 논리 설명
  • 의사결정 프로세스 문서화
  • 미래 개발자를 위한 컨텍스트 제공

잘 작성된 코드는 설명이 필요하지 않다고 주장하는 사람도 있고, 특정 구현 이면의 추론을 포착하는 데 있어 주석의 중요성을 강조하는 사람도 있습니다. 댓글 생성을 자동화한다는 아이디어는 AI가 댓글을 가치 있게 만드는 인간의 통찰력을 진정으로 포착할 수 있는지에 대한 논의를 촉발시켰습니다.

GitHub Copilot과 같은 AI 기반 코딩 도우미는 계속해서 인기를 얻고 있지만 커뮤니티는 데이터 개인정보 보호와 독점 플랫폼에 의존하게 될 위험에 대한 문제로 고심하고 있습니다. 이러한 우려에도 불구하고 Ollama와 같은 도구는 데이터 개인 정보 보호 및 플랫폼 잠금에 대한 우려를 해결하면서 AI 기능의 이점을 누릴 수 있는 방법을 제공합니다.

Ollama는 코딩 도우미 자체가 아니라 개발자가 데이터를 공유하거나 값비싼 구독 비용을 지불하지 않고도 대규모 언어 모델(LLM)을 실행하여 생산성을 향상시킬 수 있는 도구입니다.

이 튜토리얼에서는 Ollama를 사용하여 주석 생성을 자동화하는 VS Code 확장을 만드는 방법을 알아봅니다. 이 프로젝트에서는 LLM 모델을 사용하여 데이터를 공유하거나 값비싼 구독료를 지불하지 않고도 생산성을 높이는 방법을 보여줍니다.

튜토리얼이 끝나면 다음과 유사한 확장 기능을 갖게 됩니다.

따라가려면 다음이 필요합니다.

• Node.js 및 npm 설치
• Ollama를 사용하여 LLM을 실행할 수 있는 머신

올라마 설정

Ollama를 설정하려면 먼저 Ollama 공식 웹사이트에서 운영 체제에 적합한 설치 프로그램을 다운로드하세요.

• Windows에 Ollama를 설치하려면 실행 파일을 다운로드하여 실행하세요. Ollama가 자동으로 설치되면 바로 사용할 수 있습니다
• Mac의 경우 MacOS용 Ollama를 다운로드한 후 파일의 압축을 풀고 Ollama.app 폴더를 응용 프로그램 폴더로 드래그하세요. 앱을 옮기시면 설치가 완료됩니다

• Linux 사용자의 경우 Ollama 설치는 터미널에서 다음 명령을 실행하는 것만큼 간단합니다.
  

  curl -fsSL https://ollama.com/install.sh | sh
  

모델 당기기 및 실행하기

Ollama 설치가 완료되면 LLM과 상호 작용을 시작할 수 있습니다. 명령을 실행하기 전에 앱을 열거나 터미널에서 다음 명령을 실행하여 Ollama를 시작해야 합니다.

curl -fsSL https://ollama.com/install.sh | sh

이 명령은 Ollama 앱을 시작하여 사용 가능한 명령을 사용할 수 있게 해줍니다. 또한 포트 11434에서 실행되는 Ollama 서버를 시작합니다. 새 브라우저 창을 열고 http://localhost:11434/로 이동하여 서버가 실행 중인지 확인할 수 있습니다. 모델을 실행하지 않고 Ollama 레지스트리에서 가져오려면 다음을 사용하세요. 올라마 풀 명령. 예를 들어 phi3.5 모델을 가져오려면 다음을 실행합니다.

ollama serve

이 명령은 모델을 가져와 나중에 사용할 수 있도록 만듭니다. 다음 명령을 사용하면 가져온 모든 모델을 나열할 수 있습니다.

ollama pull phi3.5

모델 목록과 크기 및 수정 시간이 표시됩니다.

ollama list

모델을 즉시 가져오고 실행하려면 ollama run 명령을 사용하세요. 예를 들어, phi3.5를 실행하려면 다음을 실행하세요.

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

이 명령은 모델을 가져오고(아직 가져오지 않은 경우) 즉시 쿼리를 시작할 수 있도록 실행을 시작합니다. 터미널에 다음이 표시되어야 합니다.

ollama run phi3.5

이 튜토리얼에서는 phi3.5 모델을 사용하여 특정 코드 블록에 대한 주석을 생성합니다. 이 언어 모델은 크기와 성능 사이의 균형을 위해 선택되었습니다. 컴팩트하면서도 강력한 결과를 제공하므로 개념 증명 앱을 구축하는 데 이상적입니다.

phi3.5 모델은 RAM이 제한적이고 GPU가 없는 컴퓨터에서도 효율적으로 실행할 수 있을 만큼 가볍습니다. GPU가 있는 경우 더 큰 LLM을 자유롭게 실행하세요. 모델에게 다음 메시지를 보냅니다.

csfm1993:~$ ollama run phi3.5
>>> Send a message (/? for help)

프롬프트는 phi3.5 모델에게 주어진 코드 블록에서 무슨 일이 일어나고 있는지 설명하도록 요청합니다. 다음과 유사한 답변을 받아야 합니다.

complete code:
"
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
"
Given the code block below, write a brief, insightful comment that explains its purpose and functionality within the script. If applicable, mention any inputs expected in the code block. 
Keep the comment concise (maximum 2 lines). Wrap the comment with the appropriate comment syntax (//). Avoid assumptions about the complete code and focus on the provided block. Don't rewrite the code block.
code block:
"
app.get('/', (req, res) => {
  res.send('Hello World!')
})
"

모델은 지정된 주석 구문과 설명이 포함된 주석을 반환합니다. 모델과의 상호작용이 끝나면 /bye 명령을 보내 채팅을 종료하세요.

프로젝트 생성 및 구성

이 섹션에서는 새로운 VS Code 확장 프로젝트를 생성하고 Ollama와 상호 작용하는 데 필요한 모듈을 설치합니다. Yeoman과 VS Code Extension Generator를 사용하여 TypeScript 프로젝트를 스캐폴딩합니다.

터미널에서 다음 명령을 실행하여 새 VS Code 확장 프로젝트를 만듭니다.

// This Express.js route handler responds to GET requests at the root URL 
('/'), sending back a plain text 'Hello World!' message as an HTTP 
response. No additional inputs are required for this specific block of 
code, which serves as a basic setup example within a web server context.

프로젝트에 사용되는 언어로 TypeScript를 선택한 후 나머지 필드를 채웁니다.

npx --package yo --package generator-code -- yo code

이제 다음 명령을 실행하여 Ollama 서버와 상호작용하는 데 필요한 모듈을 설치하세요.

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commentGenerator
? What's the identifier of your extension? commentgenerator
? What's the description of your extension? Leave blank
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

위 명령을 사용하여 다음 패키지를 설치했습니다.

• ollama: LLM과 상호 작용하기 위한 도구 및 유틸리티 세트를 제공하는 패키지입니다. 이는 Ollama 서버와 통신하는 데 사용되며, 주어진 코드 블록에 대한 코드 주석을 생성하기 위해 LLM에 프롬프트를 보냅니다
• cross-fetch: Node.js에 Fetch API 지원을 제공하는 경량 패키지입니다. Fetch를 기본적으로 사용할 수 없는 환경에서 API 요청과 같은 리소스를 가져올 수 있습니다. Ollama 서버에 HTTP 요청을 하고 LLM이 응답을 생성하는 데 너무 오랜 시간이 걸릴 때 발생할 수 있는 HTTP 요청 시간 초과 오류를 방지하는 데 사용됩니다.

package.json 파일을 열고 엔진 속성의 vscode 버전이 시스템에 설치된 VS Code 버전과 일치하는지 확인하세요.

curl -fsSL https://ollama.com/install.sh | sh

package.json 파일에서 TypeScript 프로젝트임에도 불구하고 확장 프로그램의 기본 진입점이 out 디렉터리에 있는 Extension.js 파일이라는 것을 확인하세요. 이는 프로젝트를 실행하기 전에 npm compile 명령을 실행하여 TypeScript 코드가 JavaScript로 컴파일되기 때문입니다.

ollama serve

또한 확장 프로그램에서 실행해야 하는 명령이 명령 속성에 어떻게 선언되어 있는지 확인하세요.

ollama pull phi3.5

현재 ID commentgenerator.helloWorld를 사용하여 Hello World라는 이름으로 선언된 명령이 하나만 있습니다. 이는 스캐폴드 프로젝트와 함께 제공되는 기본 명령입니다.

다음으로 src 디렉터리로 이동하여 Extension.ts 파일을 엽니다.

ollama list

extension.ts 파일은 VS Code 확장의 진입점입니다. 이 파일 내의 코드는 먼저 vscode 모듈을 가져오고 활성화 및 비활성화라는 두 가지 함수를 선언합니다.

확장 프로그램이 활성화되면 활성화 함수가 호출됩니다. 이 함수는 메시지를 기록하고 package.json 파일에 정의된 Hello World 명령을 등록합니다. 이 명령이 실행될 때마다 "Hello World" 메시지를 보여주는 알림 창이 표시됩니다.

확장 프로그램이 비활성화되면(예: VS Code가 닫힐 때) 비활성화 함수가 호출됩니다. 정리가 필요하지 않기 때문에 현재 비어 있지만 리소스를 해제하는 데 사용할 수 있습니다.

편집기 내에서 src/extension.ts를 열고 F5를 누르거나 명령 팔레트에서 디버그: 디버깅 시작 명령을 실행합니다(Ctrl Shift P). 그러면 새로운 Extension Development Host 창에서 확장 프로그램이 컴파일되고 실행됩니다.

새 창의 명령 팔레트(Ctrl Shift P)에서 Hello World 명령을 실행하세요.

편집기에서 src/extension.ts로 이동하여 F5를 누르거나 명령 팔레트(Ctrl Shift P)에서 "디버그: 디버깅 시작" 옵션을 사용하세요. 이 작업은 확장을 컴파일하고 별도의 확장 개발 호스트 창에서 실행합니다.

이 새 창에서 명령 팔레트(Ctrl Shift P)를 열고 Hello World 명령을 실행합니다.

프로젝트 변경 사항을 지속적으로 모니터링하고 자동으로 컴파일하려면 터미널로 돌아가서 다음 명령을 실행하세요.

curl -fsSL https://ollama.com/install.sh | sh

이렇게 하면 TypeScript 컴파일러가 감시 모드에서 시작되어 변경 사항이 있을 때마다 프로젝트가 다시 컴파일됩니다.

댓글 생성 명령 등록

이 섹션에서는 기본 Hello World 명령을 Generate Comment라는 명령으로 대체합니다. 이 명령은 사용자가 댓글을 생성하려고 할 때 실행됩니다. 명령을 정의하고 확장 내에 올바르게 등록되었는지 확인합니다.

package.json 파일을 열고 Hello World 명령을 아래와 같이 바꿉니다.

ollama serve

extension.ts라는 파일을 열고 활성화 함수 내부의 코드를 다음으로 바꿉니다.

ollama pull phi3.5

이 코드는 Hello 명령을 ID commentgenerator.generateComment가 있는 설명 생성 명령으로 대체합니다. 설명 생성 명령은 트리거될 때 정보 메시지도 표시합니다.

그런 다음 확장 프로그램이 비활성화되거나 더 이상 필요하지 않을 때 명령이 올바르게 삭제되도록 명령을 context.subscriptions 배열로 푸시합니다.

F5 키를 누르거나 명령 팔레트(Ctrl Shift P)에서 디버그: 디버깅 시작 명령을 실행합니다. 그러면 새 확장 개발 호스트 창에서 확장 프로그램이 실행됩니다.

새 창의 명령 팔레트(Ctrl Shift P)에서 설명 생성 명령을 실행합니다.

프롬프트 작성

이 섹션에서는 Ollama 서버로 전송될 프롬프트를 작성합니다. 프롬프트에는 코드 블록과 해당 컨텍스트는 물론 LLM에 대한 지침도 포함됩니다. 이 단계는 LLM이 제공된 코드를 기반으로 의미 있는 주석을 생성하도록 안내하는 데 중요합니다.

특정 코드 블록에 대한 주석을 생성하려면 사용자는 먼저 블록을 클립보드에 복사하고 주석이 표시되어야 하는 줄에 커서를 놓은 다음 주석 생성 명령을 실행해야 합니다. 해당 블록을 포함하는 파일의 전체 코드는 프롬프트의 컨텍스트 역할을 합니다.

src 디렉터리에 PromptBuilder.ts라는 파일을 만들고 다음 코드를 추가하세요.

ollama list

이 코드는 getScriptContext, getCodeBlock 및 getCodeBlock의 세 가지 함수를 정의합니다.

• getScriptContext는 현재 텍스트 편집기를 인수로 받아들이고 현재 초점을 맞춘 파일의 전체 텍스트를 반환하여 관련 코드 컨텍스트를 제공합니다
• getCodeBlock은 클립보드에서 텍스트를 읽고 이를 코드 블록으로 반환합니다
• selectCommentSyntax는 현재 텍스트 편집기를 인수로 사용하고 파일 확장자에 대한 적절한 주석 구문을 반환합니다. 이 함수에서는 JavaScript 및 Python 주석 구문만 처리할 수 있습니다. 더 많은 언어를 처리하려면 기능을 수정해야 합니다

이제 코드 컨텍스트, 코드 블록, 주석 구문을 사용하여 프롬프트를 작성해 보겠습니다. PromptBuilder.ts 파일에 다음 코드를 추가합니다.

curl -fsSL https://ollama.com/install.sh | sh

이 코드는 현재 텍스트 편집기를 인수로 사용하고 프롬프트 문자열을 반환하는 buildPrompt라는 함수를 정의합니다.

먼저 이전에 정의된 함수를 사용하여 코드 블록, 코드 컨텍스트 및 주석 구문을 검색합니다. 그런 다음 템플릿 리터럴을 사용하여 프롬프트 문자열을 구성하고 자리 표시자를 실제 값으로 바꿉니다.

프롬프트 문자열은 LLM에게 스크립트 내 코드 블록의 목적과 기능을 설명하는 간결하고 통찰력 있는 설명을 작성하고 간결하게 유지(최대 2줄)하고 올바른 설명 구문으로 래핑하도록 지시합니다. LLM은 제공된 블록에만 집중하여 주석이 관련성이 있고 정확하도록 보장합니다.

이제 buildPrompt 기능을 사용하도록 Extension.ts 파일을 업데이트해 보겠습니다. Extension.ts 파일의 가져오기 블록으로 이동하여 buildPrompt 함수를 가져옵니다.

ollama serve

다음으로 다음 코드로 generateCommentCommand를 업데이트하세요.

ollama pull phi3.5

이 코드는 generateCommentCommand를 업데이트하여 활성 텍스트 편집기를 검색하고 buildPrompt 함수를 사용하여 프롬프트를 빌드합니다. 그런 다음 프롬프트를 기록하고 프롬프트를 생성할 수 없는 경우 오류 메시지를 표시합니다.

F5 키를 누르거나 명령 팔레트(Ctrl Shift P)에서 디버그: 디버깅 시작 명령을 실행하세요. 그러면 새 확장 개발 호스트 창에서 확장 프로그램이 실행됩니다.

새 창의 명령 팔레트(Ctrl Shift P)에서 댓글 생성 명령을 실행하세요.

확장 코드가 있는 원래 창으로 돌아가 통합 터미널을 열고 디버그 콘솔을 클릭한 후 생성된 프롬프트를 찾습니다.

Ollama.js를 사용하여 주석 생성

이 섹션에서는 Ollama.js 라이브러리를 사용하여 프롬프트에서 댓글을 생성합니다. Ollama 서버와 통신하고, 서버에 프롬프트를 보내고, LLM과 상호 작용하고, 생성된 주석을 받는 데 필요한 기능을 설정하게 됩니다.

src 디렉터리에 ollama.ts라는 파일을 만들고 다음 코드를 추가하세요.

curl -fsSL https://ollama.com/install.sh | sh

이 코드는 ollama 모듈에서 Ollama 클래스를 가져오고, cross-fetch 모듈에서 fetch 함수를 가져옵니다. 그런 다음 지정된 호스트 및 가져오기 기능을 사용하여 Ollama 클래스의 새 인스턴스를 만듭니다.

여기에서는 LLM이 응답을 생성하는 데 너무 오랜 시간이 걸릴 때 Ollama 서버가 발생할 수 있는 시간 초과 오류를 방지하기 위해 크로스페치 모듈을 사용하여 Ollama 인스턴스를 생성합니다.

이제 프롬프트를 인수로 사용하고 생성된 댓글을 반환하는 generateComment 함수를 정의해 보겠습니다. ollama.ts 파일에 다음 코드를 추가합니다:

ollama serve

이 코드는 프롬프트를 인수로 사용하고 생성된 댓글을 반환하는 generateComment 함수를 정의합니다.

먼저performance.now 함수를 사용하여 시작 시간을 기록합니다. 그런 다음 ollama 인스턴스의 생성 메소드를 사용하여 Ollama 서버에 요청을 보내고 모델 이름과 프롬프트로 phi3.5를 전달합니다.

다음으로 종료 시간을 기록하고 LLM이 응답을 생성하는 데 걸린 시간을 기록합니다.

마지막으로 응답에 저장된 생성된 댓글을 반환합니다.

이제 generateComment 기능을 사용하도록 Extension.ts 파일을 업데이트해 보겠습니다. 먼저, Extension.ts 파일의 가져오기 블록으로 이동하여 generateComment 함수를 가져옵니다.

ollama pull phi3.5

다음으로 generateCommentCommand 내부의 코드를 업데이트하세요.

ollama list

이 코드는 generateCommentCommand를 업데이트하여 generateComment 함수를 사용하여 댓글을 생성합니다. 그런 다음 생성된 주석을 기록하고 주석을 생성할 수 없는 경우 오류 메시지를 표시합니다.

F5 키를 누르거나 명령 팔레트(Ctrl Shift P)에서 디버그: 디버깅 시작 명령을 실행하세요. 그러면 새로운 Extension Development Host 창에서 확장 프로그램이 컴파일되고 실행됩니다.

댓글을 생성하려는 파일을 열고 원하는 코드 블록으로 이동하여 복사한 후 댓글을 추가하려는 줄에 커서를 놓습니다. 그런 다음 새 창의 명령 팔레트(Ctrl Shift P)에서 설명 생성 명령을 실행합니다.

확장 코드가 있는 원래 창으로 돌아가서 통합 터미널을 열고 디버그 콘솔을 클릭하고 생성된 주석을 찾습니다.

LLM이 응답을 생성하는 데 걸리는 시간은 하드웨어에 따라 다를 수 있다는 점에 유의하세요.

스크립트에 주석 추가하기

이 섹션에서는 사용자가 코멘트 생성 명령을 호출한 줄의 스크립트에 생성된 코멘트를 추가합니다. 이 단계에는 코드 내의 적절한 위치에 주석을 삽입하도록 편집기를 관리하는 작업이 포함됩니다.

src 디렉터리에manageEditor.ts라는 파일을 만들고 다음 코드를 추가합니다.

curl -fsSL https://ollama.com/install.sh | sh

이 코드는 먼저 전체 Visual Studio Code API를 현재 모듈로 가져온 다음 getCurrentLine 및 addCommentToFile이라는 두 가지 함수를 정의합니다.

getCurrentLine 함수는 현재 텍스트 편집기를 인수로 사용하고 현재 줄 번호를 반환합니다.

addCommentToFile 함수는 파일 URI, 파일 이름, 줄 번호, 생성된 주석을 인수로 사용하고 파일의 지정된 줄에 주석을 추가합니다. 먼저 새 WorkspaceEdit 객체를 생성하고 지정된 위치에 주석을 삽입합니다. 그런 다음 편집 내용을 적용하고 정보 메시지를 표시합니다.

이제 addCommentToFile 함수를 사용하도록 Extension.ts 파일을 업데이트해 보겠습니다.

extension.ts 파일의 가져오기 블록으로 이동하여 getCurrentLine 및 addCommentToFile 함수를 가져옵니다.

ollama serve

다음으로 generateCommentCommand 내부의 코드를 업데이트하세요.

ollama pull phi3.5

이 코드는 getCurrentLine 함수를 사용하여 파일 URI, 파일 이름 및 현재 줄 번호를 검색하도록 generateCommentCommand를 업데이트합니다. 그런 다음 addCommentToFile 함수를 사용하여 파일의 현재 줄에 주석을 추가합니다.

F5 키를 누르거나 명령 팔레트(Ctrl Shift P)에서 디버그: 디버깅 시작 명령을 실행하세요. 그러면 새 확장 개발 호스트 창에서 확장 프로그램이 실행됩니다.

댓글을 생성하려는 파일을 열고 원하는 코드 블록으로 이동하여 복사한 후 댓글을 추가하려는 줄에 커서를 놓습니다.

다음으로 명령 팔레트(Ctrl Shift P)에서 주석 생성 명령을 실행하고 몇 초(또는 하드웨어에 따라 몇 분) 후에 주석이 지정된 줄에 배치됩니다(Alt Z를 누를 수 있음). 주석 줄이 너무 길면 줄바꿈하세요):

결론

소프트웨어 개발의 세계는 AI를 사용하여 코드 주석 생성을 포함한 코딩 작업을 지원하는 것에 대한 논의로 가득 차 있습니다.

이 튜토리얼에서는 Ollama.js 라이브러리와 로컬 LLM을 사용하여 코드 주석 달기를 자동화하는 VS Code 확장을 구축하는 방법을 살펴보았습니다. 일부 AI 코딩 도구가 데이터 개인정보 보호를 침해하거나 유료 구독을 요구하지 않고 문서화 프로세스를 간소화할 수 있는 방법을 시연했습니다.

---

몇 분 만에 LogRocket의 최신 오류 추적을 설정하세요.

1. https://logrocket.com/signup/을 방문하여 앱 ID를 받으세요.
2. NPM 또는 스크립트 태그를 통해 LogRocket을 설치합니다. LogRocket.init()는 서버측이 아닌 클라이언트측에서 호출해야 합니다.

NPM:

ollama list

스크립트 태그:

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

3.(선택 사항) 스택과의 심층 통합을 위해 플러그인을 설치합니다.

• Redux 미들웨어
• ngrx 미들웨어
• Vuex 플러그인

지금 시작하세요

위 내용은 VS Code 및 Ollama를 사용하여 코드 주석 달기 자동화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!