Erstellen einer VS-Code-Thema

0
11

Jeder hat Besondere, und vielleicht insbesondere, Geschmack, wenn es um Ihren code-editor. Es gibt buchstäblich Tausende von Themen gibt, und das aus gutem Grund: ein Ding von Schönheit und Verbesserung der Produktivität für einen kann ein Hindernis sein zum anderen.

Es war ein Punkt auf meiner bucket list zu erstellen von meinem eigenen Thema. Ich war Kodierung sehr spät eine Nacht, bis in die kleinen Stunden des morgens. Jeder in meinem Haus schlafen und wurde also, wie üblich, das einzige Licht war die Glut von meinem Bildschirm. Ich weiß, es ist nicht unbedingt gesund zu code wie diesem, aber es ist buchstäblich die Zeit bin ich am produktivsten: gibt es nur minimale Ablenkungen, ich bin nicht der Umgang mit Werk Zeug, Familie, Freund-Zeug, oder Welpen Zeug. Ich kann den Fokus.

Ich hatte einige Einstellungen für das theme, das ich hatte, und, obwohl Sie alle funktionierte gut für tagsüber oder Flugzeug Fahrten, habe ich immer das Gefühl, dass etwas fehlte für late-night-coding-sessions. Ich beschloss, es war Zeit zum basteln mein eigenes Thema.

Reden wir zuerst über den Allgemeinen Prozess zum erstellen eines Designs in Fall, dass Sie möchten, um zu erstellen Ihre eigenen, und dann werden wir Tauchen Sie ein in einige der Forschung und Tests, die ging in die mine, insbesondere um Einblick in den Prozess.

Fire It Up

Bevor Sie etwas tun, sind Sie gehen zu installieren vsce (kurz für Visual Studio-Code-Erweiterungen) und etablieren sich als Verleger. Alle Anweisungen dazu hier. Ich weiß, es sieht aus wie eine Menge, aber es dauert überall von 5 bis 10 Minuten, und dann wirst du nie haben, es wieder zu tun, für jede Erweiterung, die Sie erstellen.

Nun, du hast, dass Sie unter Ihrem Gürtel, sind hier die Schritte, die Sie brauchen, um mit der Arbeit beginnen.

Erste, Sie brauchen, um zu laufen:

npm install-g yo generator-code

Das macht der generator, die weltweit verfügbar auf Ihrem Computer (das heißt, Sie können jetzt erstellen Sie ein Thema in ein beliebiges Verzeichnis). Sie können dann führen Sie diesen Befehl aus, um kick-off-Ihr Thema:

yo code

Sie werden aufgefordert, von einem Bildschirm, der so aussieht:

Beachten Sie, dass ich die Pfeile hier, um zu navigieren, um die “Neue Farbe “Thema” – option. Beachten Sie auch, dass dies ist, wie würden Sie wollen, um eine andere Erweiterung.

Bei der Auswahl dieser, er fragt, ob dies ist ein neues Thema, oder wenn wir wollen, importieren Sie aus einer vorhandenen. Wir wollen eine neue zu erstellen.

Als Nächstes werden Sie zu beantworten haben, ein paar andere Fragen, einschließlich:

  • Was ist die Dateiendung den Namen?
  • Was ist den die id? (Ich ging mit dem Namen, das ist wohl typisch.)
  • Was ist den die Beschreibung? (Ich habe nur etwas albern wie anfangs. Mach dir keine sorgen, können Sie aktualisieren Sie diesen in Ihrem Paket.json in der Zukunft.)
  • Was ist der publisher-name? (Siehe frühere Anweisungen.)
  • Welcher name sollte dem Benutzer angezeigt werden? (Ich verwendet die gleiche wie die Erweiterung Namen.)
  • Ist dieses Thema, dunkel, hell, oder zu hoher Kontrast?

Es wird setzen Sie sich mit einem Basis-theme zu starten Häutung Ihre Farbe Präferenzen. Die vollständigen Eindruck und alle details sind hier. Mehr details über die Themen im Allgemeinen sind hier.

Test Drive

Wir haben unsere Basis-theme, und wir haben einige Konzepte für die palette. So, wie wir es testen? Wenn Sie das Verzeichnis öffnen, das mit Ihrem Thema, Sie können drücken Sie fn + f5 auf dem Mac (oder nur f5-Taste auf Windows) und ein neues Fenster sofort öffnet Sie, wo Sie können testen Sie Ihr Thema! Sie sehen in der ursprünglichen Thema Fenster, die Sie jetzt haben, ein wenig control-panel, wo Sie können neu laden, pause, und stop. Vergessen Sie nicht zu speichern, bevor Sie tun!