Introducción al uso de Visual Studio Code con el subsistema de Windows para LinuxGet started using Visual Studio Code with Windows Subsystem for Linux

Visual Studio Code, junto con la extensión Remote-WSL, le permite usar WSL como su entorno de desarrollo a tiempo completo directamente desde VS Code.Visual Studio Code, along with the Remote - WSL extension, enables you to use WSL as your full-time development environment directly from VS Code. Puede:You can:

  • desarrollo en un entorno basado en Linuxdevelop in a Linux-based environment
  • uso de utilidades y cadenas específicas de Linuxuse Linux-specific toolchains and utilities
  • Ejecute y Depure sus aplicaciones basadas en Linux desde la comodidad de Windows y mantenga el acceso a herramientas de productividad como Outlook y Officerun and debug your Linux-based applications from the comfort of Windows while maintaining access to productivity tools like Outlook and Office
  • usar el terminal integrado VS Code para ejecutar la distribución de Linux de su elecciónuse the VS Code built-in terminal to run your Linux distribution of choice
  • Aproveche las ventajas de VS Code características como la finalización del código de IntelliSense, la detección de errores, la compatibilidad con depuración, fragmentos de códigoy pruebas unitarias .take advantage of VS Code features like Intellisense code completion, linting, debug support, code snippets, and unit testing
  • Administre fácilmente el control de versiones con la compatibilidad de git integrada con vs Codeeasily manage your version control with VS Code's built-in Git support
  • ejecutar comandos y extensiones de VS Code directamente en los proyectos de WSLrun commands and VS Code extensions directly on your WSL projects
  • edite archivos en el sistema de archivos de Windows de Linux o montados (por ejemplo,/mnt/c) sin preocuparse por problemas de problemas, compatibilidad binaria u otros desafíos entre sistemas operativos.edit files in your Linux or mounted Windows filesystem (for example /mnt/c) without worrying about pathing issues, binary compatibility, or other cross-OS challenges

Instalación de VS Code y la extensión WSL remotaInstall VS Code and the Remote WSL extension

  • Visite la página vs Code instalar y seleccione el instalador de 32 o 64 bits.Visit the VS Code install page and select the 32 or 64 bit installer. Instale Visual Studio Code en Windows (no en el sistema de archivos de WSL).Install Visual Studio Code on Windows (not in your WSL file system).

  • Cuando se le pida que Seleccione tareas adicionales durante la instalación, asegúrese de activar la opción Agregar a ruta de acceso para que pueda abrir fácilmente una carpeta en WSL con el comando de código.When prompted to Select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command.

  • Instale el paquete de extensión de desarrollo remoto.Install the Remote Development extension pack. Este paquete de extensión incluye la extensión Remote-WSL, además de las extensiones remotas y de contenedores remotos, lo que permite abrir cualquier carpeta en un contenedor, en un equipo remoto o en WSL.This extension pack includes the Remote - WSL extension, in addition to the Remote - SSH, and Remote - Containers extensions, enabling you to open any folder in a container, on a remote machine, or in WSL.

Importante

Para instalar la extensión Remote-WSL, necesitará la versión 1,35 o posterior de vs Code.In order to install the Remote-WSL extension, you will need the 1.35 May release version or later of VS Code. No se recomienda el uso de WSL en VS Code sin la extensión Remote-WSL, ya que se perderá la compatibilidad con Autocompletar, depuración, detección de errores, etc. Diversión: esta extensión WSL se instala en $HOME/.vscode/Extensions (escriba el comando ls $HOME\.vscode\extensions\ en PowerShell).We do not recommend using WSL in VS Code without the Remote-WSL extension as you will lose support for auto-complete, debugging, linting, etc. Fun fact: this WSL extension is installed in $HOME/.vscode/extensions (enter the command ls $HOME\.vscode\extensions\ in PowerShell).

Actualización de la distribución de LinuxUpdate your Linux distribution

Algunas distribuciones de Linux de WSL carecen de bibliotecas requeridas por el servidor de VS Code para que se inicien.Some WSL Linux distributions are lacking libraries that are required by the VS Code server to start up. Puede agregar bibliotecas adicionales a la distribución de Linux mediante su administrador de paquetes.You can add additional libraries into your Linux distribution by using its package manager.

Por ejemplo, para actualizar Debian o Ubuntu, use:For example, to update Debian or Ubuntu, use:

sudo apt-get update

Para agregar wget (para recuperar contenido de servidores Web) y certificados de entidad de certificación (para permitir que las aplicaciones basadas en SSL comprueben la autenticidad de las conexiones SSL), escriba:To add wget (to retrieve content from web servers) and ca-certificates (to allow SSL-based applications to check for the authenticity of SSL connections), enter:

sudo apt-get install wget ca-certificates

Abra un proyecto de WSL en Visual Studio CodeOpen a WSL project in Visual Studio Code

Desde la línea de comandosFrom the command-line

Para abrir un proyecto desde la distribución de WSL, abra la línea de comandos de la distribución y escriba: code .To open a project from your WSL distribution, open the distribution's command line and enter: code .

Abrir el proyecto de WSL con VS Code servidor remoto

Desde VS CodeFrom VS Code

También puede tener acceso a más VS Code opciones remotas mediante el método abreviado: CTRL+SHIFT+P en vs code para abrir la paleta de comandos.You can also access more VS Code Remote options by using the shortcut: CTRL+SHIFT+P in VS Code to bring up the command palette. Si después escribe, VSCODE-REMOTE verá todos los vs Code opciones remotas disponibles, lo que le permite volver a abrir la carpeta en una sesión remota, especificar la distribución que desea abrir en, etc.If you then type VSCODE-REMOTE you will see all of the VS Code Remote options available, allowing you to reopen the folder in a remote session, specify which distribution you want to open in, and more.

Paleta de comandos de VS Code

Extensiones dentro de VS Code remotoExtensions inside of VS Code Remote

La extensión Remote-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.The Remote-WSL extension splits VS Code into a “client-server” architecture, with the client (the user interface) running on your Windows machine and the server (your code, Git, plugins, etc) running remotely.

Al ejecutar VS Code remoto, al seleccionar la pestaña "extensiones" se mostrará una lista de las extensiones divididas entre el equipo local y la distribución de WSL.When running VS Code Remote, selecting the 'Extensions' tab will display a list of extensions split between your local machine and your WSL distribution.

La instalación de una extensión local, como un tema, solo debe instalarse una vez.Installing a local extension, like a theme, only needs to be installed once.

Algunas extensiones, como la extensión de Python o cualquier elemento que controle cosas como la detección de errores o la depuración, deben instalarse por separado en cada distribuciones de WSL remotas.Some extensions, like the Python extension or anything that handles things like linting or debugging, must be installed separately on each remote WSL distributions. VS Code mostrará un icono de advertencia ⚠ , junto con un botón verde "instalar en WSL", si tiene instalada localmente una extensión que no está instalada en el WSL remoto.VS Code will display a warning icon ⚠, along with a green "Install in WSL" button, if you have an extension locally installed that is not installed on your WSL Remote.

VS Code con extensiones remotas y extensiones locales de WSL

Para obtener más información, consulte la VS Code docs:For further information, see the VS Code docs:

  • Cuando se inicia VS Code remoto en WSL, no se ejecuta ningún script de inicio de Shell.When VS Code Remote is started in WSL, no shell startup scripts are run. Consulte este artículo de script de configuración de entorno avanzado para obtener más información sobre cómo ejecutar comandos adicionales o modificar el entorno.See this advanced environment setup script article for more info on how to run additional commands or modify the environment.

  • ¿Tiene problemas para iniciar VS Code desde la línea de comandos de WSL?Having problems launching VS Code from your WSL command line? Esta Guía de solución de problemas incluye sugerencias para 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, un puerto localhost del bloqueador, Web sockets no funciona, errores de almacenamiento de datos de extensión, etc.This troubleshooting guide includes tips on changing path variables, resolving extension errors about missing dependencies, resolving Git line ending issues, installing a local VSIX on a remote machine, launching a browser window, blocker localhost port, web sockets not working, errors storing extension data, and more.

Instalar GIT (opcional)Install Git (optional)

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.If you plan to collaborate with others, or host your project on an open-source site (like GitHub), VS Code supports version control with 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.The Source Control tab in VS Code tracks all of your changes and has common Git commands (add, commit, push, pull) built right into the UI.

Para instalar GIT, consulte configuración de Git para trabajar con el subsistema de Windows para Linux.To install Git, see set up Git to work with Windows Subsystem for Linux.

Instalación de Terminal Windows (opcional)Install Windows Terminal (optional)

El nuevo terminal de Windows habilita varias pestañas (Cambie rápidamente entre el símbolo del sistema, PowerShell o varias distribuciones de Linux), enlaces de teclado personalizados (cree sus 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 fondoThe new Windows Terminal enables multiple tabs (quickly switch between Command Prompt, PowerShell, or multiple Linux distributions), custom key bindings (create your own shortcut keys for opening or closing tabs, copy+paste, etc.), emojis ☺, and custom themes (color schemes, font styles and sizes, background image/blur/transparency). Obtenga más información en los documentos de Windows terminal.Learn more in the Windows Terminal docs.

  1. Obtenga Terminal Windows en Microsoft Store: al instalar a través de Microsoft Store, las actualizaciones se controlan automáticamente.Get Windows Terminal in the Microsoft Store: By installing via the store, updates are handled automatically.

  2. Una vez instalado, abre Terminal Windows y selecciona Configuración para personalizar el terminal con el archivo profile.json.Once installed, open Windows Terminal and select Settings to customize your terminal using the profile.json file.

Recursos adicionalesAdditional Resources

Algunas de las extensiones adicionales que puedes considerar son las siguientes:A few additional extensions you may want to consider include:

  • 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.).Keymaps from other editors: These extensions can help your environment feel right at home if you're transitioning from another text editor (like Atom, Sublime, Vim, eMacs, Notepad++, etc).
  • Settings Sync: te permite sincronizar la configuración de VS Code entre diferentes instalaciones mediante GitHub.Settings Sync: Enables you to synchronize your VS Code settings across different installations using GitHub. Si trabajas en diferentes máquinas, te ayuda a mantener el entorno coherente entre ellas.If you work on different machines, this helps keep your environment consistent across them.
  • Depurador para Chrome: una vez que haya terminado de desarrollar en el lado del servidor con Linux, deberá desarrollar y probar el lado cliente.Debugger for Chrome: Once you finish developing on the server side with Linux, you'll need to develop and test the client side. 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.This extension integrates your VS Code editor with your Chrome browser debugging service, making things a bit more efficient.