Zum Hauptinhalt springen

Wie richte ich Snippets in Vs Code ein

VS Code — einer der beliebtesten Texteditoren unter den Entwicklern. Dank seiner zahlreichen Funktionen und Anpassungsmöglichkeiten können Sie die Arbeitseffizienz erheblich erhöhen. Snippets sind eine solche Funktion, mit der Sie das Schreiben von Code erheblich beschleunigen können. In diesem Artikel erfahren Sie, wie Sie Snippets in VS Code einrichten und verwenden, um die Leistung zu verbessern.

Schnipsel in VS Code handelt es sich um Codeausschnitte, die mit Hilfe von speziellen Schlüsselwörtern eingefügt werden können. Anstatt beispielsweise den vollständigen Code für die Gestaltung einer Funktion zu schreiben, können Sie ein Snippet verwenden, indem Sie ein Schlüsselwort eingeben und im Editor auf die entsprechende Eingabeaufforderung klicken. Dies ist besonders praktisch, wenn Sie während der Arbeit häufig dieselben Codeausschnitte verwenden müssen.

Anpassen von Snippets in VS ist der Code sehr einfach. Der Editor verwendet dazu eine spezielle Datei .code-snippets. Sie müssen zuerst die Befehlspalette öffnen— indem Sie dazu auf klicken Ctrl + Shift + P unter Windows oder Cmd + Shift + P auf macOS. Geben Sie nach dem Öffnen der Befehlspalette Folgendes ein "Preferences: Configure User Snippets" und wählen Sie diesen Befehl aus.

Sie können in dieser Datei ein neues Snippet erstellen oder ein vorhandenes Snippet ändern. Das Snippet-Schreibformat ist sehr einfach: ein Schlüsselwort und ein entsprechendes Code-Snippet. Sie können auch die erforderlichen Argumente und Standardwerte angeben. Nachdem Sie die Datei gespeichert haben, sind die Snippets sofort im Editor verfügbar.

VS-Code installieren

Sie müssen Visual Studio Code installieren, bevor Sie die Snippets konfigurieren. Befolgen Sie dazu die nachstehenden Anweisungen:

  1. Rufen Sie die offizielle Visual Studio Code-Website auf https://code.visualstudio.com /.
  2. Klicken Sie je nach Betriebssystem auf die Schaltfläche "Download für Windows" oder "Download für Mac".
  3. Nachdem Sie die Installationsdatei heruntergeladen haben, öffnen Sie sie und befolgen Sie die Anweisungen zum Installieren von VS Code.
  4. Öffnen Sie nach der Installation von Visual Studio Code das Programm.

Jetzt haben Sie Visual Studio Code installiert und können mit dem Einrichten von Snippets beginnen.

Öffnen des Editors

Bevor Sie mit dem Einrichten von Snippets beginnen, müssen Sie den VS Code-Editor öffnen und zu den Benutzereinstellungen wechseln. Führen Sie dazu die folgenden Schritte aus:

  1. Starten Sie Visual Studio Code.
  2. Öffnen Sie das Menü "Datei" in der oberen Navigationsleiste.
  3. Wählen Sie "Einstellungen" oder drücken Sie eine Tastenkombination Ctrl + ,.

Nachdem Sie diese Schritte ausgeführt haben, wird ein Fenster mit den Visual Studio Code-Einstellungen geöffnet.

Installieren der Erweiterung "Snippet Generator"

Um mit Snippets in VS Code zu beginnen, müssen Sie die Erweiterung "Snippet Generator" installieren. Dadurch können Sie Ihre eigenen Snippets in einer benutzerfreundlichen visuellen Umgebung erstellen und bearbeiten.

Führen Sie die folgenden Schritte aus, um die Erweiterung zu installieren:

  1. Öffnen Sie VS Code und gehen Sie zum Abschnitt "Extensions" (Erweiterungen).
  2. Geben Sie "Snippet Generator" in die Suchleiste ein und drücken Sie die Eingabetaste.
  3. Suchen Sie die Erweiterung "Snippet Generator" bei der Suche und klicken Sie auf die Schaltfläche "Install" (Installieren).
  4. Wenn die Installation abgeschlossen ist, klicken Sie auf die Schaltfläche "Neu laden", um die Erweiterung zu aktivieren.

Die Erweiterung "Snippet Generator" wurde jetzt erfolgreich installiert und kann jetzt verwendet werden. Sie können beginnen, Ihre eigenen Snippets zu erstellen oder bereits vorhandene zu bearbeiten.

Erstellen eines Snippets

  1. Öffnen Sie den VS Code Editor.
  2. Wählen Sie im oberen Menü den Befehl Datei aus und wechseln Sie zu Optionen, oder verwenden Sie eine Tastenkombination Ctrl + ,.
  3. Wählen Sie im daraufhin angezeigten Fenster "Optionen" aus der Liste Einstellungen den Texteditor aus.
  4. Konfigurieren Sie die Snippet-Optionen wie "prefix" (eine Kombination aus Symbolen, die das Snippet erweitern) und "body" (vollständiger Codeausschnitt).
  5. Speichern Sie das Snippet, indem Sie im oberen Menü "Datei" auswählen und zum Abschnitt "Snippet speichern" wechseln.

Sobald das Snippet erstellt wurde, ist es zur Entwurfszeit verfügbar und Sie können es verwenden, indem Sie eine Kombination von Zeichen eingeben, die dem angegebenen "prefix" entspricht. Das Erstellen eigener Snippets kann Ihren Workflow erheblich beschleunigen und dazu beitragen, dass die gleichen Codefragmente nicht wiederholt werden.

Verwenden eines Snippets

Nachdem Sie das Snippet in Visual Studio Code konfiguriert haben, können Sie es verwenden, um Code schnell und einfach einzufügen.

Um das Snippet zu verwenden, geben Sie das entsprechende Präfix in einen Texteditor ein. Nachdem Sie das Präfix eingegeben haben, sollte eine Eingabeaufforderung mit möglichen Snippets angezeigt werden. Wählen Sie die gewünschte Option aus und drücken Sie die Eingabetaste.

Das Snippet wird in den Codebereich eingefügt und Sie können es mit den erforderlichen Informationen ergänzen oder einfach mit dem Code weiterarbeiten.

Wenn Sie zusätzliche Codeblöcke basierend auf dem Snippet generieren möchten, aktivieren Sie die automatische Codevervollständigung. Öffnen Sie dazu die VS-Code-Einstellungen, suchen Sie den Abschnitt "Editor: Tab Completion" und setzen Sie den Wert auf "on" oder "onlySnippets". Nachdem Sie nun das Snippet-Präfix eingegeben und die Tabulatortaste gedrückt haben, wird der nächste Codeblock mit den gewünschten Zusätzen eingefügt, was den Entwicklungsprozess erheblich beschleunigen kann.

Die Verwendung von Snippets in VS Code kann Ihre Leistung erheblich verbessern und die Menge an Code reduzieren, die Sie eingeben. Lesen Sie die Snippet-Dokumentation, um mehr über die Funktionen und anpassbaren Optionen zu erfahren.

HandlungTastatur
Einfügen eines SnippetsGeben Sie das Snippetpräfix ein und drücken Sie die Eingabetaste
Generieren zusätzlicher CodeblöckeGeben Sie das Snippetpräfix ein und drücken Sie die Tabulatortaste

Anpassen von Snippets

VS Code bietet eine bequeme Möglichkeit, Snippets an Ihre Bedürfnisse anzupassen. Sie können Snippets personalisieren, indem Sie eigenen Code und Parameter hinzufügen.

Die Personalisierung von Snippets beginnt mit dem Öffnen der VS Code-Einstellungen. Dazu müssen Sie den Menüpunkt "Datei" auswählen und im Kontextmenü "Einstellungen" auswählen.

Im geöffneten Einstellungsfenster müssen Sie den Abschnitt "Snippets" auswählen und auf die Schaltfläche "Snippets bearbeiten" klicken. Anschließend wird eine Snippet-Datei geöffnet, in der Sie Ihre Snippets hinzufügen, ändern oder löschen können.

Das Erstellen eines eigenen Snippets beginnt mit der Angabe seines Namens. Geben Sie dann das Präfix an, das zum Aufrufen des Snippets verwendet werden soll. Als nächstes müssen Sie den Umfang des Snippets angeben. Sie können "global" auswählen, um das Snippet auf alle Dateien anzuwenden, oder Sie können eine bestimmte Programmiersprache angeben, in der das Snippet ausgeführt werden soll.

Nachdem Sie den Gültigkeitsbereich angegeben haben, können Sie mit dem Schreiben des Snippet-Codes beginnen. Sie können spezielle Variablen im Snippet-Code verwenden, z. B. $1, $2 usw. Mit denen Sie festlegen können, wo benutzerdefinierter Code eingefügt werden soll. Sie können auch Bedingungen und Zyklen verwenden, um das Snippet flexibler und bequemer zu machen.

Sie können auch benutzerdefinierte Snippets importieren oder in Dateien exportieren. Dies macht es einfach, Ihre Snippets mit anderen Entwicklern zu teilen oder sie an einem sicheren Ort auf Ihrem Computer zu speichern.

ParameterDie Beschreibung
prefixDas Präfix, das zum Aufrufen des Snippets verwendet wird
bodySnippet-Code
descriptionDie Beschreibung des Snippets, das angezeigt wird, wenn Sie ihn auswählen

Durch die Personalisierung von Snippets in VS Code können Sie die Arbeit erheblich beschleunigen, die Codierung verbessern und den Entwicklungsprozess effizienter gestalten.