Het maken van een VS-Code Thema

0
11

Iedereen heeft een speciale en misschien wel vooral, smaakt als het gaat om hun code-editor. Er zijn letterlijk duizenden van thema ‘ s die er zijn, en voor een goede reden: een ding van schoonheid en verhoging van de productiviteit voor de een kan het een belemmering voor de andere.

Het is alweer een item van mijn bucket list te maken van mijn eigen thema. Ik was codering zeer laat in de nacht tot in de kleine uurtjes van de ochtend. Iedereen in mijn huis lag te slapen en dus, zoals gewoonlijk, het enige licht was de gloed van mijn scherm. Ik weet dat het niet gezond is om de code zoals deze, maar het is letterlijk de tijd ben ik het meest productief: er zijn minimale afleiding, ik ben niet te maken met het werk van spullen, familie dingen, vriend spul, of puppy spullen. Ik kan concentreren.

Ik had een aantal voorkeuren instellen voor het thema dat ik gebruik had gemaakt en, hoewel ze goed gewerkt voor overdag of met het vliegtuig rijdt, ik had altijd het gevoel dat er iets ontbrak voor de late night-codering sessies. Ik besloot dat het tijd was om ambachtelijke mijn eigen thema.

We zullen eerst praten over het algemene proces voor het maken van een thema in het geval dat u wilt maken van uw eigen, en dan zullen we een duik nemen in een aantal van de onderzoeken en tests die ging in de mijne in het bijzonder om een kijkje te nemen in het proces.

Fire It Up

Voordat je iets, je gaat installeren vsce (afkorting voor Visual Studio Code Extensies) en stellen zelf als uitgever. Alle instructies om dit te doen zijn hier. Ik weet dat dit lijkt veel, maar het duurt ergens tussen de 5-10 minuten en je zult nooit meer opnieuw te doen, voor elke extensie die u maakt.

Nu heb je dat onder de riem, hier zijn de stappen die u nodig hebt om te beginnen met werken.

Eerste, moet u het volgende uitvoeren:

npm installeren -g yo generator-code

Dit maakt de generator wereldwijd beschikbaar zijn op uw machine (wat betekent dat u nu kunt maken van een thema in een map). Vervolgens kunt u deze opdracht uitvoert voor de aftrap van het thema:

yo code

U zal worden gevraagd door een scherm dat er als volgt uitziet:

Opmerking die ik heb gebruikt de pijlen hier om te navigeren naar de “Nieuwe Kleur Thema” optie. Merk ook op dat dit is hoe u wilt er een andere extensie.

Bij het selecteren van deze, het vraagt of dit is een nieuw thema of als we willen importeren uit een bestaande. We willen een nieuwe aan te maken.

Volgende, je moet antwoorden op een paar andere vragen, zoals:

  • Wat is de extensie van de naam?
  • Wat is id? (Ik ging met de naam, dat is waarschijnlijk typisch.)
  • Wat is het de beschrijving? (Ik zet er maar iets geks in eerste instantie. Maak je geen zorgen, kunt u dit in uw pakket.json in de toekomst.)
  • Wat is de naam van de uitgever? (Zie eerdere instructies.)
  • Welke naam moet worden weergegeven aan de gebruiker? (Ik gebruikte dezelfde als de extensie naam.)
  • Dit thema donker, licht of hoog contrast?

Het zal u met een basis thema om te beginnen met het villen van uw kleur voorkeuren. De volledige scoop en alle details zijn hier. Meer informatie over de thema ‘ s in het algemeen zijn hier.

Test Drive

We hebben onze basis-thema en we hebben een aantal concepten voor het palet. Zo, hoe we testen het uit? Wanneer u open de map met uw thema kunt u op fn + f5 te drukken op de Mac (of f5 op Windows) en een nieuw venster onmiddellijk verschijnt geopend, waar je kunt testen of uw thema! Je ziet in het oorspronkelijke thema van het venster dat u nu een beetje een control panel waar je kan laden, pauzeren en stoppen. Vergeet niet op te slaan voor je doen!