Wie füge ich benutzerdefinierte Codefragmente in VSCode hinzu?

92

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.

BeastCode
quelle
2
Sie können auch zu Einstellungen> Benutzer-Snippets gehen und dann die Sprache auswählen, in der Sie ein Snippet erstellen möchten.
Amituuush
Gibt es wirklich eine Beziehung zwischen VS Code als Atom außer der Tatsache, dass beide Electron unter der Haube verwenden?
Skelliam
Verwenden Sie dazu den Codessnippet- Dienst. Sie können benutzerdefinierte Snippets erstellen, alle Snippets gleichzeitig bearbeiten und mit codessnippet cli synchronisieren, indem Sie sie einfach vom Server abrufen!
user13428826
Ich möchte der Beschreibung einen Webseiten-Link hinzufügen. Weiß jemand, wie es geht?
Januw

Antworten:

108
  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/

Chandan Nayak
quelle
3
Snippet Generator ist sehr hilfreich
rainversion_3
60

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.

Pranay Kumar
quelle
8
Das ist so ein tolles Werkzeug! Ich konnte es nicht ertragen, ein benutzerdefiniertes HTML-Boilerplate-Snippet zu schreiben, das jede Zeile zitieren und entkommen musste, also ist dies wirklich die Antwort, nach der ich gesucht habe.
Nabrown
3
Im Ernst, Lebensretter hier.
JeremyW
Wow, das ist ein großartiges Werkzeug, das perfekt funktioniert hat. Sollte als richtige Antwort markiert werden
StefanBob
24

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
Prancer
quelle
6
Sie benötigen wirklich eine mehrzeilige String-Literal-Syntax oder eine Möglichkeit, den Body in eine separate Datei zu ziehen. Jede einzelne Zeile zu zitieren und zu entkommen ist verrückt.
Mark Wilbur
Entschuldigung für die Abstimmung über diese Antwort, es war ein Schurkenklick 🙄
Giles Butler
13

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.

Vinod
quelle
9

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".

Peter Shaker
quelle
5

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"
},
Madhankumar
quelle
5

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

Geben Sie hier die Bildbeschreibung ein

Lakkanna Walikar
quelle
4

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.

John Papa
quelle
0

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 .

jhanstra
quelle
0

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.

airax86
quelle