Разработка React с Qoder

Qoder — это платформа для программирования с ИИ, построенная на открытом фреймворке VSCode. В этой главе мы расскажем о разработке React с Qoder.

Qoder (/ˈkoʊdər/) — это агентная платформа для программирования для разработки реального программного обеспечения. Благодаря бесшовному объединению усовершенствованной инженерии контекста с интеллектуальными агентами она полностью понимает вашу кодовую базу и систематически продвигает задачи разработки.

Qoder предоставляет такие возможности, как интеллектуальная генерация кода, интеллектуальные вопросы и ответы, модификация нескольких файлов и агенты для программирования, позволяя глубже мыслить, эффективнее писать код и лучше выполнять сборку, обеспечивая разработчикам эффективный и плавный процесс программирования.

Qoder Personal Edition в настоящее время доступна для бесплатного пробного использования всем пользователям.

1. Регистрация и установка Qoder

Мы переходимhttps://qoder.com/Регистрируем аккаунт QoderWork (бесплатная пробная версия Pro и получение 300 кредитов):

После регистрации нажмите в правом верхнем углуDownloadкнопку. В соответствии с вашей компьютерной системой скачайте установщик.

После загрузки дважды щёлкните файл, чтобы начать установку, затем дважды щёлкните значок Qoder IDE, чтобы запустить Qoder.

Связанные ссылки:

2. Вход в Qoder

В правом верхнем углу Qoder IDE нажмите значок пользователя или используйте сочетание клавиш (⌘ ⇧ , (macOS) или Ctrl Shift , (Windows)), затем выберите «Войти».

Если у вас еще нет учетной записи, на открывшейся странице нажмите нижнюю ссылкуЗарегистрироваться сейчас, чтобы зарегистрировать учетную запись, или используйте аккаунт Google или GitHub для прямой регистрации.

После успешного входа вы вернетесь в Qoder IDE, и затем мы сможем свободно использовать все функции.

Если посмотреть на общий интерфейс, Qoder работает в основном так же, как VS Code. Поскольку Qoder создан на основе VSCode, те, кто знаком с VS Code, будут чувствовать себя как дома.

Откройте свой проект React

  1. Откройте Qoder.

  2. Способ 1: МенюFile → Open Folder, выберите папку вашего проекта (например,my-first-react-app）。

  3. Способ 2 (рекомендуется): В терминале перейдите в каталог проекта, затем откройте одним щелчком:

    cd my-first-react-app
qoder .

    qoder .Команда напрямую откроет текущую папку с помощью Qoder.

Теперь вы видите проводник файлов слева, отображающий структуру проекта (например, src, public и т. д.).

3. Начните новый чат

Откройте панель интеллектуального диалога

Чтобы начать диалог с ИИ, войдите в Qoder, затем переключите вторичную боковую панель в правом верхнем углу.

Или откройте её с помощью сочетания клавиш. Сочетание клавиш в macOS —⌘ L, а в Windows —Ctrl L。

Выберите режим:

  • Smart Q&A:Простой режим вопросов и ответов, предназначенный для ответов на вопросы по программированию. Он предоставляет решения и рекомендации на основе контекста, но не изменяет код.
  • Agent:Автономный режим выполнения задач программирования с возможностями самостоятельного принятия решений, понимания окружения и использования инструментов. Исходя из потребностей разработчика в программировании, он может выполнять задачи программирования от начала до конца с помощью таких инструментов, как поиск по проекту, планирование, редактирование файлов и операции в терминале. Он также поддерживает настраиваемые разработчиком инструменты MCP (Model Context Protocol), что обеспечивает высокое соответствие рабочего процесса программирования личным процессам разработки.

Далее мы используем режимAgent, чтобы он помог нам оптимизировать стили всего проекта:

Optimize the styling of the entire project

Затем Qoder приступает к работе и начинает вносить изменения. Когда он закончит, мы нажимаем кнопкуAccept:

После этого Qoder отображает готовый результат:

Кроме того, в Qoder есть режим Quest — это функция автономного программирования Qoder. Quest позволяет Agent выполнять задачи разработки от начала до конца. Нам нужно только описать цель, и Quest самостоятельно уточнит требования, спланирует решения, выполнит код и проверит результаты — без постоянного ручного вмешательства.

Чтобы использовать режим Quest, просто переключите его в левом верхнем углу:

4. Установите необходимые плагины (Extensions)

Qoder также поддерживает установку плагинов. Нажмите на значокРасширения(четыре квадрата) на левой панели активности или нажмите сочетание клавишCtrl+Shift+X（macOS: Cmd+Shift+X), чтобы открыть магазин расширений.

Найдите и установите следующие плагины (нажмите «Установить»):

  • ESLint(Автор: Microsoft)

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

  • Prettier - Code formatter(Автор: Prettier)

    • Автоматически форматирует код для поддержания единообразного стиля.

  • ES7+ React/Redux/React-Native snippets(Автор: dsznajder)

    • Мощный инструмент для сниппетов кода! Вводите сокращения, чтобы быстро создавать компоненты.
    • Общие сниппеты:
      • rafceСгенерировать компонент в виде стрелочной функции + export default
      • rfcСгенерировать функциональный компонент
      • useStateБыстро сгенерировать useState

  • Path Intellisense(Автор: Christian Kohler)

    • Автодополнение пути импорта (очень полезно при импорте).

  • Bracket Pair Colorizer 2Или встроенная раскраска скобок

    • Скобки подсвечиваются разными цветами для более удобного чтения вложенного JSX.

  • GitLens(Необязательно, но настоятельно рекомендуется)

    • Расширение возможностей Git, просмотр истории коммитов.

Рекомендации для React(Необязательно, для продвинутых):

  • Tailwind CSS IntelliSense(Если используете Tailwind)
  • React Developer Tools(Плагин для браузера уже установлен, здесь не нужен)

После установки перезапустите Qoder (или нажмитеCtrl+Shift+P → Reload Window）。

Другие расширения