Uso de Qoder para desarrollar React

Qoder es una plataforma de programación con IA construida sobre el framework de código abierto de VSCode. En este capítulo, presentaremos el uso de Qoder para desarrollar React.

Qoder (/ˈkoʊdər/) es una plataforma de codificación agéntica orientada al desarrollo de software real. Al combinar la ingeniería de contexto mejorada con agentes inteligentes de manera fluida, comprende completamente tu base de código y avanza en las tareas de desarrollo de forma sistemática.

Qoder ofrece capacidades como generación inteligente de código, preguntas y respuestas inteligentes, modificación de múltiples archivos y agentes de programación. Piensa más profundamente, codifica de manera más eficiente y construye mejor, brindando a los desarrolladores una experiencia de codificación eficiente y fluida.

La versión personal de Qoder actualmente ofrece prueba gratuita a todos los usuarios.

1. Regístrate e instala Qoder

Visitamoshttps://qoder.com/Regístrate para obtener una cuenta de QoderWork (prueba gratuita de la versión Pro y 300 créditos de regalo):

Después del registro, haz clic en el botón de la esquina superior derecha:DescargarSegún el sistema de tu computadora, descarga el programa de instalación.

Después de la descarga, haz doble clic en el archivo para comenzar la instalación. Luego, haz doble clic en el ícono de Qoder IDE para iniciar Qoder.

Enlaces relacionados:

2. Inicia sesión en Qoder

En la esquina superior derecha de Qoder IDE, haz clic en el ícono de usuario o usa el atajo de teclado (⌘ ⇧ , (macOS) o Ctrl Shift , (Windows)), y luego selecciona Iniciar sesión.

Si aún no tienes una cuenta, puedes hacer clic en la parte inferior de la página web que se abre:Registrarse ahoraEnlace para registrar una cuenta, o usa tu cuenta de Google o GitHub para registrarte directamente.

Después de iniciar sesión correctamente, volverás a Qoder IDE y podrás usar todas las funciones libremente.

En cuanto a la interfaz, Qoder no se diferencia de VS Code en su funcionamiento. Como Qoder está basado en VSCode, quienes están familiarizados con VS Code lo usarán sin dificultad.

Abre tu proyecto de React

  1. Abre Qoder.

  2. Método 1: MenúArchivo → Abrir carpetay selecciona tu carpeta de proyecto (por ejemplomy-first-react-app）。

  3. Método 2 (recomendado): entra al directorio del proyecto en la terminal y luego ábrelo con un solo clic:

    cd my-first-react-app
qoder .

    qoder .El comando abrirá la carpeta actual directamente con Qoder.

Ahora verás el explorador de archivos a la izquierda, que muestra la estructura del proyecto (como src, public, etc.).

3. Inicia un nuevo chat

Abre el panel de conversación inteligente

Para iniciar una conversación de IA, inicia sesión en Qoder y luego cambia a la barra lateral secundaria en la esquina superior derecha.

O ábrelo con el atajo de teclado. En macOS, el atajo es⌘ Ly en Windows, el atajo esCtrl L。

Selecciona el modo:

  • Preguntas y respuestas inteligentes:Un modo simple de preguntas y respuestas para resolver problemas de programación. Ofrece soluciones y sugerencias basadas en el contexto, pero no modifica el código.
  • Agente inteligente:Un modo de ejecución autónoma de tareas de codificación que posee capacidades de autodecisión, percepción del entorno y uso de herramientas. Según las necesidades de codificación del desarrollador, puede completar tareas de codificación de extremo a extremo mediante herramientas como búsqueda en el proyecto, elaboración de planes, edición de archivos y operación de terminal. También admite herramientas MCP (Model Context Protocol) configurables por el desarrollador, lo que garantiza que el flujo de trabajo de codificación esté altamente alineado con el proceso de desarrollo personal.

A continuación, usamos elAgente inteligentemodo para que nos ayude a optimizar los estilos de todo el proyecto:

Optimizar el estilo de todo el proyecto

Luego Qoder realiza una serie de operaciones y comienza a modificar. Cuando termina, hacemos clic enAceptarbotón y listo:

Después, Qoder muestra el resultado completado:

Además, Qoder también tiene un modo Quest, que es la función de programación autónoma de Qoder. Permite que el agente complete tareas de desarrollo de extremo a extremo. Solo necesitamos describir el objetivo; Quest aclarará los requisitos, planificará la solución, ejecutará el código y verificará los resultados de forma autónoma, sin intervención humana continua.

Para usar el modo Quest, solo necesitas cambiar en la esquina superior izquierda:

4. Instala los complementos necesarios (Extensions)

Qoder también admite la instalación de complementos. Haz clic en el ícono de la barra de actividad izquierdaExtensions(cuatro cuadrados), o presiona el atajoCtrl+Shift+X（macOS: Cmd+Shift+X) para abrir el mercado de extensiones.

Busca e instala los siguientes complementos (haz clic en Install):

  • ESLint(Autor: Microsoft)

    • Revisa las normas de código en tiempo real. Recomendado oficialmente por React.
    • Después de la instalación, marcará los errores en rojo en el código.

  • Prettier - Code formatter(Autor: Prettier)

    • Formatea el código automáticamente para mantener un estilo uniforme.

  • ES7+ React/Redux/React-Native snippets(Autor: dsznajder)

    • ¡La herramienta definitiva para fragmentos de código! Introduce atajos para generar componentes rápidamente.
    • Fragmentos comunes:
      • rafce→ Genera un componente de función de flecha + export default
      • rfc→ Genera un componente de función
      • useState→ Genera useState rápidamente

  • Path Intellisense(Autor: Christian Kohler)

    • Autocompleta la ruta de importación (muy útil al usar import).

  • Bracket Pair Colorizer 2O coloreado de corchetes integrado

    • Los corchetes se distinguen por colores, lo que facilita la lectura de JSX anidado.

  • GitLens(Opcional, pero muy recomendado)

    • Mejora de Git para ver el historial de commits del código.

Recomendaciones específicas para React(Opcional, avanzado):

  • Tailwind CSS IntelliSense(Si usas Tailwind)
  • React Developer Tools(El complemento del navegador ya está instalado, aquí no se necesita)

Después de la instalación, reinicia Qoder (o presionaCtrl+Shift+P → Reload Window）。

Otras extensiones