VSCode-расширение для мгновенного превью React/Next.js-компонентов прямо в редакторе. Открывает Webview-панель справа, собирает текущий компонент встроенным Vite-сервером, поддерживает hot reload, реальные стили (CSS Modules, Tailwind, global CSS) и моки Next.js-модулей (Image, Link, useRouter, usePathname и др.).

Возможности

Команда Preview Component — через Command Palette, иконку в заголовке редактора или хоткей.
Webview справа от редактора с живым рендером компонента.
Hot reload — изменения файла применяются на лету (Vite HMR), без потери панели.
Реальные стили — CSS Modules, Tailwind и глобальный CSS обрабатываются вашим же postcss.config/tailwind.config (Vite запускается с корнем вашего проекта).
Моки Next.js — next/image, next/link, next/head, next/script, next/dynamic, next/router, next/navigation (useRouter, usePathname, useSearchParams, useParams, redirect, notFound и т. д.).
Алиасы tsconfig — пути из compilerOptions.paths подхватываются автоматически (vite-tsconfig-paths).
Панель ошибок — ошибки сборки, компиляции и рантайма видны в нижней панели webview.

Как пользоваться

Откройте файл компонента (.tsx, .jsx, .ts, .js).
Запустите превью одним из способов:
- Command Palette → Preview Component;
- хоткей Cmd+Alt+P (macOS) / Ctrl+Alt+P (Windows/Linux);
- иконка предпросмотра в правом верхнем углу редактора.
Справа откроется панель. Меняйте код — превью обновится автоматически.

Чтобы показать другой компонент — переключитесь на его файл и снова вызовите Preview Component.

Что считается компонентом

Расширение ищет компонент в открытом файле так:

default-экспорт, если это функция/класс;
иначе — первый именованный экспорт-функция с заглавной буквы (export function Card() {}).

Если компонент принимает обязательные пропсы, он будет отрендерен без них — оберните его в файл-обёртку с дефолтными пропсами, если нужно.

Стили (Tailwind / global CSS)

Vite запускается с корнем вашего проекта, поэтому postcss.config.js и tailwind.config.js применяются автоматически к импортируемым стилям.

Если компонент сам не импортирует глобальные стили (типичный случай для App Router, где globals.css подключается в layout.tsx), укажите путь к ним в настройках:

// .vscode/settings.json
{
  "nextjsPreview.globalCssPath": "app/globals.css"
}

Настройки

Параметр	По умолчанию	Описание
`nextjsPreview.globalCssPath`	`""`	Путь к глобальному CSS (например, `app/globals.css`). Абсолютный или относительно корня проекта.
`nextjsPreview.port`	`0`	Порт встроенного Vite-сервера. `0` — выбрать свободный автоматически.
`nextjsPreview.previewBackground`	`#ffffff`	Цвет фона области превью.
`nextjsPreview.reuseEditorColumn`	`true`	Открывать панель в колонке справа от редактора.

Требования

VSCode ^1.85.0.
В проекте установлены react и react-dom (как в любом Next.js-проекте). Если их нет — расширение подставит свои встроенные версии React 18 как fallback.

Разработка

npm install      # установить зависимости
npm run compile  # собрать расширение (tsc -> out/)
npm run watch    # пересборка в фоне

Затем нажмите F5 в VSCode — откроется Extension Development Host с уже загруженным расширением. Откройте в нём любой Next.js-проект и вызовите Preview Component.

Архитектура

Файл	Роль
`src/extension.ts`	Точка входа, регистрация команды `nextjsPreview.preview`.
`src/PreviewPanel.ts`	Webview-панель: UI (тулбар + iframe + панель ошибок), `FileSystemWatcher`, обмен сообщениями.
`src/ComponentBuilder.ts`	Встроенный Vite dev-сервер, виртуальные модули (entry/target), моки и алиасы.
`src/nextMocks.ts`	Реализация моков Next.js-модулей (рендерятся в webview).

Превью устроено так: ComponentBuilder поднимает Vite dev-сервер с корнем вашего проекта и набором виртуальных модулей. Webview встраивает iframe, указывающий на этот сервер. Виртуальная точка входа импортирует текущий компонент, рендерит его в React и отправляет статус/ошибки наверх через postMessage. Hot reload работает за счёт Vite HMR.

Ограничения

Серверные возможности Next.js (Server Components с доступом к БД, fetch к внутренним API, серверные экшены) не исполняются — компонент рендерится как клиентский.
Данные из роутера/параметров моканы значениями по умолчанию.
iframe указывает на http://localhost встроенного сервера; этот порт доступен только локально.