Saltar al contenido principal

Instalación y configuración de Visual Studio Code

Visual Studio Code (VS Code o VSC) es un editor de código fuente ligero y versátil, ideal para el desarrollo backend. En este apartado se comentará cómo instalarlo y configurarlo.

Instalación​

Para comenzar a utilizarlo, primero debemos descargarlo desde su sitio oficial: Visual Studio Code. Una vez instalado, al abrir VS Code por primera vez, se te pedirá que elijas un tema de color y algunas preferencias básicas. Este paso lo puedes saltar y personalizar tu editor más adelante seleccionando Archivo → Preferencias → Configuración. Aquí podrás ajustar temas, tipografía, tamaño de letra y otras preferencias de usabilidad.

Configuración inicial​

Tras una nueva instalación de Visual Studio Code, se pueden hacer algunas configuraciones iniciales que mejorarán tu productividad. En este apartado encontrarás algunas. Además, es fundamental familiarizarse con la paleta de comandos de Visual Studio Code, accesible mediante Ctrl+Shift+P, ya que permite ejecutar rápidamente cualquier acción o comando sin necesidad de navegar por los menús, lo que incrementa notablemente la eficiencia en el uso del editor.

Temas y apariencia​

Un tema en Visual Studio Code es una personalización visual que cambia los colores de la interfaz, el fondo y la sintaxis del código, adaptándolo a las preferencias del usuario. Para instalar un tema, basta con ir a la sección de extensiones, buscar el tema deseado e instalarlo con un solo clic. Algunos populares son One Dark Pro, Dracula o Material Theme.

Además de los temas, es posible personalizar los iconos de los archivos a través de extensiones específicas, lo que facilita la identificación rápida de los diferentes tipos de fichero en el explorador del editor. Un paquete de iconos podría ser Symbols.

Cada desarrollador puede personalizar Visual Studio Code con su propio tema y apariencia, sin que esto afecte la experiencia de otros colaboradores. Estas personalizaciones son locales y no influyen en el proyecto en desarrollo, ya que no alteran el código ni la estructura del proyecto. Solo modifican cómo cada desarrollador ve y trabaja con el editor, manteniendo el entorno de trabajo individualizado.

Atajos de teclado​

Visual Studio Code implementa varios atajos de teclado (keyboard shortcuts), pero se pueden personalizar según tus necesidades puslando Ctrl+K seguido de Ctrl+S. Por ejemplo, puedes redefinir comandos que usas frecuentemente como abrir el terminal, copiar líneas o navegar entre archivos. Se debe prestar atención a que los atajos de teclado pueden varias según el sistema operativo.

Extensiones​

Las extensiones en Visual Studio Code son complementos que permiten añadir nuevas funcionalidades al editor, como soporte para lenguajes de programación, herramientas de depuración o integración con plataformas de desarrollo. Existen una gran cantidad de extensiones desarrolladas por la comunidad, lo que facilita la personalización del editor según las necesidades de cada proyecto.

Aviso de seguridad

Es importante tener en cuenta que las extensiones publicadas en el Marketplace de extensiones de VSC no son revisadas por Microsoft, por lo que se debe prestar especial cuidado al instalarlas para evitar posibles riesgos de seguridad o mal funcionamiento. Por otro lado, cabe resaltar que el icono azul de verificado que aparece junto a una extensión no significa que haya sido revisada por Microsoft, sino que el desarrollador ha verificado su dominio. Esto no implica ninguna garantía de seguridad.

Algunas extensiones ampliamente utilizadas son:

  • IntelliCode: Proporciona características de desarrollo asistido por IA para desarrolladores de Python, TypeScript/JavaScript, con sugerencias basadas en la comprensión del contexto de tu código combinada con aprendizaje automático.
  • PHP IntelliSense: Si trabajas con PHP, esta extensión proporciona autocompletado y sugerencias de código, haciendo más eficiente tu desarrollo.
  • Prettier: Un formateador de código popular que soporta una amplia gama de lenguajes. Prettier asegura que el código siga un estilo coherente y se mantenga limpio y legible.
  • ESLint: Si trabajas con JavaScript o TypeScript, te ayudará a mantener un código limpio y libre de errores.
  • Path Intellisense: Para autocompletar las rutas de archivos.
  • GitLens: Proporciona una potente integración con Git y te muestra el historial de cambios en el código.
  • Live Server: Si trabajas con HTML o aplicaciones web, esta extensión te permite visualizar cambios en tiempo real.
  • Docker: Para aquellos que despliegan sus aplicaciones en contenedores Docker, esta extensión facilita la interacción con contenedores, imágenes y registros de Docker directamente desde el editor.
  • EditorConfig: Ayuda a mantener estilos de codificación consistentes entre diferentes desarrolladores, definiendo reglas como la longitud de la indentación o la codificación de archivos.
  • File Utils: Agiliza la creación, duplicación, renombrado o eliminación de archivos y carpetas directamente desde el editor, sin tener que hacerlo manualmente en el explorador de archivos.
  • Remote-SSH: Esta extensión te permite conectarte a servidores remotos y trabajar en ellos como si estuvieras en tu máquina local. Ideal para acceder a entornos de producción o servidores de desarrollo sin salir de VS Code.
  • Remote Explorer: Complementa Remote-SSH al permitir explorar visualmente archivos remotos y contenedores Docker sin necesidad de usar una terminal.

Para mantener un buen rendimiento en Visual Studio Code, es recomendable tener el mínimo posible de extensiones instaladas. Las extensiones innecesarias pueden ralentizar el editor. Si no deseas desinstalarlas, tienes la opción de deshabilitarlas temporalmente cuando no las estés usando, lo que te permite mantener el rendimiento sin perder la personalización.

Interfaz de línea de comandos (CLI)​

La interfaz de línea de comandos (Command Line Interface o CLI) en Visual Studio Code permite ejecutar comandos directamente desde el entorno de desarrollo, facilitando la interacción con el sistema operativo, la ejecución de scripts y el uso de herramientas como Git, NodeJS, Python, entre otros.

Puedes abrir el terminal desde Ver → Terminal o con el atajo Ctrl+Ñ. VSC permite configurar distintos tipos de terminales en Ajustes → Terminal integrado, donde también puedes establecer un terminal por defecto según tus preferencias.

Utilidad de seleccionar uno u otro:

  • CMD: recomendado para usuarios de Windows que prefieren la línea de comandos tradicional.
  • PowerShell: ideal para usuarios de Windows que requieren más funcionalidades y automatización.
  • Bash: recomendado para usuarios que trabajan en entornos Unix (Linux o WSL en Windows).
  • Fish: una opción avanzada para quienes buscan un terminal con características interactivas mejoradas.

Cada terminal tiene ventajas específicas según el entorno de desarrollo y los comandos que utilices.

WSL

WSL (Windows Subsystem for Linux) es una herramienta que permite ejecutar un entorno Linux directamente en Windows, sin necesidad de máquinas virtuales. Su utilidad principal es facilitar el desarrollo y uso de herramientas y aplicaciones nativas de Linux dentro de Windows, resolviendo el problema de tener que cambiar de sistema operativo o usar entornos de virtualización pesados para trabajar con software Linux en un entorno Windows.

WSL está disponible a partir de Windows 10 versión 1607 (Anniversary Update) y en Windows 11.

Para habilitar WSL, sigue estos pasos:

  1. Abre PowerShell como administrador.

  2. Ejecuta el comando:

    wsl --install

    Esto instala automáticamente la última versión de WSL y una distribución de Linux por defecto (generalmente Ubuntu).

  3. Reinicia el equipo si es necesario.

Si quieres instalar una distribución específica o verificar las versiones disponibles, puedes hacerlo desde Microsoft Store o con el comando:

wsl --list --online

Snippets​

Un snippet es un fragmento de código reutilizable que permite acelerar el desarrollo al insertar automáticamente plantillas de código comunes o estructuras repetitivas. En Visual Studio Code, los snippets facilitan la escritura de código al reducir la necesidad de teclear manualmente partes repetitivas, como funciones, bloques condicionales, o estructuras HTML.

VSC integra algunos snippets por defecto, pero se pueden descargar otros creados por la comunidad a través de extensiones o se pueden crear snippets propios desde la configuración de VSC para lenguajes específicos o globales.

Creación de un snippet​

Para crear un snippet propio, sigue estos pasos:

  • Abre la paleta de comandos con Ctrl+Shift+P.
  • Escribe "Snippets" y selecciona Snippets: Configure Snippets.
  • Escoge el lenguaje para el que deseas crear el snippet o elige New Global Snippets file.
  • Define el snippet en el archivo JSON que se abre, especificando el nombre, el prefijo (la palabra clave para invocar el snippet) y el cuerpo del código que se insertará.

Por ejemplo:

"Print to console": {
  "prefix": "log",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
}

Sincronización de Configuraciones​

Existen varias técnicas para sincronizar los ajustes del editor de código o realizar una exportación/importación manual. Estas opciones permiten mantener tus configuraciones de desarrollo coherentes en distintos dispositivos, ya sea que prefieras una sincronización automática en la nube o una gestión manual sin conexión.

Sincronización online​

  1. GitHub Settings Sync: Muchos editores como Visual Studio Code permiten sincronizar configuraciones (extensiones, temas, atajos) a través de GitHub. Activando esta opción, tus ajustes se guardan en tu cuenta de GitHub y se sincronizan automáticamente entre dispositivos cuando inicias sesión.
  2. Microsoft Account Sync: Visual Studio Code también ofrece la posibilidad de sincronizar tu configuración usando una cuenta de Microsoft. De esta forma, las configuraciones se guardan en la nube de Microsoft y se sincronizan entre dispositivos cuando inicias sesión con tu cuenta.

Sincronización offline​

  1. Exportar e Importar Configuración: Es posible exportar la configuración manualmente copiando archivos clave (como settings.json, keybindings.json) y guardarlos en un dispositivo de almacenamiento (USB). Luego, se pueden importar en otros equipos.
  2. Copias Locales: Mantén un repositorio local donde guardes las configuraciones de tu entorno. Puedes trasladarlas entre dispositivos sin necesidad de conexión a internet.

Ambas opciones te permiten mantener tu entorno de desarrollo entre diferentes equipos consistente, ya sea que tengas acceso a Internet o no.

Autocompletado e IntelliSense​

El autocompletado e IntelliSense son herramientas clave en entornos de desarrollo como Visual Studio Code. El autocompletado sugiere automáticamente fragmentos de código, funciones o variables mientras escribes, lo que ahorra tiempo y reduce errores tipográficos. IntelliSense, por su parte, extiende estas funcionalidades proporcionando sugerencias contextuales más avanzadas, como descripciones de funciones, tipos de datos, y posibles parámetros.

Las ventajas principales de estas herramientas incluyen mayor productividad, ya que los desarrolladores pueden escribir código más rápido y con mayor precisión. También minimizan los errores comunes y ayudan a los programadores a recordar la sintaxis y funciones de las APIs que utilizan.

En VSC, estas funcionalidades se activan de forma predeterminada, pero se pueden mejorar con extensiones para lenguajes específicos como Python, JavaScript o PHP. Además, existe soporte para snippets personalizados y para configurar el comportamiento de IntelliSense según las necesidades del proyecto.

Es posible configurar la velocidad y las sugerencias de autocompletado. Puedes cambiarlo en las preferencias:

"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": true
}

Integración con Git​

La integración de Git en Visual Studio Code permite a los desarrolladores gestionar fácilmente repositorios de control de versiones desde el propio editor, sin necesidad de salir de él. VSC incluye soporte nativo para Git, lo que facilita realizar tareas como clonar repositorios, crear branches, realizar commits o gestionar conflictos de fusión.

En la barra lateral de VSC, existe un icono dedicado al control de versiones, desde el cual puedes ver los cambios en el código, añadir archivos al stage, y realizar push o pull de actualizaciones a repositorios remotos, como GitHub o GitLab. También se integran herramientas como la línea de tiempo de cambios y la visualización de diferencias entre versiones, lo que optimiza el flujo de trabajo para los desarrolladores que colaboran en proyectos.

Otras configuraciones​

En VSC se pueden realizar multitud de configuraciones. Todas ellas están accesibles en Archivo → Preferencias → Configuración. Algunas configuraciones adicionales que pueden ser útiles son las siguientes:

  • Habilitar Format on Save: Es manera de mantener el código limpio y bien estructurado. Con esta configuración, el código se formatea automáticamente cada vez que se guarda el archivo, asegurando que se sigan las reglas de estilo establecidas. Para habilitarlo, simplemente ve a la configuración de VS Code y busca "format on save".
  • Activar Word Wrap: En proyectos donde se escriben líneas de código o comentarios largos, habilitar el Word Wrap (ajuste de línea) evita tener que desplazarse horizontalmente para leer el contenido. Esta opción ajusta automáticamente las líneas largas para que se muestren completas en la ventana del editor, sin modificar el código. Puedes habilitarla desde el menú de configuración o usando el comando Alt+Z.
  • Usar "Auto Save": La opción de Auto Save permite que VS Code guarde automáticamente los cambios en el archivo tras un período de inactividad o cada vez que se sale del foco del editor. Esta característica es útil para evitar la pérdida de progreso en caso de olvidos o cierres inesperados del editor. Puedes ajustar el comportamiento de guardado automático desde las opciones de Auto Save.
  • Configurar Editor Rulers: El uso de Editor Rulers añade una o más líneas verticales en el editor, ayudando a mantener la consistencia en la longitud de las líneas de código. Esto es útil para equipos de desarrollo que siguen una guía de estilo donde se especifica que las líneas no deben exceder cierto número de caracteres.
  • Activar el resaltado de guías de indentación: El resaltado de las guías de indentación permite ver claramente las estructuras de código, como los bloques anidados en lenguajes como Python o JavaScript. Activar esta opción facilita la identificación de niveles de indentación, lo que puede evitar errores. Puedes encontrar cómo configurarlo en el apartado de guías de indentación.
  • Integrar linters y formatters: Instalar linters y formatters específicos para el lenguaje que estés utilizando asegura que el código siga los estándares de calidad del proyecto. Herramientas como ESLint para JavaScript, Pylint para Python o PHPCS para PHP son fáciles de integrar en VS Code y ayudan a identificar errores de sintaxis o estilo en tiempo real. Más detalles sobre linters y formatters están disponibles en el apartado de extensiones.

Workspace​

En VS Code, un workspace (espacio de trabajo) es una colección de archivos y carpetas que están abiertos en una sesión específica del editor. Básicamente, es el entorno de trabajo en el que se organiza un proyecto o varios proyectos. El concepto de workspace en VSC ofrece algunas características importantes para personalizar y mejorar la experiencia de desarrollo.

Características​

  1. Carpetas abiertas: Un workspace puede contener una o más carpetas de proyectos. Si se trata de un solo proyecto, se trabaja con una carpeta. Si el workspace contiene varios proyectos, cada carpeta de proyecto puede tener su propia configuración y estructura.
  2. Configuraciones específicas:
    • Puedes tener configuraciones específicas para cada proyecto, como extensiones activadas, ajustes de editor (indentación, codificación, etc.), variables de entorno y preferencias.
    • Estas configuraciones se almacenan en un archivo llamado *.code-workspace cuando trabajas con un workspace multi-root, permitiendo la persistencia de configuraciones para varios proyectos simultáneamente.
  3. Multi-root workspaces: Permite abrir varias carpetas de diferentes proyectos en un mismo espacio de trabajo. Cada carpeta dentro del workspace puede tener su propio archivo de configuración y puede ser gestionada de manera independiente.
  4. Configuración de entorno: Puedes configurar variables de entorno específicas, rutas de depuración, configuraciones de compilación y más para cada proyecto dentro del workspace.
  5. Extensiones personalizadas: El workspace puede tener extensiones recomendadas, lo que te permite instalar las extensiones necesarias para trabajar con ese proyecto en particular. Incluso puede sugerirlas a otros usuarios cuando abran el proyecto.
  6. Vinculación con control de versiones: Un workspace se puede integrar con un sistema de control de versiones (como Git). Esto permite hacer seguimiento de los cambios en múltiples proyectos a la vez si se usan carpetas de diferentes repositorios.

Usos de un workspace​

  1. Organización de proyectos: Si estás trabajando en múltiples proyectos o en un proyecto con muchas carpetas, un workspace te permite tener todas esas carpetas abiertas y gestionarlas desde una sola instancia de VS Code.
  2. Personalización del entorno de trabajo: Cada workspace puede tener configuraciones, extensiones y preferencias específicas. Esto es útil si, por ejemplo, trabajas en proyectos que usan diferentes lenguajes de programación o estilos de codificación.
  3. Eficiencia: Facilita trabajar con varios proyectos simultáneamente sin la necesidad de abrir múltiples instancias de VS Code. Todos los proyectos en un workspace pueden ser gestionados, compilados y depurados desde un solo lugar.
  4. Compatibilidad multi-lenguaje: En un workspace con múltiples carpetas, cada carpeta puede tener proyectos en diferentes lenguajes de programación, cada uno con su propia configuración y extensiones, facilitando el trabajo en entornos heterogéneos.