Skip to main content

El editor basado en web de github.dev

Puedes usar el editor basado en web github.dev para editar archivos y confirmar los cambios.

Nota: El editor github.dev está actualmente en beta. Puede proporcionar comentarios en nuestros debates.

Acerca del editor github.dev

El editor github.dev ofrece una experiencia de edición ligera que se ejecuta íntegramente en el explorador. Con el editor github.dev, 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 editor github.dev está disponible de forma gratuita para todo el mundo en GitHub.com.

El editor github.dev 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. Consulte "Sincronización de la configuración" en la documentación de VS Code.

El editor github.dev 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 en GitHub para usar el editor github.dev.

Apertura del editor github.dev

Puedes abrir cualquier repositorio de GitHub en github.dev 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, selecciona el menú desplegable y haz clic en github.dev.

    Captura de pantalla del menú desplegable del icono de edición. La opción "github.dev" está resaltada con un contorno naranja oscuro.

Codespaces y github.dev

Tanto github.dev 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.

github.devGitHub Codespaces
CosteeLibre.Cuota mensual gratuita de uso para cuentas personales. Para información sobre los precios, consulta "Acerca de la facturación de GitHub Codespaces".
DisponibilidadDisponible para todos en GitHub.com.Disponible para todos en GitHub.com.
Iniciogithub.dev 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. Consulte "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. Consulte "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 github.dev 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 github.dev.

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.

Screenshot of the "Run and Debug" side bar with a message saying that this feature is not available, and a "Continue Working On" button.

Utilizar el control de código fuente

Cuando utilizas github.dev, todas las acciones se administran a través de la vista "Control de código fuente", que se encuentra en la barra de actividades de la izquierda. Para más información sobre la vista "Control de código fuente", consulta "Control de versiones" en la documentación de VS Code.

Como github.dev utiliza la extensión de repositorios de GitHub para alimentar su funcionalidad, puedes cambiar de rama sin necesidad de acumular cambios. Consulte "Repositorios de GitHub" 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.

    Captura de pantalla del nombre de la rama que se muestra en la barra de estado de VS Code.

  3. En el menú desplegable, haz clic en la rama a la que deseas cambiar o escribe el nombre de una rama nueva y haz clic en Crear nueva rama.

    Captura de pantalla de la lista desplegable para crear una rama en VS Code.
    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.

    Captura de pantalla de la barra de actividad de VS Code con el botón Control de código fuente etiquetada con un icono de rama, resaltado con un contorno naranja.

  2. Para agregar los cambios al "stage", haz clic en junto al archivo que has cambiado, o junto a Cambios si has cambiado varios archivos y quieres agregarlos todos.

    Captura de pantalla de la barra lateral "Control de código fuente" con el botón de almacenamiento provisional (un signo más), a la derecha de "Cambios", resaltado con un contorno naranja oscuro.

  3. En el cuadro de texto, teclea un mensaje de confirmación que describa el cambio que hiciste.

    Captura de pantalla de la barra lateral "Control de código fuente" con un mensaje de confirmación escrito en el cuadro de texto situado encima del botón "Confirmar".

  4. Haz clic en Commit & Push.

    Tus cambios se subirán automáticamente a tu rama de GitHub.

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

  1. Después de confirmar los cambios en la copia local del repositorio, haz clic en el icono de solicitud de incorporación de cambios situado en la parte superior de la barra lateral "Control de código fuente".

    Captura de pantalla de la parte superior de la barra lateral "Control de código fuente". El icono de solicitud de incorporación de cambios está resaltado con un contorno naranja oscuro.

  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.

    Captura de pantalla de la barra lateral "Solicitud de incorporación de cambios de GitHub" con un formulario para crear una solicitud de incorporación de cambios, incluidos los campos "Título" y "Descripción".

  3. Haga clic en Crear.

Trabajar con una solicitud de cambios existente

Puedes utilizar github.dev para trabajar con una solicitud de incorporación de cambios que ya existía.

  1. Busca la solicitud de incorporación de cambios que quieres abrir en github.dev.
  2. Presiona . para abrir la solicitud de incorporación de cambios en github.dev.
  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 editor github.dev 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 github.dev 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.

Uso de github.dev detrás de un firewall

Si estás trabajando detrás de un firewall, deberás agregar las siguientes direcciones URL a la lista de permitidos del firewall.

URLUso
https://*.vscode-cdn.netgithub.dev se ejecuta íntegramente en el explorador. Para ello, debe descargar los recursos de VS Code de los puntos de conexión en esta dirección URL.
https://update.code.visualstudio.comgithub.dev se ejecuta íntegramente en el explorador. Para ello, debe descargar los recursos de VS Code de los puntos de conexión en esta dirección URL.
https://api.github.comSe usa para recuperar archivos de origen de GitHub.
https://vscode-sync-insiders.trafficmanager.netOpcional. Para permitir que los ajustes se sincronicen a través de la sincronización de configuración.

Cada extensión instalada en github.dev se ejecuta en un rol de trabajo independiente. Esto agrega una capa de seguridad entre varias extensiones que se ejecutan en el mismo explorador. Como resultado, las direcciones URL de solicitud procedentes de extensiones son similares a las siguientes: https://v--151hfiju3s93ktt2rqh65902gukb27osot905m4g52k40kaea3h6.vscode-cdn.net.

Los datos se recuperan del repositorio en el entorno de ejecución mediante la extensión Repositorios de GitHub. Estos datos no se almacenan en el equipo local entre las sesiones github.dev, con la excepción del almacenamiento del explorador de archivos no guardados y archivos mostrados actualmente (para permitir recargas de página). Los únicos datos que no son repositorios almacenados localmente entre sesiones son algunas opciones de configuración de usuario y las credenciales enviadas por el flujo de autenticación de GitHub.

Solución de problemas

Si tienes problemas para abrir github.dev, 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 github.dev.

Limitaciones conocidas

  • Actualmente, el editor github.dev 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 github.dev según tu distribución local del teclado. En ese caso, puedes abrir cualquier repositorio de GitHub en github.dev cambiando la dirección URL de github.com a github.dev.
  • Al escribir de forma intensiva documentación o código en el editor web, es posible que encuentre problemas con la inserción de algunas confirmaciones. Para resolverlo, espere unos minutos para que se restablezca el límite de velocidad de API.