Brackets Snippets (by edc)

Nach erfolgter Installation lässt sich "Brackets Snippets (by edc)" über die Ikone in der rechten Seitenleiste öffnen.

 snippets1.png

Der Klick auf die Ikone "Brackets Snippets" öffnet den "Snippets Manager". Linke Spalte zeigt die beretgestelten Sbippets. Rechte Spate den Startbildschirm.

Settings

snippets2.png

Reiter Settings: Leider sind die Shortcut Eingaben zum auslösen der Snippets (TAB) und zusätzliche Tastaturbefehle um innerhalb der Variablen zu springen, ohne Wirkung! Zumindest mit der gleichzeitigen Benutzung von "Emmet", werden die Shortcut's überschrieben.

Lösung! Es scheint im Moment die einzige praktikable Möglchkeit, die Shortcut von "Emmet" zu manipulieren. Der Auslöser "TAB" wird bei "Emmet" deaktiviert. "Emmet" kann nun mit dem Shortcut "Ctrl+Alt+Enter" genutzt werden!

snippets2_3.png

Der Standard Tastaturbefehl zum einfügen bei "Emmet": ctrl+alt+enter (anstelle Tab verwenden)

 Settings > Export > Import

snippets2_2.png

Ein Export (hier nur Benutzerdefinierter Snippets) kann direkt in Brackets geöffnet werden. Die Datei: export-snippets.yml kann auch manuell editiert, zugeschnitten und importiert werden.

Library

snippets3.png

Aus importierten oder bereitgestellten Bibliotheken, lassen sich eigene Zusammenstellungen im Snippets Manager (linke Spalte) aufbauen. Viele weitere Bibliotheken sind im Netzt zu finden.

Snippets Manager

snippets4.png

Snippets Manager: In der linken Spalte finden sich die bereitgestellten Inhalte. Wird ein "Snippet" ausgewählt, kann es editiert oder gelöscht werden. Auf der Schaltfläche ist der Shortcut zum einfügen in das Dokument ersichtlich.

Bsp: Die Engabe von "ac+TAB" fügt die bereitgestellten Zeile: document.appendChild(elem); ins Dokument ein.

Snippets Manager - New+

snippets5.png

Der Klick auf New+ öffnet das Dialogfeld, um ein eigenes Snippet anzulegen. Erwartet werden folgende Eingaben:

  • Trigger: Den gewünschten Shortcut eingeben, Shortcut+TAB werden den Snippet einfügen
  • Description: Beschreibung des Snippet, wird beim tippen angezeigt
  • Scope: Code-Typ des Snippet. Diese Angabe ist zwingend.
    Snippets der Kategorie HTML, lassen sich nur in einer entsprechenden Datei/Position einfügen. CSS-Snippets lassen sich in eine CSS-Datei oder in eine HTML-Datei innerhalb des <style> ... </style> - Containers einfügen.
    JS-Snippets lassen sich in eine JJS-Datei oder in eine HTML-Datei innerhalb des <script> ... </script> - Containers einfügen.
    Werden andere Dateitypen bearbeitet, Bspw: *.ss für Silverstripe, ist zuerst der Dateityp in Brackets einzuführen.

snippets6.png

Wird bspw. ein Breakpoint-Snippet erstelt, müssen folgende Engaben getätigt werden:

  • Trigger: brkp (Freie Wahl, falls nicht schon benutzt)
  • Description: Breakpoint CSS
  • Scope: CSS
  • Text: /* BREAKPOINT 640px */
    @media only screen and (max-width: 640px) {
       ${1}
    }
    Variablen und Cursorposition lassen sich setzen.

snippets7.png

In einer CSS-Datei oder innerhalb des Elements <style> kann jetzt mit der Eingabe von: brkp+TAB das Snippet in den Code eingefügt werden.