✕

custom-snippets

Die Funktion Benutzerdefinierte Snippets von Spck Editor ermöglicht es Ihnen, wiederverwendbare Codevorlagen zu definieren, die in der Autocomplete-Liste erscheinen. Diese Seite bietet einsatzbereite Starter-Pakete für die häufigsten Muster der beliebtesten Frameworks – damit Sie sich das Schreiben des Boilerplate-Codes sparen können.

Verfügbarkeit: Benutzerdefinierte Snippets ist eine Premium-Funktion. Sie wird mit einem Gold-Abonnement in der Vollversion von Spck Editor freigeschaltet oder als Einmalkauf über Spck Editor Lite.

Jedes Paket ist eine JSON-Konfiguration, die nach Sprachmodus gegliedert ist (javascript_ls für die Frontend-Frameworks, python_ls für die Python-Frameworks, html_ls/css_ls für Template- und Style-Fragmente). Wählen Sie ein Framework, klicken Sie auf JSON kopieren und fügen Sie es im Snippet-Konfigurationseditor in Spck Editor ein.

Verwendung

  1. Wählen Sie unten ein Framework und klicken Sie auf JSON kopieren.
  2. Öffnen Sie in Spck Editor Settings > Editor > Custom Snippets.
  3. Tippen Sie auf das Code-Symbol (oben in der Snippet-Liste), um die Konfiguration als JSON zu bearbeiten.
  4. Fügen Sie das kopierte JSON ein und tippen Sie dann auf Update, um Ihre Snippet-Konfiguration zu überschreiben.
  5. Die Snippets erscheinen in der Autocomplete-Liste Ihres Editors, sobald Sie deren Auslösernamen eingeben.

Importieren eines benutzerdefinierten Snippet-Pakets in Spck Editor

Alle Snippets verwenden Tab-Stopp-Platzhalter ($1, $2, $0), sodass der Cursor nach dem Einfügen zwischen den bearbeitbaren Positionen springt. Siehe die Referenz für Benutzerdefinierte Snippets für die Platzhalter-Syntax.

Snippet-Pakete

Hooks (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), funktionale und Arrow-Komponenten, Custom Hooks, forwardRef und Context-Provider-Muster.

Zielmodus: javascript_ls · react.json herunterladen

App-Router-Gerüst (page, layout, loading, error, not-found), Route-Handler, Server-Actions, generateMetadata/StaticParams, Link, Image, dynamische Imports, Navigations-Hooks und Middleware.

Zielmodus: javascript_ls · nextjs.json herunterladen

Composition-API-Primitive, Lifecycle-Hooks, defineProps/Emits, Pinia-Store und Options-API-Fallback (Skriptseite) sowie SFC-Gerüst, v-for/v-if/v-model/v-bind/v-on, Slots, Transitions und router-link (Templateseite).

Zielmodi: javascript_ls + html_ls · vue.json herunterladen

Reaktive Deklarationen, Lifecycle, alle Store-Typen und Event-Dispatcher (Skriptseite) sowie Komponentengerüst, {#if}/{#each}/{#await}/{#key}-Blöcke, bind:/on:/class:/use:-Direktiven, Store-Abonnement und Slots (Templateseite).

Zielmodi: javascript_ls + html_ls · svelte.json herunterladen

Häufige Utility-Gruppierungen (flex/grid-Layouts, Karten, Buttons, Eingabefelder, Badges, Alerts), responsive und Dark-Mode-Varianten sowie CSS-seitige @apply/@layer/@tailwind-Direktiven.

Zielmodi: html_ls + css_ls · tailwind.json herunterladen

App-Gerüst, alle HTTP-Methoden, async Route mit try/catch, Middleware, Auth-Middleware, Error-Handler, Router-Modul, CORS, statische Dateien und Hilfsfunktionen für Request-Parameter.

Zielmodus: javascript_ls · express.json herunterladen

App-Gerüst, GET/POST/PUT/DELETE-Routen, async Handler, Path- und Query-Parameter, Pydantic-Modelle, Depends, HTTPException, APIRouter, BackgroundTasks, CORS-Middleware, Datei-Uploads und Lifespan-Handler.

Zielmodus: python_ls · fastapi.json herunterladen

Modelle, funktionsbasierte und klassenbasierte Views, DRF APIView/ViewSet/Serializer, Formulare, urlpatterns, Admin-Registrierung, Migrationen, Custom Manager, Signals und Management Commands.

Zielmodus: python_ls · django.json herunterladen

Snippets anpassen

Diese Pakete sind nur Ausgangspunkte – die meisten Entwickler fügen mit der Zeit eigene Muster hinzu. Sie können jedes Snippet direkt in der App bearbeiten:

Bearbeiten eines benutzerdefinierten Snippets in Spck Editor

Nützliche Ergänzungen, die in Betracht zu ziehen sind:

  • Komponentengerüste, die zur Dateistruktur Ihres Projekts passen (z. B. ein page-Snippet, das Ihre Standard-Imports und Ihren Layout-Wrapper enthält).
  • Test-Boilerplate – die describe/it-Struktur Ihres Test-Frameworks mit den Imports, die Sie immer benötigen.
  • Logging- oder Telemetrie-Aufrufe mit Ihren projektspezifischen Event-Namen vorausgefüllt.
  • API-Client-Aufrufe – verpacken Sie Ihr Standard-fetch-/axios-/SDK-Aufrufmuster mit Fehlerbehandlung.

Das JSON-Format ist einfach – jedes Snippet besteht nur aus einem name (was in der Autocomplete-Liste erscheint) und einem snippet-Body. Bearbeiten Sie das heruntergeladene JSON in einem beliebigen Texteditor, bevor Sie es in die Snippet-Konfiguration einfügen.

Siehe auch