Skip to main content

El editor basado en web de github.dev

Utiliza el web-based editor github.dev desde tu repositorio o solicitud de incorporación de cambios para crear y confirmar (“commit”) cambios.

Nota: El web-based editor github.dev se encuentra actualmente en versión preliminar beta. Puede proporcionar comentarios en nuestros debates.

Acerca del web-based editor

El web-based editor ofrece una experiencia de edición ligera que se ejecuta íntegramente en el explorador. Con el web-based editor, puedes navegar por los archivos y repositorios de código abierto de GitHub y hacer y confirmar cambios en el código. Puedes abrir cualquier repositorio, bifurcación o solicitud de cambios en el editor.

El web-based editor está disponible de forma gratuita para todo el mundo en GitHub.com.

El web-based editor proporciona muchas de las ventajas de Visual Studio Code, como las búsquedas, el resaltado de la sintaxis y la vista del control de código fuente. También puedes utilizar la sincronización de la configuración para compartir tus propios valores de configuración de VS Code con el editor. Para obtener más información, consulta "Sincronización de la configuración" en la documentación de VS Code.

El web-based editor se ejecuta íntegramente en el espacio aislado de tu explorador. El editor no clona el repositorio, sino que usa la extensión GitHub Repositories para llevar a cabo la mayor parte de la funcionalidad que usará. Tu trabajo se guarda en el almacenamiento local de tu buscador hasta que lo confirmes. Debes confirmar tus cambios frecuentemente para asegurarte de que siempre sean accesibles.

Debes haber iniciado sesión para usar el editor basado en web.

Apertura del web-based editor

Puedes abrir cualquier repositorio de GitHub en el web-based editor de las siguientes formas:

  • Para abrir el repositorio en la misma pestaña del explorador, presiona . mientras buscas cualquier repositorio o solicitud de incorporación de cambios en GitHub.

    Para abrir el repositorio en una pestaña nueva del explorador, presiona >.

  • Cambiando la URL de "github.com" a "github.dev".

  • Al ver un archivo, usa el menú desplegable situado junto a y selecciona Abrir en github.dev.

    Menú desplegable del botón Editar archivo

Codespaces y el web-based editor

Tanto el web-based editor como GitHub Codespaces te permiten editar el código directamente desde tu repositorio. Sin embargo, ambos tienen beneficios ligeramente diferentes, dependiendo de tu caso de uso.

web-based editorGitHub Codespaces
CosteeLibre.Cuota mensual gratuita de uso para cuentas personales. Para obtener información sobre precios, consulta "Acerca de la facturación de GitHub Codespaces".
DisponibilidadDisponible para todos en GitHub.com.Disponible para todos en GitHub.com.
InicioEl web-based editor se abre instantáneamente al presionar una tecla y puedes comenzar a usarlo de inmediato sin tener que esperar configuraciones o instalaciones adicionales.Al crear o reanudar un codespace, se le asigna una máquina virtual y el contenedor se configura en función del contenido de un archivo devcontainer.json. Esta configuración puede tomar algunos minutos para crear el ambiente. Para obtener más información, consulta "Creación de un codespace para un repositorio".
ProcesoNo hay cálculos asociados, así que no podrás compilar y ejecutar tu código ni utilizar la terminal integrada.Con GitHub Codespaces, obtienes el poder de una VM dedicada en la que ejecutas y depuras tu aplicación.
Acceso al terminalNinguno.GitHub Codespaces proporciona un conjunto común de herramientas de manera predeterminada, lo que significa que puedes utilizar el terminal como lo harías en tu entorno local.
ExtensionesSolo un subconjunto de extensiones que pueden ejecutarse en la web aparecerá en la Vista de Extensiones y podrá instalarse. Para más información, vea "Uso de extensiones".Con GitHub Codespaces, puedes usar la mayoría de extensiones de Visual Studio Code Marketplace.

Continuación del trabajo en Codespaces

Puedes iniciar el flujo de trabajo en el web-based editor y seguir trabajando en un codespace. Si intentas acceder a la vista de ejecución y depuración o al terminal, se te dirá que no están disponibles en el web-based editor.

Para continuar el trabajo en un codespace, haga clic en Continuar trabajando en... y seleccione Crear codespace para crear un codespace en la rama actual. Antes de que elijas esta opción, debes confirmar cualquier cambio.

Captura de pantalla en la que se muestra el botón "Continuar trabajando en" en la interfaz de usuario

Utilizar el control de código fuente

Cuando utilizas el web-based editor, todas las acciones se administran a través de la vista de control de código fuente, que está en la barra de actividades de la izquierda. Para obtener más información sobre la vista Control de código fuente, consulta "Control de versiones" en la documentación de VS Code.

Ya que el editor basado en web utiliza la extensión de repositorios de GitHub para alimentar su funcionalidad, puedes cambiar de rama sin necesidad de acumular cambios. Para obtener más información, consulta "GitHub Repositories" en la documentación de VS Code.

Creación de una rama

  1. Si la rama actual no se muestra en la barra de estado, en la parte inferior de tu codespace, haga clic derecho en la barra de estado y seleccione Source control (Control de código fuente).
  2. Haz clic en el nombre de rama en la barra de estado. La rama en la barra de estado
  3. En el menú desplegable, haga clic en la rama a la que quiera cambiar o indique el nombre de una rama nueva y haga clic en Create nre branch (Crear rama). Elección en el menú de la rama Los cambios sin confirmar que haya realizado en la rama anterior estarán disponibles en la nueva.

Confirmación de los cambios

  1. En la barra de actividad, haga clic en la vista Control de código fuente. Vista de control de código fuente
  2. Para agregar los cambios al "stage", haga clic en + junto al archivo que ha cambiado, o junto a Cambios si ha cambiado varios archivos y quiere agregarlos todos. Barra lateral de control de código fuente con el botón de almacenamiento provisional resaltado
  3. Teclea un mensaje de confirmación que describa el cambio que hiciste. Barra de control de código fuente con un mensaje de confirmación
  4. Para confirmar tus cambios planeados, haz clic en la marca de verificación en la parte superior de la barra lateral del control de código fuente. Clic en el icono de marca de verificación
  5. Una vez que hayas confirmado tus cambios, estos se subirán automáticamente a tu rama de GitHub.

Creación de una solicitud de incorporación de cambios

  1. Después de haber confirmado los cambios en la copia local del repositorio, haga clic en el icono Create Pull Request. Barra lateral de control de código fuente con el botón de almacenamiento provisional resaltado
  2. Verifica que el repositorio y la rama local desde la que estás haciendo la fusión y la rama y repositorio remotos hacia los que estés haciendo la fusión sean correctos. Después, asigna un nombre y descripción a la solicitud de cambios. Barra lateral de control de código fuente con el botón de almacenamiento provisional resaltado
  3. Haga clic en Crear.

Trabajar con una solicitud de cambios existente

Puedes utilizar el web-based editor para trabajar con una solicitud de incorporación de cambios (“pull request”) que ya existía.

  1. Busca la solicitud de incorporación de cambios que quieres abrir en el web-based editor.
  2. Presiona . para abrir la solicitud de incorporación de cambios en el web-based editor.
  3. Una vez que haya realizado los cambios, confírmelos siguiendo los pasos descritos en Confirmación de los cambios. Tus cambios se confirmarán directamente en la rama, no es necesario subirlos.

Uso de extensiones

El web-based editor admite las extensiones de VS Code que se han creado o actualizado específicamente para ejecutarse en la Web. A estas extensiones se les conoce como "extensiones web". Para obtener información sobre cómo puedes crear una extensión web o actualizar la extensión existente a fin de que funcione para la web, consulta "Extensiones web" en la documentación de VS Code.

Las extensiones que pueden ejecutarse en el web-based editor aparecen en la vista de extensiones y pueden instalarse. Si utilizas la sincronización de ajustes, cualquier extensión compatible también se instala automáticamente. Para obtener información, consulta "Sincronización de la configuración" en la documentación de VS Code.

Solución de problemas

Si tienes problemas para abrir el web-based editor, intenta lo siguiente:

  • Asegúrate de estar firmado en GitHub.
  • Inhabilita cualquier bloqueador de anuncios.
  • Utiliza una ventana del explorador que no esté en modo de incógnito para abrir el web-based editor.

Limitaciones conocidas

  • Actualmente, el web-based editor es compatible con Chrome (y otros exploradores basados en Chromium), Edge, Firefox y Safari. Te recomendamos que utilices las últimas versiones de estos buscadores.
  • Es posible que algunos enlaces de teclas no funcionen, dependiendo del buscador que estás utilizando. Estas limitaciones de enlace de claves se documentan en la sección "Limitaciones y adaptaciones conocidas" de la documentación de VS Code.
  • Es posible que . no funcione para abrir el web-based editor según tu distribución local del teclado. En ese caso, puedes abrir cualquier repositorio de GitHub en el web-based editor cambiando la dirección URL de github.com a github.dev.