{"meta":{"title":"Uso de VS Code para web desde GitHub","intro":"Puede abrir un repositorio o una solicitud VS Code for the Web de incorporación de cambios directamente desde GitHub para examinar el código, editar archivos y confirmar los cambios.","product":"Codespaces","breadcrumbs":[{"href":"/es/codespaces","title":"Codespaces"},{"href":"/es/codespaces/the-githubdev-web-based-editor","title":"VS Code for the Web"}],"documentType":"article"},"body":"# Uso de VS Code para web desde GitHub\n\nPuede abrir un repositorio o una solicitud VS Code for the Web de incorporación de cambios directamente desde GitHub para examinar el código, editar archivos y confirmar los cambios.\n\n> \\[!NOTE] Al abrir un repositorio en `github.dev`, se abre en VS Code for the Web, la versión para navegador de VS Code. Para obtener más información, consulte [VS Code for the Web](https://code.visualstudio.com/docs/remote/vscode-web) la VS Code documentación.\n\n## Acerca de VS Code for the Web\n\nVS Code for the Web es una experiencia de edición ligera que se ejecuta completamente en el explorador. Con VS Code for the Web, puede navegar por archivos y repositorios de código fuente desde GitHuby realizar y confirmar cambios en el código. Puedes abrir cualquier repositorio, fork o pull request en el editor.\n\nVS Code for the Web está disponible para todos los usuarios de forma gratuita en GitHub.com.\n\nVS Code for the Web proporciona muchas de las ventajas de Visual Studio Code, como la búsqueda, el resaltado de sintaxis y una vista de control de código fuente. También puede usar Settings Sync para compartir sus propios ajustes de VS Code en el editor. Consulte [Sincronización de configuración](https://code.visualstudio.com/docs/editor/settings-sync) en la VS Code documentación.\n\nVS Code for the Web se ejecuta por completo en el entorno aislado de tu navegador. El editor no clona el repositorio, sino que usa la extensión [GitHub Repositorios](https://code.visualstudio.com/docs/editor/github#_github-repositories-extension) 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.\n\nDebe iniciar sesión en GitHub para usar VS Code for the Web.\n\n## Abriendo VS Code for the Web desde GitHub\n\nPuede abrir en GitHub cualquier repositorio de VS Code for the Web de cualquiera de las siguientes formas:\n\n* Para abrir el repositorio en la misma pestaña del explorador, presiona <kbd>.</kbd> al examinar cualquier repositorio o solicitud de incorporación de cambios en GitHub.\n\n  Para abrir el repositorio en una pestaña nueva del explorador, presiona <kbd>></kbd>.\n\n* Cambiando la URL de \"github.com\" a \"github.dev\".\n\n* Al ver un archivo, seleccione el <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-triangle-down\" aria-label=\"More edit options\" role=\"img\"><path d=\"m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z\"></path></svg> menú desplegable y haga clic **en github.dev**.\n\n  ![Captura de pantalla del menú desplegable del icono de edición. La opción \"github.dev\" está resaltada con un contorno naranja oscuro.](/assets/images/help/codespaces/github-dev-dropdown-option.png)\n\n## Codespaces y VS Code for the Web\n\nTanto VS Code for the Web como GitHub Codespaces permiten editar el código directamente desde el repositorio. Sin embargo, ambos tienen beneficios ligeramente diferentes, dependiendo de tu caso de uso.\n\n<div class=\"ghd-tool rowheaders\">\n\n|                  | VS Code for the Web                                                                                                                                                            | GitHub Codespaces                                                                                                                                                                                                                                                                                                                                                           |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Costo**        | Libre.                                                                                                                                                                         | Cuota mensual gratuita de uso para cuentas personales, consulta [facturación de GitHub Codespaces](/es/billing/concepts/product-billing/github-codespaces#free-and-billed-use-by-personal-accounts).                                                                                                                                                                        |\n| **Availability** | Disponible para todos los usuarios de GitHub.com.                                                                                                                              | Disponible para todos los usuarios de GitHub.com.                                                                                                                                                                                                                                                                                                                           |\n| **Inicio**       | VS Code for the Web se abre al instante con una tecla presionada y puede empezar a usarlo inmediatamente, sin tener que esperar a una configuración o instalación 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. Consulta [Creación de un codespace para un repositorio](/es/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository). |\n| **Proceso**      | No hay ningún proceso asociado, por lo que no podrá compilar y ejecutar el código ni usar un terminal integrado.                                                               | Con GitHub Codespaces, obtiene la eficacia de una máquina virtual dedicada en la que puede ejecutar y depurar la aplicación, y puede usar el terminal exactamente como lo haría en el entorno local.                                                                                                                                                                        |\n| **Extensiones**  | Solo aparecerá un subconjunto de extensiones que se pueden ejecutar en la web en la vista Extensiones y se puede instalar. Consulta [Uso de extensiones](#using-extensions).   | Con GitHub Codespaces, puede usar la mayoría de las extensiones del Visual Studio Code Marketplace.                                                                                                                                                                                                                                                                         |\n\n</div>\n\n## Utilizar el control de código fuente\n\nCuando se usa VS Code for the Web, todas las acciones se administran a través de la vista \"Control de código fuente\", que se encuentra en la barra de actividad del lado izquierdo. Para obtener más información sobre la vista \"Control de versiones\", consulte [Control de versiones](https://code.visualstudio.com/docs/editor/versioncontrol) en la documentación de VS Code.\n\nDado que VS Code for the Web usa la extensión repositorios de GitHub para impulsar su funcionalidad, puede cambiar las ramas sin necesidad de guardar los cambios. Consulte [Repositorios de GitHub](https://code.visualstudio.com/docs/editor/github#_github-repositories-extension) en la VS Code documentación.\n\n### Creación de una rama\n\n1. 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).\n\n2. Haz clic en el nombre de rama en la barra de estado.\n\n   ![Captura de pantalla del nombre de la rama que se muestra en la barra de estado de VS Code.](/assets/images/help/codespaces/branch-in-status-bar.png)\n\n3. 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**.\n\n   ![Captura de pantalla de la lista desplegable para crear una rama en VS Code.](/assets/images/help/codespaces/create-new-branch.png)\n   Los cambios no confirmados realizados en la rama anterior estarán disponibles en la nueva rama.\n\n### Confirmación de los cambios\n\n1. En la barra de actividad, haga clic en la vista **Control de código fuente**.\n\n   ![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.](/assets/images/help/codespaces/githubdotdev-source-control-activity-bar-button.png)\n\n2. Para almacenar provisionalmente los cambios, haga clic <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-plus\" aria-label=\"Stage changes\" role=\"img\"><path d=\"M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z\"></path></svg> junto al archivo que ha cambiado o junto a **Cambios** si ha cambiado varios archivos y desea almacenarlos provisionalmente.\n\n   ![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.](/assets/images/help/codespaces/githubdotdev-codespaces-commit-stage.png)\n\n3. En el cuadro de texto, teclea un mensaje de confirmación que describa el cambio que hiciste.\n\n   ![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\".](/assets/images/help/codespaces/githubdotdev-codespaces-commit-message.png)\n\n4. Haz clic en **Commit & Push**.\n\n   Tus cambios se enviarán automáticamente a tu rama en GitHub.\n\n### Crea una solicitud de incorporación de cambios\n\n1. 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\".\n\n   ![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.](/assets/images/help/codespaces/codespaces-commit-pr-button.png)\n\n2. 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.\n\n   ![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\".](/assets/images/help/codespaces/codespaces-commit-pr.png)\n\n3. Haga clic en **Crear**.\n\n### Trabajar con un pull request existente\n\nPuede usar VS Code for the Web para trabajar con una solicitud de incorporación de cambios existente.\n\n1. Vaya a la solicitud de incorporación de cambios que desea abrir en VS Code for the Web.\n2. Presione `.` para abrir la solicitud de incorporación de cambios en VS Code for the Web.\n3. Una vez que haya realizado los cambios, confírmelos siguiendo los pasos descritos en [Confirmación de los cambios](#commit-your-changes). Tus cambios se confirmarán directamente en la rama, no es necesario subirlos.\n\n## Uso de extensiones\n\nVS Code for the Web admite VS Code extensiones 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 puede crear una extensión web o actualizar la extensión existente para que funcione para la web, consulte [Extensiones web](https://code.visualstudio.com/api/extension-guides/web-extensions) en la VS Code documentación.\n\nLas extensiones que pueden ejecutarse en VS Code for the Web aparecerán en la vista Extensiones y se pueden instalar. Si utilizas la sincronización de ajustes, cualquier extensión compatible también se instala automáticamente. Para obtener información, consulte [Configuración sincronizada](https://code.visualstudio.com/docs/editor/settings-sync) en la VS Code documentación."}