Wie füge ich benutzerdefinierte Codefragmente in VSCode hinzu?

Ist es möglich, benutzerdefinierte Codefragmente in Visual Studio Code hinzuzufügen? Und wenn ja, wie? VSCode basiert auf Atom, daher sollte es möglich sein.

1. Drücken Sie> shift+ command+ pund geben Sie Snippets ein
2. Wählen Sie Einstellungen: Benutzerausschnitte öffnen
3. Wählen Sie den Sprachtyp aus, für den Sie das benutzerdefinierte Snippet hinzufügen möchten
4. vscode enthält Kommentare zum Hinzufügen eines Snippets, wie unter:> vsdoc beschrieben

Nehmen wir an, wir möchten benutzerdefinierte Snippets für die Sprache GO öffnen. Dann können wir tun:

1. Drücken Sie> command+p
2. Geben enterSie Folgendes ein: go.json + Und Sie landen auf der benutzerdefinierten Snippet-Seite

Snippets werden in einem JSON-Format definiert und in einer .json-Datei pro Benutzer (languageId) gespeichert. Markdown-Snippets werden beispielsweise in einer markdown.json-Datei gespeichert.

Aktualisieren Sie neue Tools:
Snippet-Generator-Site: https://snippet-generator.app/

Schritt - 1 Es gibt ein VsCode-Plugin namens: Snippet Creator .

Nach der Installation müssen Sie lediglich Folgendes tun:

1. Wählen Sie den Code aus, den Sie zu einem Snippet machen möchten.
2. Klicken Sie mit der rechten Maustaste darauf und wählen Sie "Befehlspalette" (oder Ctrl+ Shift+ P).
3. Schreiben Sie "Create Snippet".
4. Wählen Sie den Dateityp aus, der überwacht werden soll, um Ihre Snippet-Verknüpfung auszulösen.
5. Wählen Sie eine Snippet-Verknüpfung.
6. Wählen Sie einen Snippet-Namen.

Schritt - 2 Überprüfen Sie diese Website . Sie können Snippets für vs Code, erhabenen Text und Atom generieren.

Sobald ein Snippet auf dieser Site generiert wurde. Gehen Sie zur Snippet-Datei der jeweiligen IDE und fügen Sie diese ein. Zum Beispiel für ein JS-Snippet im VS-Code gehen Sie zu Datei-> Voreinstellung-> Benutzer-Snippet, dann öffnet es die Datei javascript.json und fügt den Snippet-Code von der obigen Site in diese ein, und wir können loslegen.

Ab Version 0.10.6 können Sie benutzerdefinierte Snippets hinzufügen. Lesen Sie die Dokumentation zum Erstellen eigener Snippets . Sie können benutzerdefinierte Snippets finden / erstellen, indem Sie die JSON-Datei in platzieren C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. Ein benutzerdefiniertes Javascript-Snippet befindet sich beispielsweise in a\snippets\javascript.json

Sie können auch Ihre Snippets veröffentlichen, was ebenfalls eine sehr nette Funktion ist. John Papa hat ein schönes eckiges + Typoskript-Snippet erstellt, das Sie als Erweiterung auf dem Markt herunterladen können .

Hier ist ein Beispielausschnitt für die Dokumentation einer Javascript for-Schleife:

"For Loop": {
    "prefix": "for",
    "body": [
        "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "\tvar ${element} = ${array}[${index}];",
        "\t$0",
        "}"
    ],
    "description": "For Loop"
},

Wo

• For Loop ist der Snippet-Name
• prefixDefiniert ein Präfix, das in der IntelliSense-Dropdown-Liste verwendet wird. In diesem Fall für.
• bodyist der Snippet-Inhalt. Mögliche Variablen sind:
  • $ 1, $ 2 für Tabstopps
  • $ {id} und $ {id: label} und $ {1: label} für Variablen
  • Variablen mit derselben ID werden verbunden.
• description ist die Beschreibung, die in der Dropdown-Liste IntelliSense verwendet wird

In diesem Video finden Sie ein kurzes Tutorial

https://youtu.be/g1ouTcFxQSU

Gehen Sie zu Datei -> Einstellungen -> Benutzerausschnitte . Wählen Sie Ihre bevorzugte Sprache.
Geben Sie nun den folgenden Code ein, um ein for-Loop-Snippet zu erstellen:

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

Du bist fertig.
Geben Sie "for" in den Editor ein und verwenden Sie die erste Vorhersage.

ABKÜRZUNG--

1. Installieren Sie die Snippet-Creator- Erweiterung.
   
2. Markieren Sie den Code, den Sie zum Erstellen eines Snippets benötigen.
   
3. Drücken Sie ctrl+ shift+ Pund geben Sie "Create Snippet" in die Befehlspalette ein und drücken Sie ENTER.
   
4. Wählen Sie die Sprache aus, für die Sie ein Snippet erstellen möchten (z. B. -CPP), geben Sie den
   Snippet-Namen ein, geben Sie die Snippet-Verknüpfung ein und geben Sie dann die Snippet-Beschreibung ein.
   Sie können jetzt loslegen.
   Geben Sie die Snippet-Verknüpfung in den Editor ein, den Sie in Schritt 4 eingegeben haben, und wählen Sie die
   Vorhersage aus (wenn keine Vorhersage vorliegt, drücken Sie Strg + Leertaste), die zuerst eintritt.
   

Hoffe das hilft :)

Hinweis: Gehen Sie zu Datei-> Einstellungen-> Benutzerausschnitte. Wählen Sie dann die Sprache aus, in der Sie
das Snippet erstellt haben. Dort finden Sie den Ausschnitt.

Es gibt ein VsCode-Plugin namens: Snippet Creator .

Nach der Installation müssen Sie lediglich Folgendes tun:

1. Wählen Sie den Code aus, den Sie zu einem Snippet machen möchten.
2. Klicken Sie mit der rechten Maustaste darauf und wählen Sie "Befehlspalette" (oder Ctrl+ Shift+ P).
3. Schreiben Sie "Create Snippet".
4. Wählen Sie den Dateityp aus, der überwacht werden soll, um Ihre Snippet-Verknüpfung auszulösen.
5. Wählen Sie eine Snippet-Verknüpfung.
6. Wählen Sie einen Snippet-Namen.

Das ist alles ..

Hinweis: Wenn Sie Ihre Snippets bearbeiten möchten, finden Sie sie in [fileType] .json.
Beispiel: Ctrl+ P, wählen Sie "javascript.json".

Sie können benutzerdefinierte Skripte hinzufügen, gehen Sie zu File --> Preferences --> User Snippets. Wählen Sie Ihre bevorzugte Sprache.

Wenn Sie Javascript wählen, sehen Sie das benutzerdefinierte Standardskript für console.log(' ');Folgendes:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},

Ich habe versucht, Snippets in javascriptreact.json hinzuzufügen, aber es hat bei mir nicht funktioniert.

Ich habe versucht, Snippets in den globalen Bereich aufzunehmen, und es funktioniert wie ein Zauber.

FILE --> Preferences --> User snippets

hier auswählen New Global Snippets File, Name javas gebencriptreact.code-snippets .

Für andere Sprachen können Sie [your_longuage] .code-snippets benennen

Dies ist eine undokumentierte Funktion, die jedoch in Kürze verfügbar sein wird. Es gibt einen Ordner, zu dem Sie sie hinzufügen können, und sie werden angezeigt, aber er kann sich ändern (aus einem bestimmten Grund nicht dokumentiert).

Der beste Rat ist, dies zur Uservoice-Site hinzuzufügen und bis zum endgültigen Ende zu warten. Aber es kommt.

VSCode führt dies in Version 0.5 ein, siehe hier . Die Snippet-Syntax folgt der TextMate-Snippet-Syntax und kann in den Benutzereinstellungen geschrieben werden.

Wenn Sie Ihre Snippets lieber nicht in JSON schreiben möchten , lesen Sie Snipster . Sie können Snippets so schreiben, als würden Sie den Code selbst schreiben - ohne jede Zeile in Anführungszeichen setzen, Zeichen maskieren, Metainformationen hinzufügen usw.

Sie können damit auch einmal schreiben und überall veröffentlichen . So können Sie Ihr Snippet in VS Code, Atom und Sublime sowie in Zukunft in weiteren Editoren verwenden. Mehr Infos hier .

Dies ist möglicherweise keine echte Antwort (wie einige oben geantwortet haben). Wenn Sie jedoch daran interessiert sind, benutzerdefinierte Codefragmente für andere Personen zu erstellen, können Sie Erweiterungen mit yeoman und npm erstellen (die standardmäßig mit NodeJS geliefert werden). HINWEIS: Dies dient nur zum Erstellen von Snippets für andere Systeme. Aber es funktioniert auch bei Ihnen! Außer du brauchst JS-Code für die ganze Sache.