2 formas de sincronizar tu configuración de VSCode en múltiples máquinas

Derrepente tienes una máquina para el trabajo y una personal o te compraste una máquina nueva y quieres todo tu entorno de desarrollo de VSCode sin tener que estar buscando qué extensiones o temas tenías inatalador e instalar una por una 😫... pues hoy te voy a mostrar 2 formas en que puedes sincronizar VSCode en múltiples máquinas.

1. Creando un repositorio de GitHub

Asegúrate de tener instalado el comando code.

Obteniendo la lista de extensiones de VSCode

En tu terminar escribe el siguiente comando:

# UNIX:
code --list-extensions | xargs -L 1 echo code --install-extension

# Windows (PowerShell, e. g. using VSCode's integrated Terminal):
code --list-extensions | % { "code --install-extension $_" }

Cuya salida será algo así

code --install-extension 2gua.rainbow-brackets
code --install-extension DanielThielking.aws-cloudformation-yaml
code --install-extension aaron-bond.better-comments
code --install-extension adamwalzer.scss-lint
code --install-extension ahmadawais.shades-of-purple
...

Esa salida podemos guardarla en un bashero, por ejemplo vscode-extension-list.sh, de la siguiente manera:

code --list-extensions | xargs -L 1 echo code --install-extension > vscode-extension-list.sh

A continuación le damos permisos de ejecución:

chmod +x vscode-extension-list.sh

Luego subimos este archivo a nuestro repositorio de GitHub.

Cómo instalar la lista de extensiones en una nueva máquina

Clonamos el repositorio que creamos anteriormente en la máquina donde queremos instalar nuestras extensiones de VSCode y ejecutamos el siguiente comando:

# UNIX
./vscode-extension-list.sh

2. La extensión Settings Sync

Esta extensión es exactamente lo que dice su descripción de GitHub: una herramienta que puede sincronizar la configuración de VSCode en todas las máquinas que desee y de la mano de GitHub lo hace posible.

Y sincroniza todo:

  • Archivo de configuración
  • Archivo de shortcuts and keymaps
  • Carpeta de snippets
  • Extensiones VSCode y configuraciones de las extensiones
  • Carpeta de espacios de trabajo

Instalar la extensión

Instálala desde aquí o búscala en el marketplace

Settings Sync

Obteniendo el GitHub token

En GitHub ve a: Settings / Developer settings / Personal access tokens / Generate new token (ver captura de pantalla a continuación).

Generate new token in GitHub

Generate new token in GitHub

Después de generar su nuevo token, copie el hash (en la imagen es la línea negra) del token y guárdalo en un lugar seguro porque nunca más podrás acceder a esta cadena en el futuro.

Sube tu configuración de VSCode

Settings Sync upload

De regreso en VSCode, abre la paleta de comandos con command + shift + p, tipea sync: y escoge la opción Sync: Update/Upload Settings. Se te pedirá agregar el token de GitHub que acaba de copiar.

Ahora que ingresaste el token, todas las configuraciones actuales de VSCode se subirán a un gist de GitHub, y el terminal OUTPUT en VSCode mostrará un mensaje similar a la captura de pantalla a continuación.

CODE SETTINGS SYNC UPLOAD SUMMARY
Version: 3.4.3
--------------------
GitHub Token: f699**********
GitHub Gist: 389263be0b040d3f4a5f0ca39*******
GitHub Gist Type: Secret

Restarting Visual Studio Code may be required to apply color and file icon theme.
--------------------
Files Uploaded:
  extensions.json > extensions.json
  keybindings.json > keybindingsMac.json
  settings.json > settings.json

Extensions Ignored:
  No extensions ignored.

Extensions Removed:
  No extensions removed.

Extensions Added:
  a-touch-of-lilac-theme v1.1.0
  auto-close-tag v0.5.6
  auto-dark-mode v0.1.7
  auto-rename-tag v0.1.1
  aws-cloudformation-yaml v0.2.2
  better-comments v2.0.5
  change-case v1.0.0
  code-settings-sync v3.4.3
  ...
  ...
--------------------
Done.

Puedes ver que mis archivos de configuración y la configuración de las extensiones se subieron junto con todas las extensiones que estoy usando actualmente en mi VSCode.

Descarga tu configuración de VSCode

Abrimos nuevamente la paleta de comandos y tipeamos Sync: Download Settings, te pedirá el token generado anteriormente, lo ingresamos. A continuación te pedirá el ID del Gist generado cuando subiste tu configuración. ¿Cómo lo obtienes? Pues entrando a gist.github.com/ o copiándolo de la salida de la terminal OUTPUT en VSCode cuando subiste tu configuración:

GitHub Gist: 389263be0b040d3f4a5f0ca39*******

Esto mismo harás después de instalar VSCode y Settings Sync en tu nueva máquina.

¡Ya terminamos! En este punto, es posible que deba cerrar el editor VSCode por completo y volver a abrirlo para que todos los cambios surtan efecto, pero eso debería ser todo.

Última recomendación

Te recomiendo que agregues estas opciones en tus settings:

{
  "sync.autoDownload": true,
  "sync.autoUpload": true
}

Para que no tengas que estar actualizando manualmente el gist 😉


Gracias por leer, espero que esto te haya ayudado y si fue así ¡Compartelo con tus amig@s! ✌️😁