ChatGPT 로 VSCode 확장 기능 빌드하기

소개

이 프로젝트에서는 사용자가 선택한 마크다운 텍스트의 제목 수준을 조정할 수 있는 VSCode 확장 기능을 만드는 과정을 안내합니다. 최종적으로 Visual Studio Code 에서 마크다운 편집 경험을 향상시키는 기능을 갖춘 확장 프로그램을 갖게 될 것입니다.

👀 미리보기

🎯 목표

이 프로젝트에서 다음 사항을 학습하게 됩니다.

• TypeScript 를 사용하여 VSCode 확장 기능의 스캐폴딩 (기본 구조) 을 생성하는 방법.
• TypeScript 를 Node.js 및 VSCode 구성과 통합하는 방법.
• 선택된 마크다운 텍스트의 제목 수준을 조정하는 핵심 기능을 개발하는 방법.
• 확장 기능 빌드, 디버깅 및 실행을 위한 구성 파일 작성 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있게 됩니다.

• TypeScript 를 사용하여 VSCode 확장 기능을 설계하고 개발합니다.
• VSCode 환경 내에서 사용자 상호 작용 및 텍스트 선택을 처리합니다.
• 마크다운 구문을 구문 분석하고 조작합니다.
• 프로젝트에서 여러 파일을 생성하고 관리합니다.
• 원활한 개발을 위해 TypeScript, Node.js 및 VSCode 를 구성합니다.

smol-ai 설치

추가적으로, 코드를 생성하기 위해 smol-ai 프레임워크를 사용합니다.

smol-ai에 대한 README 설명:

이것은 제품 사양을 제공하면 전체 코드베이스를 스캐폴딩해 주는 "주니어 개발자" 에이전트 (일명 smol dev) 의 프로토타입이지만, 세상을 끝내거나 AGI 를 과대 약속하지는 않습니다. create-react-app 이나 create-nextjs-app 처럼 구체적이고 경직된 일회성 스타터를 만들고 유지하는 대신, 이것은 기본적으로 create-anything-app 과 같으며, smol dev 와 긴밀한 루프를 돌며 스캐폴딩 프롬프트를 개발합니다.

우리는 smol-ai의 단순성 때문에 이를 선호합니다. 전체 코드 생성 로직은 세 가지 주요 함수로 구성된 단일 Python 파일에 있습니다.

1. 프롬프트를 수행하는 데 필요한 파일 목록 생성 (예: package.json, index.js, ...)
2. 프롬프트를 수행하는 데 필요한 공유 종속성 목록 생성 (예: axios, react, ...)
3. 생성된 파일 목록의 각 파일에 대해, 공유 종속성을 활용하여 파일에 들어갈 코드를 생성합니다.

smol-ai는 오류 디버깅 및 현재 코드베이스를 기반으로 프롬프트 생성과 같은 다른 기능도 제공한다는 점에 유의하십시오.

목표

1. smol-ai 리포지토리 복제

   https://github.com/smol-ai/developer 리포지토리를 /home/labex/project 디렉토리에 복제해야 합니다.

2. smol-ai 구성

   smol-ai README 를 읽고 OpenAI API 키를 구성해야 합니다.

이 확장 기능 초기화

이 프로젝트를 설명하는 기본 프롬프트가 있습니다.

사용자가 선택한 텍스트의 제목 수준을 조정할 수 있는 vscode 확장 기능. 세 가지 명령이 있어야 합니다: 제목 수준 증가, 제목 수준 감소, 제목 수준 설정

프롬프트가 짧고 일반적이라는 점에 유의하십시오. 더 자세한 내용을 추가하여 프롬프트를 개선해 볼 수 있습니다.

smol-ai를 실행하여 프로젝트를 생성할 수 있습니다. 코드 생성에 몇 분을 보낸 후, smol-ai 는 developer/generated 디렉토리에 파일을 생성했습니다.

목표

1. 프로젝트 초기화

   smol-ai README 를 보고 smol-ai를 사용하여 프로젝트를 생성합니다.

2. 프로젝트 구성

   생성된 코드를 확인해야 합니다. 필요한 경우 프롬프트를 조정하여 다시 생성할 수 있습니다.

예상 결과

developer/generated 디렉토리에 생성된 코드의 예시가 있습니다. 결과는 다를 수 있습니다.

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

이 확장 기능 테스트

이 확장 기능을 테스트하려면 다음 단계를 성공적으로 실행해야 합니다.

1. 종속성 설치;
2. 코드 컴파일;
3. 확장 기능 실행.

종속성 설치

생성된 디렉토리에서 다음 명령을 실행해야 합니다.

yarn

종속성 설치 시 일부 문제가 발생할 수 있습니다. 문제를 해결해야 합니다.

목표

1. 종속성 설치 시 발생하는 문제 해결.

   AI 에게 문제를 해결해 달라고 요청할 수 있습니다.

예상 결과

문제가 해결되면 다음과 같은 예시 결과를 볼 수 있습니다.

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

이 확장 기능 빌드

TypeScript 는 컴파일 언어이므로 코드를 JavaScript 로 컴파일하기 위해 빌드 단계를 실행해야 합니다. package.json에는 다음 스크립트가 포함되어 있습니다.

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
},

다음 명령을 실행하여 코드를 빌드할 수 있습니다.

tsc --init
yarn compile

코드를 컴파일할 때 일부 문제가 발생할 수 있습니다. 문제를 해결해야 합니다.

목표

1. 코드 컴파일 시 발생하는 문제 해결.

   AI 에게 문제를 해결해 달라고 요청할 수 있습니다.

예상 결과

문제가 해결되면 다음과 같은 예시 결과를 볼 수 있습니다.

$ tsc -p ./
✨ Done in 0.80s.

이 확장 기능 실행

VSCode 확장 기능을 실행하려면 "실행 및 디버그" 패널로 이동하여 extension.ts 파일이 편집기에서 활성화된 상태일 때 vscode extension 작업을 시작해야 합니다.

확장 기능을 실행할 때 일부 문제가 발생할 수 있습니다. 문제를 해결해야 합니다.

목표

1. 확장 기능 실행 시 발생하는 문제 해결.

   AI 에게 문제를 해결해 달라고 요청할 수 있습니다.

예상 결과

문제가 해결되면 확장 기능이 올바르게 실행되는 것을 볼 수 있습니다.

요약

작동합니다 🥳

그래서 우리는 어떻게 했을까요? 우리는 작동하는 확장 기능을 얻었습니다. 설정된 목표를 달성하도록 만들었습니다.

이 시점까지의 여정은 "자동"이 아니었습니다. 우리는 도중에 많은 문제에 직면했습니다. TypeScript, Node.js 및 VSCode 에 대한 사전 지식이 부족했기 때문에 이러한 문제를 디버깅하는 데 시간이 꽤 걸렸을 것입니다.

비록 우리가 작동하는 코드를 생성할 수 있었지만, 여전히 개선할 점이 많습니다.

• 확장 기능 개발, 사용 또는 게시 방법에 대한 지침이 없습니다.
• TypeScript/JavaScript/VSCode 아티팩트를 위한 .gitignore 파일이 없습니다.
• 개발 중 확장 기능을 실행하도록 구성하는 launch.json 파일이 없습니다.
• 테스트가 없습니다.
• 코드 재사용이 없습니다.