Cómo integrar Visual Studio Code con WSL en Windows

Visual Studio Code es un editor de código fuente ligero pero potente desarrollado por Microsoft. Combina la simplicidad de un editor de código con potentes herramientas para depurar y gestionar versiones. Si estás utilizando Windows Subsystem for Linux (WSL), puedes integrar VS Code con WSL para obtener lo mejor de ambos mundos.

En este tutorial, aprenderás cómo configurar VS Code para trabajar directamente con tu entorno WSL, permitiéndote editar y depurar código en Linux desde Windows.

Table of Contents

¿Por qué integrar VS Code con WSL?

Integrar VS Code con WSL ofrece numerosas ventajas:

• Desarrollo Nativo en Linux: Ejecuta y depura código en un entorno Linux real desde Windows.
• Mejor Rendimiento: Evita los problemas de rendimiento asociados con las herramientas de virtualización tradicionales.
• Acceso a Herramientas de Linux: Utiliza herramientas y paquetes disponibles solo en Linux.
• Flujo de Trabajo Unificado: Edita archivos en WSL usando la interfaz familiar de VS Code en Windows.

Requisitos previos

• Windows 10 versión 2004 o superior, o Windows 11.
• WSL habilitado y una distribución de Linux instalada. Si aún no lo has hecho, puedes seguir la guía Cómo instalar WSL desde PowerShell en Windows 10 y 11.
• Visual Studio Code debe estar instalado en Windows. Puedes descargarlo desde la página oficial.

1. Instalar la extensión “Remote - WSL” en VS Code

1. Abre Visual Studio Code en Windows.
2. Ve a la Extensiones (icono de cuadrados en la barra lateral izquierda o presiona Ctrl+Shift+X).
3. En el cuadro de búsqueda, escribe “Remote - WSL”.
4. Haz clic en Instalar en la extensión “Remote - WSL” desarrollada por Microsoft.

2. Abrir una nueva ventana de VS Code en WSL

Hay varias formas de hacerlo:

Método 1: Desde la terminal de WSL

1. Abre la terminal de WSL en Windows Terminal o cualquier terminal de tu preferencia.

2. Navega al directorio de tu proyecto o al directorio que deseas abrir.

3. Escribe el siguiente comando y presiona Enter:

   code .

   • El punto . indica que deseas abrir el directorio actual.

4. VS Code se abrirá en Windows, pero conectado a tu entorno WSL y mostrando el contenido del directorio que especificaste.

   Nota: Si es la primera vez que ejecutas code desde WSL, VS Code instalará automáticamente el servidor de VS Code en tu entorno WSL.

Método 2: Desde VS Code en Windows

1. Abre Visual Studio Code en Windows.
2. Presiona Ctrl+Shift+P para abrir la Paleta de Comandos.
3. Escribe “Remote-WSL: New Window” y selecciona la opción que aparece.
4. Se abrirá una nueva ventana de VS Code conectada a tu entorno WSL.

3. Verificar que estás en modo WSL

Para confirmar que estás conectado a WSL:

• Observa la esquina inferior izquierda de VS Code. Deberías ver el ícono de WSL: [Tu Distribución].

4. Instalar extensiones en WSL

Cuando trabajas en WSL, es recomendable instalar las extensiones directamente en el entorno WSL para asegurar la compatibilidad.

1. Ve a la Extensiones (Ctrl+Shift+X).
2. Busca e instala las extensiones que necesites.
3. Asegúrate de que las extensiones se instalen en WSL. VS Code te dará la opción de instalar en WSL o en Local.

5. Configurar tu entorno de desarrollo en WSL

Ahora puedes trabajar como lo harías normalmente, pero con las ventajas de un entorno Linux:

• Terminal Integrada: Utiliza la terminal integrada de VS Code (Ctrl+ñ o Ctrl+Shift+).
• Depuración: Configura y ejecuta depuraciones en tu entorno WSL.
• Git: Si tienes Git instalado en WSL, VS Code utilizará esa versión.

6. Personalizar ajustes y preferencias

Puedes personalizar VS Code según tus preferencias:

• Configuraciones: Ve a Archivo > Preferencias > Configuración o presiona Ctrl+,.
• Atajos de Teclado: Configura atajos en Archivo > Preferencias > Atajos de teclado.

Los ajustes pueden ser específicos para tu entorno WSL o globales.

Solución de problemas comunes

El comando code no funciona en WSL

Si al escribir code en la terminal de WSL obtienes un error:

Solución

• Asegúrate de que la variable de entorno PATH incluye la ruta a VS Code. Esto normalmente se configura automáticamente, pero si no es así, puedes agregar lo siguiente a tu archivo ~/.bashrc o ~/.zshrc:

  export PATH="$PATH:/mnt/c/Users/TuUsuario/AppData/Local/Programs/Microsoft VS Code/bin"

  Asegúrate de reemplazar TuUsuario con tu nombre de usuario de Windows.

Problemas de permisos o acceso a archivos

Si encuentras problemas al acceder a archivos o directorios desde VS Code en WSL:

Solución

• Verifica los permisos de los archivos y directorios en tu sistema de archivos Linux.
• Asegúrate de que tu usuario tiene los permisos necesarios.

Extensiones no funcionan correctamente

Si algunas extensiones no funcionan como se espera en WSL:

Solución

• Asegúrate de que las extensiones están instaladas en el entorno WSL y no solo en Windows.
• Verifica la compatibilidad de las extensiones con WSL.

Vídeo Tutorial

Si eres una persona visual, aquí tienes un vídeo tutorial que te guiará a través de los pasos para integrar Visual Studio Code con WSL en Windows:

En este vídeo se cubren todos los pasos detallados anteriormente, además de consejos adicionales para aprovechar al máximo la integración entre VS Code y WSL.

Conclusión

Has integrado con éxito Visual Studio Code con WSL en Windows. Ahora puedes desarrollar en un entorno Linux real sin salir de Windows, aprovechando las herramientas y características de VS Code.

Esta configuración te permite:

• Editar y depurar código en Linux desde la interfaz familiar de VS Code en Windows.
• Utilizar herramientas y dependencias disponibles solo en Linux.
• Mejorar tu flujo de trabajo y productividad.

¡Explora más funcionalidades y lleva tu desarrollo al siguiente nivel!