Anpassen von Visual Studio-Code

Visual Studio Code, der neue Open-Source-Code-Editor von Microsoft, bietet Entwicklern viele beeindruckende Funktionen Erleichterung des Prozesses der Quelltextbearbeitung. Darüber hinaus sorgt Visual Studio Code auch dafür, dass sich die Benutzer nicht langweilen, wenn sie damit arbeiten Passen Sie mehrere Teile des Erscheinungsbildes an, wie Farben, Schriftarten, Abstände und Textformatierungen, genau wie viele andere Funktionen, wie z fusseln und Gültigkeitsregeln.

In diesem Beitrag werden wir uns zuerst anschauen So ändern Sie das Aussehen des Visual Studio Code-Arbeitsbereichs, dann zeige ich Ihnen, wie Sie die Standardeinstellungen mit Hilfe von zwei anpassen JSON-formatierte Konfigurationsdateien.

So legen Sie ein Farbdesign für den VS-Code fest

Visual Studio Code ermöglicht es Ihnen Legen Sie ein benutzerdefiniertes Farbschema fest für Ihren Editor.

Um ein vorgefertigtes Design zu verwenden, klicken Sie auf Datei> Voreinstellungen> Farbdesign Menü in der oberen Menüleiste. Wenn du schlägst “Eingeben”, Die Befehlspalette wird eingeblendet und zeigt eine Dropdown-Liste der Designs an, aus denen Sie auswählen können.

Sie können den gleichen Effekt erzielen, wenn Sie drücken F1 um die Befehlspalette zu öffnen, und geben Sie die Einstellungen: Farbthema Befehl in das Eingabefeld.

Wenn Sie über die Optionen in der Dropdown-Liste fahren, Das Aussehen des Arbeitsbereichs ändert sich in Echtzeit, So können Sie schnell erkennen, welches Thema am besten zu Ihnen passt.

Ich wähle das “Hoher Kontrast” Farbthema, da meine Augen nicht die besten sind. So sieht meine Sicht aus.

So installieren Sie ein Design von VS Code Marketplace

Wenn Ihnen eines der Farbdesigns, die VS Code standardmäßig anbietet, nicht gefällt, können Sie viele andere vom VS Code Marketplace herunterladen.

Hier können Sie die aktuellen Themen des Marketplace betrachten. Wenn Sie ein Design vom Marktplatz installieren möchten, klicken Sie auf F1 Klicken Sie direkt in den VS-Code-Editor, um die Befehlspalette zu öffnen ext installieren Befehl in das Eingabefeld, wählen Sie schließlich die Erweiterungen: Installieren Sie die Erweiterung Option aus der Liste, die erscheint.

Wenn Sie auf diese Option klicken, wird eine neue Instanz der Befehlspalette angezeigt. Schreib die "ext install theme" Befehl in das neue Eingabefeld, und Sie werden es tun Holen Sie sich eine Liste aller Themen die auf dem VS Code Marketplace verfügbar sind.

Ich wähle das Thema aus “Material Theme Kit”, und installieren Sie es, indem Sie darauf klicken. Damit sich das neue Thema in der Liste der Farbdesigns befindet, müssen Sie an derselben Stelle wie die anderen Standarddesigns arbeiten Starten Sie VS Code erneut. Nach dem Neustart wird das neue Thema in der Themenliste angezeigt und Sie können es über die Befehlsleiste einstellen.

Mit dem neuen Material Theme sieht mein Editor jetzt so aus:

Sie können zum vorherigen Thema zurückkehren (wie ich es getan habe, weil ich das Thema immer noch vorziehen möchte), oder Sie können mit anderen Themen ein wenig mehr herumspielen, um zu sehen, welches für Sie am besten geeignet ist.

Wenn Sie möchten, können Sie auch Erstellen Sie Ihr eigenes Design, und veröffentlichen Sie es auf VS Code Marketplace mit dem Erweiterungsmanager-Tool vsce.

Ändern Sie die Benutzer- und Arbeitsbereichseinstellungen

Mit VS Code können Sie nicht nur ein benutzerdefiniertes Design festlegen, sondern auch viele andere Einstellungen konfigurieren, B. Formatierungsregeln, Verwendung verschiedener Funktionen, Absturzberichte, HTTP-Einstellungen, Dateizuordnungen, Linting-Regeln und mehr.

Sie können dies tun, indem Sie zwei Konfigurationsdateien im JSON-Format bearbeiten. Machen Sie sich keine Sorgen, Sie müssen kein Profi sein, denn VS Code bietet eine recht einfache und intuitive Möglichkeit, Ihre Anpassungen schnell hinzuzufügen.

Lassen Sie uns zunächst den Unterschied zwischen den beiden Konfigurationsdateien betrachten. VS Code hat zwei Bereiche (global und lokal) für Einstellungen, daher die zwei separaten Dateien:

1. der Globus einstellungen.json, in dem die Konfigurationsregeln für jeden Arbeitsbereich gültig sind
2. der Arbeitsbereich bezogen .vscode / einstellungen.json, das bezieht sich nur auf einen einzelnen Arbeitsbereich

Das global einstellungen.json Die Datei befindet sich in dem Ordner, in dem Ihr Betriebssystem alle anderen Konfigurationsdateien für die App speichert.

• unter Windows: % APPDATA% \ Code \ User \ settings.json
• unter Linux: $ HOME / .config / Code / User / settings.json
• auf dem Mac: $ HOME / Library / Anwendungsunterstützung / Code / User / settings.json

Das Arbeitsbereich bezogen einstellungen.json Die Datei wird im Ordner Ihres aktuellen Projekts gespeichert. Standardmäßig ist diese Datei nicht vorhanden, aber sobald Sie eine benutzerdefinierte Arbeitsbereichseinstellung hinzugefügt haben, erstellt VS Code eine .vscode / einstellungen.json Datei auf einmal und fügt benutzerdefinierte Workspace-spezifische Konfigurationen hinzu.

Wann verwendest du die einstellungen.json Dateien?

Wenn Sie möchten, dass VS Code Ihre benutzerdefinierten Konfigurationsregeln verwendet alles Ihre Projekte, setzen Sie sie in die globale einstellungen.json Datei.

Wenn Sie möchten, dass Ihre Einstellungen nur in Ihrem gültig sind derzeitiges Projekt, platzieren Sie sie in den Arbeitsbereich einstellungen.json Datei.

Arbeitsbereichseinstellungen überschreiben die globalen Einstellungen, also sei vorsichtig.

Globale Einstellungen werden aufgerufen “Benutzereinstellungen” im VS-Code. Öffnen Sie sie entweder durch Klicken auf Datei> Voreinstellungen> Benutzereinstellungen Menü oder indem Sie den Ausdruck eingeben “Benutzereinstellungen” in die Befehlspalette (mit F1 öffnen).

VS Code öffnet zwei Fenster nebeneinander: Das linke Fenster enthält alle Optionen, die konfiguriert werden können, und das rechte Fenster zeigt die globalen Optionen an einstellungen.json Datei. Sie müssen Ihre benutzerdefinierten Konfigurationsregeln in diese Datei einfügen.

Wie Sie sehen, brauchen Sie nichts weiter zu tun. Kopieren Sie die Einstellungen, die Sie ändern möchten, von links nach rechts und fügen Sie die geänderten Werte hinzu.

Sehen wir uns ein kurzes Beispiel an (Sie können jedoch auch andere Modifikationen entsprechend Ihren individuellen Bedürfnissen vornehmen). Ich werde die Schriftfamilie ändern, die Länge von a reduzieren Tab Reduzieren Sie die maximale Anzahl der Arbeitsdateien von vier auf zwei Leerzeichen, und ändern Sie eine der CSS-Linting-Regeln für Duplikate "ignorieren" zu "Warnung".

Nach dem Einfügen von Text meine globalen einstellungen.json Datei sieht so aus:

 // Platzieren Sie Ihre Einstellungen in dieser Datei, um die Standardeinstellungen "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" zu überschreiben : "Warnung" 

Nach dem Speichern der geänderten einstellungen.json Datei, das Aussehen meines Editors ändert sich sofort (auf dem Screenshot unten ist nur die Änderung der Schriftfamilie sichtbar):

Sie können die Arbeitsbereich-Einstellungen auf ähnliche Weise ändern. Nun müssen Sie auf die Schaltfläche klicken Datei> Voreinstellungen> Arbeitsbereich-Einstellungen in der oberen Menüleiste, um auf den Arbeitsbereich zuzugreifen .vscode / einstellungen.json Datei.

Arbeitsbereich-Einstellungen haben genau die gleichen Konfigurationsoptionen wie Benutzereinstellungen, und Sie können dieselbe Kopiermethode verwenden. Es gibt nur zwei Unterschiede, den Geltungsbereich (lokal statt global) und den einstellungen.json Datei, in der Ihre benutzerdefinierten Konfigurationen gespeichert werden.