Article original : How to Sync VS Code Settings Between Multiple Devices and Environments
Tous les développeurs aiment leur éditeur de texte d'une certaine manière, mais il peut être difficile de s'assurer que tous vos environnements ont la même configuration. Comment pouvons-nous nous assurer que notre configuration VS Code est la même partout où nous l'utilisons ?
- Qu'est-ce que VS Code ?
- Que allons-nous utiliser ?
- Comment cela fonctionne-t-il ?
- Étape 1 : Installer Settings Sync
- Étape 2 : Autoriser l'accès à Github
- Étape 3 : Télécharger vos paramètres actuels
- Étape 4 : Synchroniser votre configuration vers un autre environnement
- Étape 5 : Mettre à jour votre configuration
Qu'est-ce que VS Code ?
Visual Studio Code, ou VS Code, est un éditeur de code tout-en-un qui prend toutes les fonctionnalités que vous souhaitez pour travailler avec du code et les met dans un seul éditeur pour vous rendre ultra-productif.
Éditeur VS Code
Il est le "cool kid on the block" depuis un certain temps et sa popularité ne cesse de croître, au moins dans la communauté JavaScript. Microsoft a mis beaucoup d'efforts pour en faire quelque chose que les gens veulent utiliser (et ils font du très bon travail).
Que allons-nous utiliser ?
Nous allons utiliser une extension VS Code appelée Settings Sync qui utilise la fonctionnalité Gist de Github pour stocker un fichier de configuration JSON privé dans le cloud.
Comment cela fonctionne-t-il ?
L'extension utilise l'OAuth de Github pour se connecter à votre compte Github. Une fois approuvé, VS Code obtient un jeton d'accès et atteint à la fois pour stocker et télécharger votre fichier de paramètres vers un Gist Github privé.
Une fois configuré, vous pouvez ensuite configurer l'extension sur toute autre instance de VS Code et immédiatement télécharger votre configuration pour synchroniser votre éditeur.
Étape 0 : VS Code
Nous supposerons pour ce guide que vous avez déjà installé VS Code. Bien que vous n'ayez pas besoin d'avoir une configuration spéciale, avoir quelque chose de différent de la configuration par défaut (comme un thème de couleur) vous aidera à voir comment cela fonctionne.
Commençons !
Étape 1 : Installer Settings Sync
La première chose que nous devons faire est d'installer l'extension. Vous pouvez le faire de plusieurs manières — vous pouvez visiter la page web et cliquer sur Installer ce qui ouvrira VS Code ou vous pouvez rechercher l'extension dans le panneau des extensions.
Extension VS Code Settings Sync
Une fois installée, elle ouvrira un nouvel onglet avec le tableau de bord Settings Sync.
Tableau de bord Settings Sync après l'installation
Étape 2 : Autoriser l'accès à Github
Pour commencer avec Github, cliquez sur le bouton Se connecter avec Github dans le tableau de bord Settings Sync.
Se connecter à Settings Sync avec Github
Cela ouvrira Github dans votre navigateur web par défaut et vous demandera de vous connecter. Bien que vous puissiez utiliser n'importe quel compte Github, il serait probablement plus judicieux d'utiliser votre compte personnel.
Connexion réussie à Github pour Settings Sync
Une fois connecté, vous devriez maintenant voir Succès ! dans votre navigateur.
Étape 3 : Télécharger vos paramètres actuels
Maintenant que vous êtes connecté à Github, vous êtes prêt à télécharger vos paramètres.
Ouvrez votre Palette de commandes avec CMD+Shift+P (sur Mac) ou naviguez vers Affichage et Palette de commandes. Tapez "Sync Upload" ce qui filtrera les commandes et appuyez sur entrée une fois que l'option Sync: Update/Upload Settings est sélectionnée.
Commande Update/Upload Settings dans Settings Sync
En faisant cela, vous pourriez être invité avec un écran qui demande si vous voulez forcer le téléchargement — appuyez sur Oui.
Forcer le téléchargement des nouveaux paramètres dans Settings Sync
À ce stade, Settings Sync créera un nouveau Gist dans votre compte Github avec vos paramètres de configuration. Une fois terminé, vous devriez voir un message de succès.
Téléchargement réussi des paramètres dans Settings Sync
Vous devriez maintenant pouvoir visiter gist.github.com et trouver un nouveau Gist privé cloudSettings qui inclut tous vos paramètres VS Code !
Étape 4 : Synchroniser votre configuration vers un autre environnement
Pour synchroniser votre configuration VS Code vers un autre ordinateur ou environnement VS Code, vous devez d'abord suivre les étapes 1 et 2 ci-dessus — installer l'extension et vous connecter à Github.
La différence est que cette fois, vous voulez configurer VS Code pour télécharger vos paramètres au lieu de les téléverser.
Pour commencer, ouvrez à nouveau votre tableau de bord Sync Settings. Si c'est une nouvelle installation comme nous le supposons ici, vous pouvez ouvrir la Palette de commandes et taper "sync download" et appuyer sur entrée ce qui ouvrira ce tableau de bord. Ici, cliquez sur Modifier la configuration cette fois.
Modifier la configuration de Settings Sync
Sur cet écran, vous devriez voir votre Github Access Token, mais vous devriez également voir un champ vide pour l'ID de Gist. Ici, nous voulons d'abord récupérer l'ID de notre URL de Gist cloudSettings :
ID du Gist cloudSettings de VS Code
Puis collez cette valeur dans notre champ Gist ID dans VS Code.
Ajout de l'ID de Gist à la configuration de Settings Sync
Une fois qu'il est là, vous pouvez ouvrir à nouveau la Palette de commandes, taper "sync download", et appuyer sur entrée, et Sync Settings récupérera votre configuration VS Code depuis le Gist et mettra à jour vos paramètres locaux avec cette configuration !
Étape 5 : Mettre à jour votre configuration
À partir de maintenant, chaque fois que vous voulez apporter une nouvelle modification à votre configuration stockée, vous devrez utiliser à la fois les fonctionnalités Update/Upload et Download comme nous l'avons fait ci-dessus.
Pour mettre à jour une nouvelle modification de votre configuration, tapez "sync update" et appuyez sur entrée :
Commande de mise à jour pour Settings Sync
Et pour télécharger votre configuration afin de synchroniser un autre éditeur, tapez "sync download" et appuyez sur entrée :
Commande de téléchargement des paramètres pour Settings Sync
Ces commandes mettront à jour votre Gist cloudSettings et téléchargeront depuis celui-ci pour synchroniser vos instances VS Code.
Quel est votre truc préféré avec VS Code ?
Partagez-le avec moi sur Twitter !
