Introducción al uso de Visual Studio Code con Subsistema de Windows para Linux

Visual Studio Code, junto con la extensión WSL, permite usar WSL como entorno de desarrollo a tiempo completo directamente desde VS Code. Puede:

  • desarrollo en un entorno basado en Linux
  • uso de cadenas de herramientas y utilidades específicas de Linux
  • Ejecute y depure las aplicaciones basadas en Linux desde la comodidad de Windows y mantenga el acceso a herramientas de productividad como Outlook y Office.
  • use el terminal integrado de VS Code para ejecutar la distribución de Linux que prefiera.
  • aproveche las ventajas de las características de VS Code, como la finalización de código de IntelliSense, la linting, la compatibilidad con depuración, los fragmentos de código y las pruebas unitarias.
  • Administrar fácilmente el control de versiones con la compatibilidad integrada de Git de VS Code
  • Ejecutar comandos y extensiones de VS Code directamente en los proyectos de WSL
  • editar archivos en el sistema de archivos de Windows o en Linux (por ejemplo, /mnt/c) sin preocuparse por los problemas de la ruta de acceso, la compatibilidad binaria u otros desafíos entre sistemas operativos.

Instalación de VS Code y la extensión WSL

  • Visite la página de instalación de VS Code y seleccione el instalador de 32 o 64 bits. Instale Visual Studio Code en Windows (no en el sistema de archivos WSL).

  • Cuando se le pida que seleccione Tareas adicionales durante la instalación, asegúrese de comprobar la opción Agregar a PATH para que pueda abrir fácilmente una carpeta en WSL mediante el comando de código.

  • Instale el paquete de extensiones de desarrollo remoto. Este paquete de extensiones incluye la extensión WSL, además de las extensiones Remote - SSH y Dev Containers, lo que le permite abrir cualquier carpeta de un contenedor, en un equipo remoto o en WSL.

Importante

Para instalar la extensión WSL, necesitará la versión 1.35 de mayo o posterior de VS Code. No se recomienda usar WSL en VS Code sin la extensión WSL, ya que perderá la compatibilidad con autocompletar, depuración, linting, etc. Hecho divertido: esta extensión WSL se instala en $HOME/.vscode/extensions (escriba el comando ls $HOME\.vscode\extensions\ en PowerShell).

Actualización de la distribución de Linux

Algunas distribuciones de Linux de WSL carecen de bibliotecas que requiere el servidor de VS Code para iniciarse. Puede agregar bibliotecas adicionales a la distribución de Linux mediante su administrador de paquetes.

Por ejemplo, para actualizar Debian o Ubuntu, use:

sudo apt-get update

Para agregar wget (para recuperar contenido de servidores web) y certificados ca (para permitir que las aplicaciones basadas en SSL comprueben la autenticidad de las conexiones SSL), escriba:

sudo apt-get install wget ca-certificates

Abrir un proyecto de WSL en Visual Studio Code

Desde la línea de comandos

Para abrir un proyecto desde la distribución de WSL, abra la línea de comandos de la distribución y escriba: code .

Apertura del proyecto WSL con el servidor remoto de VS Code

Desde VS Code

También puede acceder a más opciones de VS Code WSL mediante el acceso directo: CTRL+SHIFT+P en VS Code para abrir la paleta de comandos. Si después escribe WSL verá una lista de las opciones disponibles, lo que le permite volver a abrir la carpeta en una sesión de WSL, especificar en qué distribución desea abrir y mucho más.

Paleta de comandos de VS Code

Extensiones dentro de VS Code WSL

La extensión WSL divide VS Code en una arquitectura "cliente-servidor", con el cliente (la interfaz de usuario) que se ejecuta en el equipo Windows y el servidor (el código, Git, complementos, etc.) que se ejecuta "de forma remota" en la distribución de WSL.

Al ejecutar la extensión WSL, al seleccionar la pestaña "Extensiones" se mostrará una lista de extensiones divididas entre el equipo local y la distribución de WSL.

La instalación de una extensión local, como un tema, solo debe instalarse una vez.

Algunas extensiones, como la extensión de Python o cualquier cosa que controle cosas como linting o depuración, deben instalarse por separado en cada distribución de WSL. VS Code mostrará un icono ⚠de advertencia, junto con un botón verde "Instalar en WSL", si tiene una extensión instalada localmente que no está instalada en la distribución de WSL.

VS Code con extensiones WSL frente a extensiones locales

Para más información, consulte la documentación de VS Code:

  • Cuando VS Code se inicia en WSL, no se ejecutan scripts de inicio de shell. Consulte este artículo de script de configuración avanzada del entorno para obtener más información sobre cómo ejecutar comandos adicionales o modificar el entorno.

  • ¿Tiene problemas para iniciar VS Code desde la línea de comandos de WSL? Esta guía de solución de problemas incluye sugerencias sobre cómo cambiar las variables de ruta de acceso, resolver errores de extensión sobre las dependencias que faltan, resolver problemas de finalización de línea de Git, instalar un VSIX local en un equipo remoto, iniciar una ventana del explorador, bloquear el puerto localhost, sockets web que no funcionan, errores al almacenar datos de extensión, etc.

Instalar GIT (opcional)

Si planeas colaborar con otras personas u hospedar el proyecto en un sitio de código abierto (como GitHub), VS Code admite el control de versiones con GIT. La pestaña Control de código fuente de VS Code realiza un seguimiento de todos los cambios y tiene comandos GIT comunes (agregar, confirmar, enviar cambios e incorporar cambios) integrados directamente en la interfaz de usuario.

Para instalar Git, consulte Configuración de Git para que funcione con Subsistema de Windows para Linux.

Instalación de Terminal Windows (opcional)

El nuevo Terminal Windows permite varias pestañas (cambiar rápidamente entre el símbolo del sistema, PowerShell o varias distribuciones de Linux), enlaces de teclas personalizados (cree sus propias teclas de método abreviado para abrir o cerrar pestañas, copiar y pegar, etc.), emojis y temas personalizados ☺ (combinaciones de colores, estilos de fuente y tamaños, imagen de fondo/desenfoque/transparencia). Obtenga más información en la documentación de Terminal Windows.

  1. Obtenga Terminal Windows en Microsoft Store: al instalar a través de Microsoft Store, las actualizaciones se controlan automáticamente.

  2. Una vez instalado, abre Terminal Windows y selecciona Configuración para personalizar el terminal con el archivo profile.json.

Recursos adicionales

Algunas de las extensiones adicionales que puedes considerar son las siguientes:

  • Keymaps from other editors: estas extensiones pueden ayudarte a sentirte como en casa con tu entorno en caso de que realices la transición desde otro editor de texto (como Atom, Sublime, Vim, eMacs, Notepad++, etc.).
  • Settings Sync: te permite sincronizar la configuración de VS Code entre diferentes instalaciones mediante GitHub. Si trabajas en diferentes máquinas, te ayuda a mantener el entorno coherente entre ellas.
  • Depurador para Chrome: una vez que termine de desarrollar en el lado servidor con Linux, deberá desarrollar y probar el lado cliente. Esta extensión integra el editor de VS Code con el servicio de depuración del explorador Chrome, lo que permite que las operaciones sean un poco más eficaces.