Cómo sincronizar la configuración del código VS entre varios dispositivos y entornos

A todos los desarrolladores les gusta su editor de texto de cierta manera, pero puede ser difícil asegurarse de que todos sus entornos tengan la misma configuración. ¿Cómo podemos asegurarnos de que nuestra configuración de VS Code sea la misma donde sea que la usemos?

  • ¿Qué es VS Code?
  • ¿Qué usaremos?
  • ¿Como funciona?
  • Paso 1: Instale la sincronización de configuración
  • Paso 2: autoriza el acceso a Github
  • Paso 3: sube tu configuración actual
  • Paso 4: sincronizar su configuración con otro entorno
  • Paso 5: actualización de su configuración

¿Qué es VS Code?

Visual Studio Code, o VS Code, es un editor de código con todo incluido que elimina todas las funciones que desea al trabajar con código y las coloca en un solo editor para hacerlo más productivo.

Ha sido el "chico genial en el bloque" por un tiempo y ha ido creciendo en popularidad al menos en la comunidad JavaScript. Microsoft ha hecho un gran esfuerzo para convertirlo en algo que la gente quiera usar (y están haciendo un gran trabajo en eso).

¿Qué usaremos?

Vamos a utilizar una extensión de VS Code llamada Settings Sync que hace uso de la función Gist de Github para almacenar un archivo de configuración JSON privado en la nube.

¿Como funciona?

La extensión utiliza OAuth de Github para iniciar sesión en su cuenta de Github. Una vez aprobado, VS Code obtiene un token de acceso y se comunica para almacenar y descargar su archivo de configuración en un Github Gist privado.

Una vez que está configurado, puede configurar la extensión en cualquier otra instancia de VS Code y descargar inmediatamente su configuración para sincronizar su editor.

Paso 0: Código VS

Asumiremos para este tutorial que ya tiene VS Code instalado. Si bien no es necesario tener ninguna configuración especial, tener algo diferente al predeterminado (como un tema de color) lo ayudará a ver que funciona.

¡Empecemos!

Paso 1: Instale la sincronización de configuración

Lo primero que debemos hacer es instalar la extensión. Puede hacer esto de varias maneras: puede visitar la página web y presionar Instalar, lo que abrirá VS Code o puede buscar la extensión en el panel Extensiones.

Una vez instalado, se abrirá una nueva pestaña con el panel de Sincronización de configuración.

Paso 2: autoriza el acceso a Github

Para comenzar con Github, haga clic en el botón Iniciar sesión con Github en el panel de Sincronización de configuración.

Esto abrirá Github en su navegador web predeterminado y le pedirá que inicie sesión. Si bien puede usar cualquier cuenta de Github que desee, probablemente tenga más sentido usar su cuenta personal.

Una vez que haya iniciado sesión, debería ver Éxito. en su navegador.

Paso 3: sube tu configuración actual

Ahora que está conectado a Github, está listo para cargar su configuración.

Abra su paleta de comandos con CMD + Shift + P (en Mac) o navegue hasta Ver y paleta de comandos. Escriba "Sync Upload" que filtrará los comandos y presione enter una vez que se seleccione la opción Sync: Update / Upload Settings .

Al hacer esto, es posible que se le solicite una pantalla que le pregunte si desea forzar la carga; presione .

En este punto, Settings Sync creará un nuevo Gist en su cuenta de Github con sus ajustes de configuración. Una vez hecho esto, debería ver un mensaje de éxito.

¡Ahora debería poder visitar gist.github.com y encontrar un nuevo cloudSettingsGist privado que incluya todas las configuraciones de VS Code!

Paso 4: sincronizar su configuración con otro entorno

Para sincronizar su configuración de VS Code con otra computadora o entorno de VS Code, primero debe seguir los pasos 1 y 2 anteriores: instalar la extensión e iniciar sesión en Github.

La diferencia es que esta vez, querrá configurar VS Code para descargar su configuración en lugar de cargarla.

Para comenzar, primero abra una copia de seguridad de su panel de configuración de sincronización. Si se trata de una nueva instalación como la que estamos asumiendo aquí, puede abrir la paleta de comandos y escribir "descargar sincronizar" y presionar enter, que abrirá ese panel de control. Aquí, haga clic en Editar configuración esta vez.

En esta pantalla, debería ver su token de acceso de Github , pero también debería ver un campo vacío para Gist ID. Aquí, primero queremos obtener el ID de nuestra URL de Gist de CloudSettings:

Y luego pegue ese valor dentro de nuestra entrada Gist ID en VS Code.

Una vez que esté allí, puede abrir la paleta de comandos nuevamente, escribir "descargar sincronizar" y presionar enter, y Sync Settings obtendrá su configuración de VS Code de Gist y actualizará su configuración local con esa configuración.

Paso 5: actualización de su configuración

A partir de aquí, cada vez que desee realizar un nuevo cambio en su configuración almacenada, querrá usar las funciones Actualizar / Cargar y Descargar como usamos anteriormente.

Para actualizar un nuevo ajuste a su configuración, escriba "sincronización de actualización" y presione enter:

Y para descargar su configuración para sincronizar otro editor, escriba "descargar sincronizar" y presione enter:

Estos comandos actualizarán su CloudSettings Gist y descargarán de él para sincronizar sus instancias de VS Code

¿Cuál es tu truco favorito de VS Code?

¡Compártelo conmigo en Twitter!

Unirse a la conversación

Si eres como yo, ¿te gusta la configuración de @code de una manera muy específica, incluido tu tema y extensiones? ‍?

Pero si haces malabarismos con entornos diferentes, ¿puede ser complicado actualizarlos todos? ‍♂️

¿Cómo sincronizar la configuración de VS Code para todas las cosas? # Webdev // t.co / RRjwiU8Sul

- Colby Fayock (@colbyfayock) 16 de junio de 2020

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín