wake-up-neo.net

Wie füge ich benutzerdefinierte Code-Schnipsel in VSCode hinzu?

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

27
BeastCode
  1. Hit> shift + command + p und geben Sie Schnipsel 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 machen:

  1. Hit> command + p
  2. Geben Sie ein: go.json + enter 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 abgelegt.

47
Chandan Nayak

überprüfen Sie diese Website . Sie können Snippets für vs-Code, sublimen Text und Atom erzeugen.

22
Pranay Kumar

Ab Version 0.10.6 können Sie benutzerdefinierte Snippets hinzufügen. Lesen Sie die Dokumentation zu Eigene Snippets erstellen . Sie können benutzerdefinierte Snippets finden/erstellen, indem Sie die json-Datei in C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets..__ platzieren. Ein benutzerdefiniertes Javascript-Snippets wäre beispielsweise in einem \snippets\javascript.json 

Sie können auch Ihre Snippets veröffentlichen, was ebenfalls eine sehr nette Funktion ist. John Papa hat ein Nice angle + TypeScript-Snippet erstellt, das Sie als Erweiterung im marketplace herunterladen können.

Hier ist ein Beispiel-Snippet 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"
},

Woher

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

Es gibt ein VsCode Plugin mit dem Namen: Snippet Creator ..

Nach der Installation müssen Sie nur noch Folgendes tun:

  1. Wählen Sie den Code aus, aus dem Sie ein Snippet erstellen möchten.
  2. Klicken Sie mit der rechten Maustaste darauf und wählen Sie "Command Palette" (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 diese in [fileType] .json
Beispiel: Ctrl+P , dann wähle "javascript.json"

5
Peter Shaker

Gehen Sie zu File -> Preferences -> User Snippets . Wählen Sie Ihre bevorzugte Sprache.
Geben Sie nun den folgenden Code ein, um ein for-Schleifen-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 im Editor "für" ein und verwenden Sie die erste Vorhersage.

SHORTCUT -

1. install Snippet-creator Erweiterung.
2. Markieren Sie den Code, den Sie zum Erstellen des Snippets benötigen.
3. Drücken Sie ctrl+shift+P und geben Sie "Create snippet" in die Befehlspalette ein und drücken Sie die [EINGABETASTE].
5. Wählen Sie die Sprache aus, für die Sie ein Snippet erstellen möchten (z. B .: -CPP), und geben Sie dann Folgendes ein
Snippet-Name, geben Sie die Snippet-Verknüpfung und 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 (wenn keine Vorhersage kommt, drücken Sie Strg + Leertaste), die zuerst kommt.

Hoffe das hilft :)

Hinweis: Gehen Sie zu Datei-> Einstellungen-> Benutzerausschnitte. Dann wählen Sie die Sprache, in der Sie
hat das Snippet erstellt. Sie finden das Snippet dort.

3
vinod

Dies ist ab sofort eine nicht dokumentierte Funktion, kommt aber bald. Es gibt einen Ordner, dem Sie sie hinzufügen können, und sie werden angezeigt. Es kann sich jedoch ändern (dies ist aus einem bestimmten Grund nicht dokumentiert).

Am besten empfehlen wir, dies der uservoice-Site hinzuzufügen und bis zum Ende zu warten. Aber es kommt.

3
John Papa

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

Wenn Sie sich für Javascript entscheiden, können Sie das standardmäßige benutzerdefinierte Skript für console.log(' '); wie folgt anzeigen:

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

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 mit Charme.

FILE --> Preferences --> User snippets

wählen Sie hier New Global Snippets File, geben Sie den Namen javascriptreact.code-snippets ein.

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

enter image description here

1

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

0
Abraão Alves

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

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

0
jhanstra