Quorvox Dev

Расширение для VS Code для тех, кто делает сайты и сервисы на Node.js: одна кнопка поднимает весь проект, а потом объясняет, как в нём всё связано. Всё работает на твоём компьютере, без платных сервисов и без отправки кода куда-либо.

Что умеет

Запуск и живая разработка

• ▶ Одна кнопка запускает все сервисы проекта (находит package.json со скриптом dev или start).
• Меняешь файл (сам, ИИ или git pull), и нужный сервис перезапускается. Правишь HTML/CSS, и страница в браузере обновляется сама.
• Логи всех сервисов в одном окне, с фильтром и поиском. Ошибки из браузера (в том числе с телефона) тоже приходят сюда.
• 📱 QR-код: открой сайт на телефоне по Wi-Fi, страница на телефоне обновляется сама.

Карта проекта (для новичков)

• Страницы → CSS и скрипты → серверные файлы → таблицы базы и внешние сервисы.
• Нажми на блок, и подсветится вся цепочка, а справа простыми словами написано, что это.
• CSS: какие классы живые, какие мёртвые, какой скрипт какими пользуется.
• Двигай карту как в играх: колёсико, правая кнопка мыши, Пробел.

Проверки (локально, код не запускается)

• Битые ссылки на файлы (картинки, стили, скрипты, шрифты, страницы), в том числе разница в регистре, из-за которой на Linux-сервере файл не откроется, и ссылки за пределы папки сайта.
• Фронт зовёт адрес, которого нет на сервере, или не тем методом.
• Переменные окружения без значения и без .env.
• Два сервиса на одном порту.
• Опечатки в именах CSS-классов, мёртвый CSS.

Подсказки прямо в редакторе, пока пишешь код

• Красные и жёлтые подчёркивания там, где что-то не так: фронт зовёт адрес, которого нет на сервере (подчёркивается сам api('/…')), в class опечатка (подчёркивается имя класса), ссылка на несуществующий файл. Работает по несохранённому тексту: ошибка видна, как только остановился печатать.
• Автодополнение: в class="…", className, classList.add('…') предлагаются классы из твоего CSS (с куском правила в подсказке), в api('…') и fetch('/…') адреса, которые реально есть на сервере (с методами и файлом), после process.env. переменные из кода.
• Ctrl+клик по классу ведёт в правило в CSS, по адресу API в серверный маршрут.
• Наведение мыши: на класс показывает кусок CSS, на адрес какой маршрут это и где, на process.env.X описана ли переменная.
• Всё это включается и выключается: настройки quorvox.editor.diagnostics и quorvox.editor.completions или команда «Quorvox: Подсказки в редакторе». Внутри строк VS Code по умолчанию сам не открывает подсказки, поэтому список появляется после кавычки или пробела, а в остальных местах по Ctrl+Пробел.

Выкладка на свой сервер (VPS)

• Кнопка 🚀: проверки, окно подтверждения, архив, заливка по ssh, перезапуск, проверка.
• Перед заливкой на сервере сохраняется копия кода, откат одной командой.

Быстрый старт

1. Открой папку проекта в VS Code.
2. Нажми иконку Quorvox слева, затем ▶.
3. Когда сервер напишет свой порт, откроется адрес с автообновлением.

Бэкенд не нужен. Если в папке есть index.html (или несколько сайтов в подпапках), расширение само раздаст сайт встроенным сервером: живое обновление, QR для телефона, ошибки из браузера и проверки (битые ссылки на файлы, CSS, регистр букв в именах файлов) работают так же. Проекты на Vite/Next тоже подключаются: перезагрузкой там по-прежнему занимается сам Vite, а расширение добавляет QR для телефона и ошибки браузера в логи.

Если нужно настроить по-своему, создай quorvox.json в корне проекта:

{
  "services": [
    { "name": "api", "cwd": "server", "command": "node index.js" },
    { "name": "bot", "cwd": "bot", "command": "python bot.py", "restartOnSave": false }
  ],
  "deploy": {
    "host": "203.0.113.7",
    "user": "deploy",
    "path": "/opt/my-project",
    "restart": "pm2 restart my-project",
    "install": "npm ci --omit=dev",
    "check": "curl -fsS -o /dev/null http://127.0.0.1:3000/",
    "exclude": ["uploads", "*.bak"]
  }
}

Безопасность

• Выкладка идёт только по ключу ssh. Пароли расширение не спрашивает и не хранит. Каждый раз показывается окно подтверждения: куда, сколько файлов, что не уйдёт.
• Никогда не отправляются: .env, базы данных (*.db, *.sqlite), ключи и сертификаты, node_modules, папки data, logs, uploads, скрытые папки. Если в коде похоже на секрет (токен бота, приватный ключ), расширение предупредит.
• Доступ с телефона включается только по твоей кнопке, пускает только устройства из частных сетей (Wi-Fi дома или в офисе) и выключается при остановке сервисов.
• Расширение не собирает данные и ничего не отправляет разработчику.

Команды (Ctrl+Shift+P → «Quorvox»)

Для разработчиков

npm install
npm run build        # сборка в dist/extension.js
npm test             # юнит-тесты (Node, без VS Code)
npm run test:vscode  # проверка внутри настоящего VS Code (отдельный экземпляр с чистым профилем, нужен установленный VS Code на Windows)
npm run package      # собрать .vsix

Исходники: src/ (логика анализа и слой VS Code), test/ (юнит-тесты), test-vscode/ (интеграционный тест). Логика, не зависящая от VS Code, вынесена в отдельные модули и тестируется обычным Node. Установить собранный .vsix из релиза: code --install-extension quorvox-dev-<версия>.vsix.

Лицензия

MIT, см. LICENSE.

Ограничения

Связки «фронт ↔ сервер» (карта и проверки маршрутов) рассчитаны на Node.js с Express и обычными fetch / api('/путь') во фронте. Для сайтов без бэкенда работают запуск, живое обновление, QR, проверки ссылок и CSS, карта страниц и стилей. Для других стеков запуск и логи работают, а остальное покажет только то, что сможет разобрать.