Introducción a Visual Studio Code con el Subsistema de Windows para Linux

  • Artículo

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

  • desarrollar en un entorno basado en Linux
  • usar de cadenas de herramientas y utilidades específicas de Linux
  • ejecutar y depurar las aplicaciones basadas en Linux desde la comodidad de Windows y, a la vez, mantener el acceso a herramientas de productividad como Outlook y Office
  • usar el terminal integrado de VS Code para ejecutar la distribución de Linux que prefiera
  • aprovechar las características de VS Code, como lael autocompletado de código de IntelliSense, la detección de errores, la compatibilidad con la depuración, los fragmentos de código y las pruebas unitarias
  • administrar fácilmente el control de versiones con la compatibilidad con Git integrada de VS Code
  • ejecutar comandos y extensiones de VS Code directamente en los proyectos de WSL
  • editar archivos en el sistema de archivos de Linux o montado en Windows (por ejemplo, /mnt/c) sin preocuparse por problemas de ruta de acceso, 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 activar 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 en 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 WSL en Linux carecen de bibliotecas que el servidor de VS Code requiere 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 de 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 .

Open WSL project with VS Code remote server

Desde VS Code

También puede acceder a más opciones de WSL en VS Code 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 permitirá volver a abrir la carpeta en una sesión de WSL, especificar en qué distribución desea abrirla y mucho más.

VS Code's command palette

Extensiones en WSL en VS Code

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 (código, Git, complementos, etc.) que se ejecuta de forma remota en la distribución de WSL.

Cuando se ejecuta 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 realizarse una vez.

Algunas extensiones, como la extensión de Python o cualquier otra que controle tareas como la detección de errores o la 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 with WSL extensions vs local extensions

Para obtener 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 sobre el script de configuración de entorno avanzado 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 variables de ruta de acceso, resolver errores de extensión relacionados con 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, puerto localhost bloqueado, 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 el Subsistema de Windows para Linux.

Instalación de Terminal Windows (opcional)

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

  1. Obtener Terminal Windows en microsoft Store: Al instalar a través de la tienda, 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.