9.8 KiB
English | 简体中文 | 日本語 | 한국어 | Русский
Open Code Review (расширение для VS Code)
Расширение для проверки кода в VS Code, построенное на CLI open-code-review (ocr). Оно воспроизводит поведение прототипа в WebView на Preact и переносит AI-проверку кода в редактор: запускайте проверку из боковой панели, следите за журналом в реальном времени и применяйте, отклоняйте или помечайте как ложное срабатывание каждый комментарий прямо в редакторе — обе стороны синхронизируются в обоих направлениях.
Возможности
- Три режима проверки: изменения рабочей копии, сравнение веток (
--from/--to) и отдельный коммит (--commit). - Предпросмотр файлов для проверки: список изменённых файлов по текущему состоянию Git; нажмите на файл, чтобы посмотреть изменения в штатном diff-представлении.
- Свой промпт для проверки: при необходимости добавьте подсказку
--backgroundдля текущей проверки. - Журнал в реальном времени: вывод CLI транслируется по ходу проверки, отменить её можно в любой момент.
- Результат и двусторонняя синхронизация: по завершении в боковой панели появляются карточки комментариев, а в редакторе — CommentThread; действия «применить» / «отклонить» / «ложное срабатывание» синхронизируются с обеих сторон.
- Пустое, отменённое и неуспешное состояния: отдельные представления для случаев «проблем нет», отмены пользователем и сбоя CLI (сбой можно повторить, а текст ошибки берётся из ответа CLI).
- Управление настройками: просмотр и изменение настроек провайдера LLM прямо в расширении (запись через
ocr config set). - Переключение моделей и проверка связи: смена модели и проверка соединения с LLM из строки состояния.
Требования
-
Установите CLI
ocrглобально:npm i -g @alibaba-group/open-code-review -
Настройте рабочего провайдера LLM (эндпоинт, API-ключ, модель). Это можно сделать напрямую через CLI или в представлении настроек расширения:
ocr config set llm.url https://api.anthropic.com/v1/messages ocr config set llm.auth_token sk-... ocr config set llm.model claude-opus-4-6 ocr config set llm.use_anthropic trueНастройки записываются в
~/.opencodereview/config.json.
Разработка
Окружение
- Node.js 18 и новее, менеджер пакетов — Yarn (в репозитории есть
yarn.lock). - VS Code 1.74 и новее.
- Доступный глобально CLI
ocr(см. «Требования» выше): по сути расширение — это графический интерфейс кocr.
Запуск окружения разработки
cd extensions/vscode
yarn install # установить зависимости
yarn watch # сборка в режиме наблюдения (рекомендуется: пересобирает out/ при изменениях)
Затем откройте папку extensions/vscode в VS Code и нажмите F5, чтобы запустить Extension Development Host (конфигурация отладки лежит в .vscode/launch.json). В новом окне откройте проект с изменениями в Git — в панели действий появится значок Open Code Review, и можно запускать проверку.
После правок кода: изменения WebView требуют повторно открыть боковую панель в окне хоста разработки (либо выполнить
Developer: Reload Webviews); изменения Extension Host требуют перезапуска сеанса отладки (кнопка ⟳ на панели отладки илиCmd+Rв окне хоста).
Скрипты
yarn compile # разовая сборка для разработки (webpack development)
yarn watch # сборка в режиме наблюдения
yarn build # продакшен-сборка (webpack production; выполняется автоматически перед упаковкой)
yarn test # модульные тесты Jest
yarn lint # ESLint
yarn package # собрать .vsix для распространения (см. «Сборка релизного пакета»)
Заметки по отладке
- Двусторонний обмен сообщениями: WebView и Extension Host общаются через
postMessage, типы сообщений лежат вextensions/frontend/src/shared/messages.ts. Обе стороны проходят черезdispatch/handle— с этого и стоит начинать отладку. - Вызов CLI: все подкоманды
ocrзапускаются черезchild_process.spawnвsrc/extension/services/CliService.ts.runRawотклоняет промис при ненулевом коде возврата CLI и включает текстError:из stderr, что помогает разобраться со «сбоем проверки / сбоем подключения». - Чтение и запись настроек:
ConfigServiceчитает~/.opencodereview/config.json, а запись делегируетocr config set. Поля WebView в camelCase (например,useAnthropic), а на диске и в CLI — snake_case (например,use_anthropic); преобразование живёт вsrc/extension/services/configParse.ts.
Сборка
Только артефакты компиляции
yarn build # продакшен-сборка (webpack production)
Артефакты: out/extension.js (Extension Host) и out/webview.js (SPA WebView).
Сборка релизного пакета (.vsix)
yarn package # = vsce package --no-yarn
Эта команда:
- запускает
vscode:prepublish→ продакшен-сборкуyarn build; - исключает исходники, тесты и файлы разработки согласно
.vscodeignore; - создаёт
open-code-review-vscode-<version>.vsixв текущем каталоге.
Инструмент упаковки —
@vscode/vsce, установленный как devDependency: глобальная установка и загрузка из сети не нужны.--no-yarnпропускает стандартную проверку дерева зависимостей npm в vsce (проект использует Yarn).
В релизный пакет попадает только необходимое для работы: package.json, README.md, resources/icon.svg, out/extension.js, out/webview.js.
Локальная установка / проверка
code --install-extension open-code-review-vscode-<version>.vsix
Или в VS Code: панель расширений → ⋯ в правом верхнем углу → Install from VSIX… → выберите созданный файл .vsix.
Для публикации в Marketplace используйте
vsce publish(нужны аккаунт издателя и PAT); для повседневного распространения достаточно.vsixвыше.
Архитектура
Используется схема Monolithic WebView + Thin Extension Host:
- WebView — отдельно собираемое SPA на Preact из общего фронтенда
extensions/frontend/(его же использует плагин для IntelliJ IDEA). - Слой Extension Host тонкий: только вызовы CLI, файловая система, операции Git и комментарии в редакторе.
- Оба слоя общаются через
postMessage, а общие типы TypeScript вextensions/frontend/src/shared/обеспечивают типобезопасность.
src/
└── extension/ Extension Host (Node.js): services / providers / commands
WebView и общие типы собираются из общего фронтенда extensions/frontend/ (его же использует плагин для IntelliJ IDEA).
Лицензия
Apache-2.0