Code Snippets

Code Snippets (by Zaggino)

Code-Snippets ist eine Erweiterung mit der auf einfache Art Code Snippets in Brackets hinterlegt und mit zwei Klicks in einen bestehenden Source-Code eingefügt werden können.

Brackets Erweiterungsverwaltung > Verfügbar > Suchen: "brackets snippets zaggino"

GitHub: https://github.com/brackets-userland/brackets-snippets

CodeSnoppets installieren und aufrufen

• 1. Die Erweiterung installieren und aktivieren.
• 2. Code Snippets auslösen (Menü Bearbeiten), (Alt+s)
• 
• 3. Die hinterlegten Code-Snippets können ausgewählt und mit "Enter" in den Code eingefügt werden
• 4. Zusätzlich können optionale Eingabemöglichkeiten hinterlegt werden
• 
• 4.1. Die Klasse wird erweitert mit "meinrotercontainer" (Beispiel)
• 
• 5. Mit "Enter" gelangt das Code-Snippet an die Stelle des Cursors im Quellcode
  
  

CodeSnippets hinterlegen

Um neue CodeSnippets zu hinterlegen kann die bestehende Bibliothek mit wenigen Klicks erweitert werden.

• 1. jQuery - CDN

• Das Tastenkürzel (Alt+s) öffnet die Dialogbox
• Mit dem Button (N) öffnet sich ein leerer "Snippet Dialog"
• 
• Titel und Code-Snippet werden eingetragen und mit "OK" hinterlegt
  (Beispiel: JQuery CDN-Link)

• 2. jQuery ready-function

• 
• 2. Ein Script-Elelemt mit "document-ready-function" wird hinterlegt
• 3. Um den Cursor an die gewünschte Position zu platzieren kann ein Platzhalter hinzugefügt werden
  {{!cursor}}

• 3 jQuery - click-function

• 
• Die "click-function" wird hinterlegt. Optional kann ein Eingabefeld für den "Selektor" eingefügt werden, ein "Alert" und die gewünschte Position des Cursors.

Code-Snippets Quellcode

jQuery 1 - CDN:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

jQuery 2 - ready-function

<script>
    
    $( document ).ready(function() {
       {{!cursor}}
    });
    
</script>

jquery 3 - click-function

$( "{{$1?:Selektor}}" ).click(function( event ) {
 
        alert( "{{!cursor}}" );
 
    });

Viel Erfolg mit "Brackets Code Snippets (by Zaggino)