logo vscod

En este apunte trato sobre cómo personailizar VSCode, trabajo con GitHub en un entorno multiplataforma y multicuenta, quiero sincronizar mis settings, usar las mismas las extensiones, aprovechar licencias. Explico el tema multicuenta, la sincronización de mis preferencias (settings) globales y específicos por proyecto y las extensiones.

Normalmente uso windows, linux, macos y he optado por VSCode como editor/ide. El objetivo es tener una experiencia de trabajo unificada, que arranque VSCode en cualquier sistema operativo, que pueda clonar un proyecto personal o profesional, manteniendo las mismas extensiones y settings, incluso usando las opciones de conectarte a host, tunel, WSL, etc.


A saber,

  • VSCode no soporta multicuenta con proveedores Git y tengo cuenta profesional y otra personal (en mi caso con GitHub)
  • Para que funcione lo que explico, me apoyo en Git multicuenta
  • Mis settings.json globales deben ser válidos para Linux, MacOS y Windows.
  • Mis <proyecto>.vscode/settings.json son especificos por proryecto, pero al clonar en diferentes OS’s también me preocupo de que sean compatibles entre diferentes sistemas operativos.

Trabajo multicuenta

Te cuento mi caso y cómo lo he resuelto. Debes saber que VSCode solo permite hacer login a GitHub con una única cuenta.

  • Empiezo sin estar conectado a nada, desde el icono de usuario (Inferior Izda)
Empiezo sin estar conectado
  • Entro en Configuración de copia de Seguridad y Sincronización > Iniciar Sesión (dejo todo activado)
Iniciar Sesión
  • Paso 1: uso mi cuenta gratuita Microsoft Account (personal) para la sincronización. uso una cuenta personal vía Microsoft para sincronizar y para temas de GitHub usaré más tarde una cuenta Profesional.
Activo la sincronización vía Microsoft
  • Paso 3 - login de VSCode en GitHub con mi cuenta profesional. Aquí quiero usar la cuenta donde tenga más licencias, así activo más cosas. En mi caso la profesional donde tengo acceso por ejemplo a GitHub Copilot y GitHub Actions.
Hago login en GitHub
  • Paso 4 - Login con Extensiones específicas con sus credenciales. Si tienes una licencia de software para algún producto, lo normal es que puedas hacer Login desde su extensión. Muestro un ejemplo con mi licencia de GitKraken (Extensión eamodio.gitlens).
Ejemplo de login con Extensión
Así es cómo queda VScode
  • Paso 5: configuro correctamente la forma de trabajar en modo Git multicuenta. Accede a ese apunte, ahí describo cómo hacerlo.

Sincronización y Backup

La sincronización de VSCode (paso 1 anterior) permite una experiencia de trabajo coherente entre diferentes dispositivos y sistemas operativos. Sincroniza configuraciones, extensiones, fragmentos de código y atajos de teclado en todos los equipos donde tengo VSCode instalado.

  • Activa la sincronización: Ve a Administrar (Manage) > Configuración de sincronización (Backup & Sync Settings). Te pedirá que Inicies sesión utilizando tu cuenta de GitHub (o Microsoft, si prefieres). En mi caso uso Microsoft como dije en el punto anterior. Usa esa cuenta (bajo cuerda) para mantener las copias de seguridad/sincronización.

  • Selecciona qué sincronizar: Puedes elegir qué aspectos de tu configuración deseas sincronizar: configuraciones generales, extensiones, atajos de teclado, etc. Además puedes Realiza backups periódicos: Aunque la sincronización es automática, es recomendable hacer backups manuales de las configuraciones importantes (como el archivo settings.json) en caso de que necesites restaurar alguna configuración anterior.

Al activarlo puede que tengas conflictos, te ofrecerá cómo resolverlo.

Configuración global

Para entender mi configuración y los ejemplos, mi usuario en los diferentes entornos es luis y todos mis proyectos de desarrollo están bajo HOME/00.git

Dejo aquí a modo de referencia mis settings globales. Se accede a ella con Ctrl+Shift+P o CMD+Shift+P > Preferencias o Settings. Los directorios donde la guarda dependen del SO

  • Mi fichero VSCode global “settings.json”
    • Windows - C:\Users\luis\AppData\Roaming\Code\User
    • MacOS - /Users/luis/Library/Application Support/Code/User
    • Linux - /home/luis/.config/Code/User
Nota: Los comentarios no están permitidos en la especificación JSON, sin embargo VSCode (al igual que otros entornos) si que se lo traga. En GitHUb observará que los marca en rojo como errores, los he dejado para entender mejor el fichero.

Configuración por proyecto

Depende de cada proyecto, dejo enlaces a gists sobre algunos ejemplos, el archivo siempre estará en <proyecto>/.vscode/settings.json

Extensiones de VSCode

VSCode es una herramienta extremadamente poderosa y flexible, en gran parte gracias a su ecosistema de extensiones. Las extensiones permiten personalizar y ampliar las funcionalidades del editor para adaptarlo a las necesidades específicas de cada proyecto y desarrollador. Existen miles de extensiones disponibles en el marketplace de VSCode.

La elección de las extensiones es un tema muy personal. Lo que funciona bien para un desarrollador puede no ser tan útil para otro, dependiendo del tipo de proyectos en los que trabajes y de tus preferencias personales en cuanto a herramientas y flujos de trabajo. Esta es la lista de extensiones que utilizo regularmente, las cuales me ayudan a mantener un entorno de desarrollo eficiente y agradable.

Ver extensiones instaladas: Usa el comando siguiente para ver las que tienes instaladas.

code --list-extensions

Instalación de las extensiones: Puedes instalar cualquiera de estas extensiones directamente desde el marketplace de VSCode o utilizando la línea de comandos:

  1. Abre la paleta de comandos (Ctrl+Shift+P / CMD+Shift+P) y escribe Extensions: Install Extensions.
  2. Busca la extensión por su nombre o identificador (alefragnani.project-manager, por ejemplo).
  3. Haz clic en instalar.

Otra opción es instalar las extensiones utilizando el terminal integrado, por ejemplo:

code --install-extension alefragnani.project-manager