¿Cómo Programar con Visual Studio Code desde el Navegador?

A partir de ahora, si visitas VSCode.dev, vas a encontrar una versión ligera de Visual Studio Code que se ejecuta completamente en el navegador. Abre una carpeta en su máquina local y comienza a programar.

Esta nueva metodología de poder utilizar Visual Studio Code no requiere instalación ninguna instalación.

Visual Studio Code finalmente llega al navegador y ahora es totalmente utilizable desde tu navegador web favorito. Con la activación de vscode.dev llega una herramienta de desarrollo que puede ejecutarse completamente sin servidor en un navegador.

Bien, ¿Qué podemos hacer con Visual Studio Code en la Web?

? COMIENZA A UTILIZAR VISUAL STUDIO CODE EN EL NAVEGADOR

? Si quieres conocer los mejores editores para programar / Editores Programar Python / Editores Programar Java / Editores Programar PHP

Desarrollo local con herramientas en la nube

Los navegadores modernos que admiten la API de acceso al sistema de archivos (chrome y Edge en la actualidad) permiten que las páginas web accedan al sistema de archivos local (previo permiso).

Esta sencilla puerta de enlace a la máquina local abre rápidamente algunos escenarios interesantes para usar Visual Studio Code en la Web como una herramienta de desarrollo local de instalación cero, como:

  • Visualizar y editar archivos en local.
  • Tomar notas rápidamente (¡y obtén una vista previa!) en Markdown. Incluso si te encuentras en una máquina restringida donde no se puede instalar el software de Visual Studio Code, es posible que puedas usar vscode.dev para ver y editar archivos locales.
  • Crear aplicaciones HTML, JavaScript y CSS del lado del cliente junto con las herramientas del navegador para la depuración.
  • Editar código en máquinas de menor potencia como Chromebooks, donde no se puede instalar Visual Studio Code con facilidad.
  • Desarrollar en iPad: Vas a poder cargar/descargar archivos (e incluso almacenarlos en la nube usando la aplicación Archivos) y también abrir repositorios de forma remota con la extensión incorporada de repositorios de GitHub.

Si tu navegador no es compatible con las API del sistema de archivos local, aún vas a poder abrir archivos individuales cargándolos y descargándolos a través del navegador.

Una experiencia de desarrollo más fresca

Dado que Visual Studio Code para la Web se ejecuta completamente dentro del navegador, algunas experiencias serán más limitadas, en comparación con lo que se puede hacer en la aplicación de escritorio.

Por ejemplo, el terminal y el depurador no estarán disponibles, lo que tiene sentido ya que no se puede compilar, ejecutar y depurar una aplicación Rust o Go dentro de la zona de pruebas del navegador (aunque las tecnologías emergentes como Pyodide y los contenedores web pueden cambiar esto algún día).

Un poco más matizadas que en el escritorio son las experiencias de edición y la navegación entre el código; generalmente funcionan con servicios de lenguajes y compiladores que esperan un sistema de archivos, tiempo de ejecución y entorno informático.

En el navegador, estas experiencias están impulsadas por servicios de idiomas que se ejecutan completamente en el navegador (sin sistema de archivos y sin tiempos de ejecución) que proporcionan la tokenización de código fuente, el color de la de sintaxis y mucho más.

Como resultado, cuando estás en el navegador, las experiencias que se han logrado conseguir para Visual Studio Code son:

Para la mayoría de los lenguajes de programación, vscode.dev brinda la sintaxis de colores en el código, las terminaciones basadas en texto y el color por pares. Usando un árbol de sintaxis de Tree-sitter.

Se han podido agregar experiencias adicionales [proporcionar experiencias adicionales como Esquema / Ir a símbolo y la Búsqueda de símbolo para lenguajes populares como C / C ++, C #, Java, PHP, Rust y Go.

Las experiencias de TypeScript, JavaScript y Python funcionan con servicios de lenguaje que se ejecutan de forma nativa en el navegador. Con esos lenguajes de programación, vas a obtener muy buenas experiencia, con resaltado semántico, indicación de errores de sintaxis y más.

Para muchos lenguajes “webby” como JSON, HTML, CSS, LESS o Markdown, la experiencia de codificación en Visual Studio Code es casi idéntica a la del escritorio (¡Incluida la vista previa de Markdown!).

Extensiones

La mayoría de las extensiones de personalización de la interfaz de usuario, como temas, mapas de teclas y fragmentos de código, funcionan en Visual Studio Code Dev Online e incluso se puede habilitar la itinerancia entre el navegador, el escritorio y los espacios de código de GitHub a través de la sincronización de configuración.

Las extensiones que ejecutan código Node y usan módulos específicos del sistema operativo o que se envían a ejecutables locales, aún se muestran en los resultados de búsqueda, pero están claramente marcadas como no disponibles.

Dicho esto, hay un número creciente de extensiones que se han actualizado para funcionar en el navegador y cada día irán apareciendo más.

Nota: Si eres un autor de extensión y deseas que tu extensión esté disponible en el navegador. Consulta la siguiente guía de creación de extensiones web para Visual Studio Code.

Por ejemplo, la extensión Luna Paint: Editor de Imágenes te permite editar imágenes rasterizadas directamente en Visual Studio Code.

Luna Paint incluye herramientas de diseño enriquecidas (como herramientas de capas) a Visual Studio Code y por supuesto, puedes guardar las imágenes resultantes dentro de tu su disco local.

La extensión de GitHub Issue Notebooks te permite agregar Blocs de Notas a GitHub Issues. Así, se pueden intercalar consultas, resultados e incluso Markdown que describe el propósito de las consultas desde un único editor.

? COMIENZA A UTILIZAR VISUAL STUDIO CODE ONLINE


Artículos Relacionados

Relacionado

Visualiza estructuras de datos en Visual Studio Code

VSCode Debug Visualizer es una extensión de VSCode que te permite visualizar estructuras de datos en tu editor. Esto puede resultar útil para visualizar los valores observados durante la depuración, y también puede ser útil para visualizar diagramas, tablas, matrices, histogramas y árboles. Una vez instalada la extensión, tendrás que abrir algunos scripts relevantes, luego navegar hasta la paleta de comandos e ir a Debug Visualizer: ¡SEGUIR LEYENDO!

Visual Studio Code actualización de Octubre 2021 (Versión 1.62)

Visual Studio Code para la Web, a partir de ahora vas a poder editror desde la URL vscode.dev. Con Visual Studio Web se proporciona una experiencia de instalación cero que se ejecuta completamente en el navegador, lo que le permite navegar de forma rápida y segura en los repositorios de código fuente y realizar cambios ligeros en el código. VS Code para la Web tiene muchas ¡SEGUIR LEYENDO!

Visual Studio Code 1.47: Ahora se desarrolla en Typescript y los nuevos cambios más importantes

Visual Studio Code lanza una nueva versión. En concreto, la versión 1.47, los cambios más destacados implementados son los siguientes: Mejoras de accesibilidad : Nuevas capacidades en el lector de pantalla. Compilaciones de Windows ARM : La versión para Windows ARM ahora está disponible en modo estable. Nuevo depurador de JavaScript : Depuración en el terminal, soporte de creación de perfiles. Vista unificada del control de ¡SEGUIR LEYENDO!

Última actualización de Visual Studio Code agrega importantes novedades

Microsoft lanzó Visual Studio Code 1.79.0 (finales de mayo de 2023) con varias funciones nuevas, incluido un modo de solo lectura para archivos y carpetas específicos en un espacio de trabajo. Si has estado usando GitHub Copilot, también llegan algunas mejoras en la última actualización. Los aspectos más destacados de esta versión son los siguientes: Modo de solo lectura: marca archivos y carpetas específicos en un ¡SEGUIR LEYENDO!

Themer personaliza tus Editores, IDEs, Apps o Navegadores

Themer es una aplicación online capaz de tomar un conjunto de colores y generar plantillas completas para tu entorno de desarrollo. Personalizar el diseño de tu Interfaz de Usuario con Themer será cosa de niñ@s. https://ciberninjas.com/mejores-editores-texto/ ¿Sabes que es lo mejor de todo? Con Themer no vas a estar limitado a la edición para una sola aplicación, vas a poder utilizar las plantillas con tu diseño ¡SEGUIR LEYENDO!