Создание расширения VSCode с помощью ChatGPT

Введение

Этот проект проведет вас через процесс создания расширения VSCode, которое позволяет пользователю изменять уровень заголовка для выделенного текста Markdown. В результате у вас будет рабочее расширение, которое улучшит процесс редактирования Markdown в Visual Studio Code.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы узнаете:

• Как создать каркас (scaffolding) для расширения VSCode с использованием TypeScript.
• Как интегрировать TypeScript с конфигурациями Node.js и VSCode.
• Как разработать основную функциональность для изменения уровней заголовков выделенного текста Markdown.
• Как написать конфигурационные файлы для сборки, отладки и запуска расширения.

🏆 Достижения

После завершения этого проекта вы сможете:

• Проектировать и разрабатывать расширения VSCode с использованием TypeScript.
• Обрабатывать взаимодействие с пользователем и выделение текста в среде VSCode.
• Разбирать (парсить) и манипулировать синтаксисом Markdown.
• Генерировать и управлять несколькими файлами в проекте.
• Настраивать 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

   Вам необходимо прочитать README smol-ai и настроить ключ API OpenAI.

Инициализация расширения

Существует базовый промпт, описывающий этот проект:

a vscode extension that lets the user adjust the heading level of the selected text. it should have three commands: increase heading level, decrease heading level, and set heading level

Обратите внимание, что промпт короткий и общий. Вы можете попытаться улучшить промпт, добавив больше деталей о проекте.

Вы можете запустить smol-ai для генерации проекта. После нескольких минут, потраченных на генерацию кода, smol-ai создал файлы в директории developer/generated.

Задачи

1. Инициализировать проект

   Просмотрите README smol-ai, затем используйте 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. Исправить проблемы при установке зависимостей.

   Вы можете попросить ИИ исправить проблемы.

Ожидаемый результат

После исправления проблем вы можете увидеть следующий пример результата.

$ 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. Исправить проблемы при компиляции кода.

   Вы можете попросить ИИ исправить проблемы.

Ожидаемый результат

После исправления проблем вы можете увидеть следующий пример результата.

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

Запуск расширения

Запуск расширения VSCode требует перехода на панель «Запуск и отладка» (Run and Debug) и запуска задачи vscode extension, когда файл extension.ts активен в редакторе.

Могут возникнуть проблемы при запуске расширения. Вам нужно их исправить.

Задачи

1. Исправить проблемы при запуске расширения.

   Вы можете попросить ИИ исправить проблемы.

Ожидаемый результат

После исправления проблем вы увидите, что расширение работает правильно.

Резюме

Работает 🥳

Итак, как у нас получилось? Мы получили рабочее расширение. Мы заставили его выполнить цель, поставленную в нашем промпте.

Путь к этому моменту не был «автоматическим». По пути мы столкнулись со многими проблемами. Не имея предварительных знаний о TypeScript, Node.js и VSCode, отладка этих проблем заняла бы некоторое время.

И даже несмотря на то, что мы смогли сгенерировать работающий код, все еще есть много улучшений, которые можно внести:

• Нет инструкций о том, как разрабатывать, использовать или публиковать расширение;
• Нет .gitignore для артефактов TypeScript/JavaScript/VSCode;
• Нет файла launch.json, который настраивает запуск расширения в режиме разработки;
• Нет тестов;
• Нет повторного использования кода.