Sådan synkroniseres VS-kodeindstillinger mellem flere enheder og miljøer

Alle udviklere kan lide deres teksteditor på en bestemt måde, men det kan være svært at sikre, at alle dine miljøer har den samme konfiguration. Hvordan kan vi sikre os, at vores VS-kodekonfiguration er den samme, uanset hvor vi bruger den?

  • Hvad er VS-kode?
  • Hvad vil vi bruge?
  • Hvordan virker det?
  • Trin 1: Installer synkronisering af indstillinger
  • Trin 2: Godkend adgang til Github
  • Trin 3: Upload dine aktuelle indstillinger
  • Trin 4: Synkronisering af din konfiguration til et andet miljø
  • Trin 5: Opdatering af din konfiguration

Hvad er VS-kode?

Visual Studio Code, eller VS Code, er en altomfattende kodeditor, der tager alle de funktioner, du ønsker, ud af at arbejde med kode og placerer dem i en editor for at gøre dig ultraproduktiv.

Det har været det ”seje barn på blokken” i et stykke tid nu og er blevet mere og mere populært i det mindste i JavaScript-samfundet. Microsoft har lagt en stor indsats i at gøre det til noget, folk ønsker at bruge (og de gør et godt stykke arbejde på det).

Hvad vil vi bruge?

Vi bruger en VS-kodeudvidelse kaldet Settings Sync, der bruger Githubs Gist-funktion til at gemme en privat JSON-konfigurationsfil i skyen.

Hvordan virker det?

Udvidelsen bruger Githubs OAuth til at logge ind på din Github-konto. Når den er godkendt, opnår VS Code et adgangstoken og når ud til både at gemme og downloade din indstillingsfil til en privat Github Gist.

Når den er konfigureret, kan du derefter konfigurere udvidelsen på enhver anden forekomst af VS-kode og straks downloade din konfiguration for at synkronisere din editor.

Trin 0: VS-kode

Vi antager, at du for dette gennemgang har VS-kode allerede installeret. Mens du ikke behøver at have nogen speciel konfiguration, kan det have noget andet end standard (som et farvetema) at se det arbejde.

Lad os komme igang!

Trin 1: Installer synkronisering af indstillinger

Den første ting, vi skal gøre, er at installere udvidelsen. Du kan gøre dette på et par måder - du kan besøge websiden og trykke på Installer, som åbner VS-kode, eller du kan søge efter udvidelsen i panelet Udvidelser.

Når det er installeret, åbner det en ny fane med Dashboard til indstillingssynkronisering.

Trin 2: Godkend adgang til Github

For at komme i gang med Github skal du klikke på knappen Login med Github i dashboardet Indstillinger synkronisering.

Dette åbner Github i din standardwebbrowser og beder dig om at logge ind. Mens du kan bruge en hvilken som helst Github-konto, du ønsker, ville det sandsynligvis være mest fornuftigt at bruge din personlige konto.

Når du er logget ind, skal du nu se Succes! i din browser.

Trin 3: Upload dine aktuelle indstillinger

Nu hvor du har forbindelse til Github, er du klar til at uploade dine indstillinger.

Åbn din kommandopalette med CMD + Shift + P (på Mac), eller gå til Vis og kommandopalette. Skriv “Synkroniser upload”, som filtrerer kommandoerne, og tryk på enter, når indstillingen Synkroniser: Opdater / upload er valgt.

Når du gør dette, bliver du muligvis bedt om et skærmbillede, der spørger, om du vil tvinge upload - tryk på Ja .

På dette tidspunkt opretter Settings Sync en ny Gist i din Github-konto med dine konfigurationsindstillinger. Når det er gjort, skal du se en succesmeddelelse.

Du skal nu være i stand til at besøge gist.github.com og finde en ny privat cloudSettingsGist, der inkluderer alle dine VS- kodeindstillinger !

Trin 4: Synkronisering af din konfiguration til et andet miljø

For at synkronisere din VS-kodekonfiguration til en anden computer eller et VS-kode-miljø, skal du først følge trin 1 og 2 ovenfor - installere udvidelsen og logge på Github.

Forskellen er denne gang, du vil konfigurere VS-kode til at downloade dine indstillinger i stedet for at uploade dem.

For at komme i gang skal du først åbne dit Dashboard til synkroniseringsindstillinger. Hvis dette er en ny installation, som vi antager her, kan du åbne kommandopaletten og skrive "sync download" og trykke på enter, som åbner dashboardet. Klik her på Rediger konfiguration denne gang.

På denne skærm skal du se dit Github Access Token , men du skal også se et tomt felt til Gist ID. Her vil vi først hente ID'et fra vores cloudSettings Gist URL:

Og indsæt derefter denne værdi inde i vores Gist ID- input i VS-kode.

Når den er der, kan du åbne kommandopaletten igen, skrive “sync download” og trykke på enter, og Sync Settings vil hente din VS-kodekonfiguration fra Gist og opdatere dine lokale indstillinger med den konfiguration!

Trin 5: Opdatering af din konfiguration

Herfra og når som helst du vil foretage en ny ændring af din gemte konfiguration, vil du bruge både opdaterings- / upload- og downloadfunktionerne som vi brugte ovenfor.

For at opdatere en ny tweak til din konfiguration, skriv "synkroniser opdatering" og tryk enter:

Og for at downloade din konfiguration for at synkronisere en anden editor, skriv "synkroniser download" og tryk enter:

Disse kommandoer opdaterer begge din cloudSettings Gist og downloader den for at synkronisere dine VS-kode-forekomster

Hvad er dit foretrukne VS-kodetrick?

Del det med mig på Twitter!

Deltag i samtalen

Hvis du er som mig, kan du lide dine @code-indstillinger på en meget specifik måde inkl. Dit tema og udvidelser???

Men hvis du jonglerer med forskellige miljøer, kan det være en smerte at opdatere dem alle? ‍♂️

Sådan synkroniseres dine VS-kodeindstillinger for alle tingene? # Webdev // t.co / RRjwiU8Sul

- Colby Fayock (@colbyfayock) 16. juni 2020

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev