Skapa en VS-Kod Tema

0
30

Alla har en speciell och kanske särskilt, smak när det kommer till deras kod-editorn. Det finns bokstavligen tusentals teman ur det, och av goda skäl: en sak av skönhet och förbättring av produktiviteten för en kan vara ett hinder för en annan.

Det har varit en punkt på min bucket list för att skapa mitt eget tema. Jag var kodning mycket sent en kväll, långt in på små timmarna av morgonen. Alla i mitt hus låg och sov och så, som vanligt, den enda ljuset var skenet av min skärm. Jag vet att det inte nödvändigtvis frisk för att koden ut så här, men det är bokstavligen när jag är som mest produktiv: det är minimalt med distraktioner, som jag inte har att göra med arbete grejer, familj grejer, vän grejer, eller valp grejer. Jag kan inte fokusera.

Jag hade vissa inställningar ställa in för temat jag hade varit med, och även om de alla arbetade bra för dagtid eller planet rider, kände jag alltid att det var något som saknades för sent på kvällen kodning sessioner. Jag bestämde att det var dags att craft mitt eget tema.

Vi pratar först om den allmänna processen för att skapa ett tema om du vill skapa en egen, och då ska vi dyka i några av forskning och tester som gick in mitt i allt att kika in i processen.

Fire It Up

Innan du gör något, du ska installera vsce (kort för Visual Studio Kod Tillägg) och etablera dig själv som en utgivare. Alla instruktioner att göra så här. Jag vet att det ser ut som mycket, men det tar allt från 5-10 minuter, och sedan kommer du aldrig behöva göra det igen, för varje tillägg som du skapar.

Nu när du har fått det under bältet, här är de steg du behöver för att börja arbeta.

Först, du behöver för att köra:

npm install-g yo generator-kod

Detta gör att generatorn globalt tillgängliga på datorn (vilket innebär att du kan nu skapa ett tema i någon katalog). Du kan sedan utföra detta kommando för att sparka igång ditt tema:

yo-kod

Du kommer att bli tillfrågad av en skärm som ser ut så här:

Observera att jag har använt pilarna här för att navigera till den “Nya Färg Temat” alternativ. Notera också att detta är hur du vill göra något annat filtillägg.

När du väljer detta, det frågar om detta är ett nytt tema eller om vi vill importera från en befintlig. Vi vill skapa en ny.

Nästa, du måste svara på några andra frågor, bland annat:

  • Vad är filändelse namn?
  • Vad är det identifierare? (Jag gick bara med namn, det är nog typiskt.)
  • Vad är det för beskrivning? (Jag bara sätta något dumt i början. Oroa dig inte, du kan uppdatera detta i ditt paket.json i framtiden.)
  • Vad är utgivarens namn? (Se tidigare anvisningar.)
  • Vilket namn som ska visas för användaren? (Jag använde samma som förlängning namn.)
  • Är detta tema mörk, ljus eller hög kontrast?

Det kommer att ställa dig upp med en bas tema att börja flå din färg. Full scoop och alla detaljer finns här. Mer information om teman i allmänhet är här.

Provkörning

Vi har vår bas tema och vi har en del begrepp för paletten. Så, hur gör vi för att testa det? När du öppnar katalogen med ditt tema kan du trycka på fn + f5 på Mac (eller f5 på Windows) och ett nytt fönster omedelbart öppnas där du kan testa ditt tema! Du kommer att se i det ursprungliga temat fönster som du nu har en liten kontrollpanel där du kan ladda upp, pausa och stoppa. Glöm inte att spara innan du gör!