VS Code

Расширение Text.js для VS Code показывает кадр консоли рядом с кодом. Оно зеркалирует приложение, запущенное через text dev, или само рендерит открытый файл, если ничего не запущено. Оно также добавляет создание заготовок App Router, сниппеты и ссылки для кодов ошибок TX###.

#Установка

Установите Text.js из Visual Studio Marketplace. В VS Code откройте раздел «Расширения» (⌘⇧X) и найдите textjs.vscode-textjs или выполните:

code --install-extension textjs.vscode-textjs

Расширение активируется в любой папке с приложением Text.js: файлом text.config.ts или пакетом, который зависит от @textjs/app и содержит каталог app/. Монорепозитории с несколькими приложениями тоже поддерживаются.

#Предпросмотр в реальном времени

Откройте page.tsx, layout.tsx или компонент и выполните Text.js: Open Preview (⌘K V) либо нажмите кнопку предпросмотра в строке заголовка редактора. Панель рисует кадр с тем же оформлением DevTools и ячейками со шрифтом Menlo, что и консоль браузера.

Предпросмотр получает кадры из одного из двух источников. Значок на панели инструментов показывает активный источник:

auto (по умолчанию) использует Live, когда это возможно, и Headless в остальных случаях. Закрепите любой из режимов через значок или настройку textjs.preview.mode.

#Клавиатура

Щёлкните по консоли, чтобы направить ввод с клавиатуры в приложение: стрелки, Tab, сочетания клавиш, ввод текста и вставка работают как в браузере. Щёлкните за пределами консоли, чтобы остановить передачу ввода. Сочетания клавиш редактора, такие как ⌘P и ⌘⇧P, по-прежнему обрабатывает VS Code. Прокрутка над консолью отправляет события колеса мыши.

В адресном поле можно ввести маршрут, например /deployments/dpl_a1, для перехода в любом из источников.

#Режим Live

Пока предпросмотр открыт, сервер разработки запрашивает поток кадров у подключённых вкладок. Вкладки отправляют только изменённые строки и прекращают отправку при закрытии предпросмотра, поэтому приложение без открытого предпросмотра не несёт дополнительных затрат. Сохранение файла проходит через Fast Refresh, и предпросмотр обновляется вместе с вкладкой.

Включите Follow (textjs.preview.followEditor), чтобы вкладка браузера переходила на маршрут файла page.tsx, который вы редактируете.

Фоновые вкладки не получают кадров анимации, поэтому обычно сохраняют текущий кадр, пока снова не станут видимыми. Пока предпросмотр следит за вкладкой, фоновая вкладка рисует кадр сразу после поступления ввода, поэтому ввод текста в предпросмотре по-прежнему вызывает обновление. Анимации в фоновой вкладке обновляются примерно раз в секунду. Поместите приложение в отдельное окно, чтобы сохранить их плавность.

#Режим Headless

Расширение запускает небольшую программу в вашем проекте. Она загружает файлы маршрутов через Vite и @textjs/app самого проекта, поэтому псевдонимы, TypeScript и JSX работают так же, как в text dev. Она монтирует App Router на маршруте открытого файла вместе с его макетами, используя историю в памяти:

Вызовы fetch("/api/...") к тому же источнику выполняют обработчики route.ts внутри процесса, как при text run. Сетка подстраивается под размер панели, а сохранение любого файла приложения запускает повторный рендеринг. Ошибки показываются над кадром со ссылками на соответствующие страницы TX###.

#Команды

Команды создания заготовок доступны и в контекстном меню папок в проводнике. Они принимают сегменты App Router, такие как settings, blog/[slug], docs/[...path] и (marketing)/about, и не позволяют разместить page и route.ts в одном сегменте. В проектах JavaScript (без tsconfig.json) создаются файлы .jsx и .js.

#Сниппеты

#Коды ошибок

Наведите указатель на код TX### в любом месте: в исходном коде, журналах, панели «Выходные данные» или вставленной трассировке стека. Подсказка показывает его заголовок, сообщение и пакет со ссылкой на его страницу на textjs.org. Каждый код также служит ссылкой (щелчок с ⌘).

#Строка состояния

Элемент ▼ показывает состояние сервера разработки и размер сетки консоли, например ▼ :3000 120×36. Вкладки сообщают серверу разработки свой размер при каждом изменении, даже если предпросмотр не открыт. Щёлкните по элементу, чтобы открыть основные команды.

#Настройки

#Доверие к рабочей области

Предпросмотр и сервер разработки выполняют код вашего проекта (его конфигурацию Vite, text.config.* и компоненты). В ограниченном режиме расширение предлагает только сниппеты, создание заготовок и ссылки на ошибки, а настройки рабочей области textjs.preview.runtime, textjs.devServer.command и textjs.devServer.url игнорирует. Укажите, что доверяете рабочей области, чтобы включить предпросмотр. Файлы за пределами папок рабочей области никогда не открываются в предпросмотре.

#Принцип работы

text dev предоставляет три эндпоинта для редакторов. Они отвечают только на loopback-соединения, адресованные loopback-хосту (localhost, 127.0.0.1, [::1]), и только на запросы без Origin или с источником самого сервера разработки. Межсайтовые запросы браузеров и запросы no-cors отклоняются:

Вкладки отправляют кадры серверу разработки через HMR-сокет Vite, который требует отдельный токен для каждого сервера. Формат передачи экспортируется из @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage), если вы хотите создать собственное средство просмотра. Ничего из этого нет в результате text build.