✕

custom-snippets

La fonctionnalité Extraits personnalisés de Spck Editor vous permet de définir des modèles de code réutilisables qui apparaissent dans la liste d’autocomplétion. Cette page propose des packs prêts à coller pour les motifs les plus courants des frameworks populaires, afin que vous n’ayez pas à écrire le code passe-partout vous-même.

Disponibilité : Les Extraits personnalisés sont une fonctionnalité premium. Ils sont débloqués avec un abonnement Gold dans la version complète de Spck Editor, ou via un achat unique avec Spck Editor Lite.

Chaque pack est une configuration JSON indexée par mode de langage (javascript_ls pour les frameworks frontend, python_ls pour ceux de Python, html_ls/css_ls pour les fragments de template et de style). Choisissez un framework, cliquez sur Copier le JSON et collez-le dans l’éditeur de configuration des extraits dans Spck Editor.

Comment l’utiliser

  1. Choisissez un framework ci-dessous et cliquez sur Copier le JSON.
  2. Dans Spck Editor, ouvrez Settings > Editor > Custom Snippets.
  3. Touchez l’icône Code (en haut de la liste des extraits) pour modifier la configuration en JSON.
  4. Collez le JSON copié, puis touchez Update pour écraser votre configuration d’extraits.
  5. Les extraits apparaîtront dans la liste d’autocomplétion de votre éditeur lorsque vous taperez leur nom de déclencheur.

Import d’un pack d’extraits personnalisés dans Spck Editor

Tous les extraits utilisent des espaces réservés de tabulation ($1, $2, $0) afin que le curseur passe d’une position modifiable à l’autre après l’insertion. Consultez la référence des Extraits personnalisés pour la syntaxe des espaces réservés.

Packs d’extraits

Hooks (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), composants fonctionnels et fléchés, hooks personnalisés, forwardRef et motifs Context Provider.

Mode cible : javascript_ls · Télécharger react.json

Squelette App Router (page, layout, loading, error, not-found), gestionnaires de route, server actions, generateMetadata/StaticParams, Link, Image, imports dynamiques, hooks de navigation et middleware.

Mode cible : javascript_ls · Télécharger nextjs.json

Primitives de la Composition API, hooks de cycle de vie, defineProps/Emits, store Pinia et repli sur l’Options API (côté script), ainsi que squelette SFC, v-for/v-if/v-model/v-bind/v-on, slots, transitions et router-link (côté template).

Modes cibles : javascript_ls + html_ls · Télécharger vue.json

Déclarations réactives, cycle de vie, tous les types de stores et event dispatcher (côté script), ainsi que squelette de composant, blocs {#if}/{#each}/{#await}/{#key}, directives bind:/on:/class:/use:, abonnement aux stores et slots (côté template).

Modes cibles : javascript_ls + html_ls · Télécharger svelte.json

Regroupements d’utilitaires courants (layouts flex/grid, cartes, boutons, champs de saisie, badges, alertes), variantes responsive et mode sombre, ainsi que directives @apply/@layer/@tailwind côté CSS.

Modes cibles : html_ls + css_ls · Télécharger tailwind.json

Squelette d’application, toutes les méthodes HTTP, route asynchrone avec try/catch, middleware, middleware d’authentification, gestionnaire d’erreurs, module Router, CORS, fichiers statiques et utilitaires pour paramètres de requête.

Mode cible : javascript_ls · Télécharger express.json

Squelette d’application, routes GET/POST/PUT/DELETE, handlers asynchrones, paramètres de chemin et de requête, modèles Pydantic, Depends, HTTPException, APIRouter, BackgroundTasks, middleware CORS, téléversements de fichiers et handlers de lifespan.

Mode cible : python_ls · Télécharger fastapi.json

Modèles, vues basées sur fonctions et classes, DRF APIView/ViewSet/Serializer, formulaires, urlpatterns, enregistrement de l’admin, migrations, managers personnalisés, signaux et management commands.

Mode cible : python_ls · Télécharger django.json

Personnaliser les extraits

Ces packs sont des points de départ — la plupart des développeurs ajoutent leurs propres motifs au fil du temps. Vous pouvez modifier n’importe quel extrait directement dans l’application :

Modification d’un extrait personnalisé dans Spck Editor

Ajouts utiles à envisager :

  • Squelettes de composants correspondant à la structure de fichiers de votre projet (par exemple, un extrait page qui inclut vos imports standard et votre wrapper de layout).
  • Boilerplate de tests — la structure describe/it de votre framework de tests avec les imports dont vous avez toujours besoin.
  • Appels de logging ou de télémétrie avec les noms d’événements propres à votre projet pré-remplis.
  • Appels au client d’API — encapsulez votre motif standard d’appel fetch / axios / SDK avec la gestion d’erreurs.

Le format JSON est simple — chaque extrait est juste un name (ce qui s’affiche dans l’autocomplétion) et un corps snippet. Modifiez le JSON téléchargé dans n’importe quel éditeur de texte avant de le coller dans la configuration des extraits.

Voir aussi

  • Référence des Extraits personnalisés — syntaxe des espaces réservés, portée, et gestion des extraits dans l’application.
  • Spck Editor Lite — version à achat unique qui inclut les Extraits personnalisés.
  • Tarifs — détails de l’abonnement Gold pour la version complète de Spck Editor.
  • Premiers pas — installation et aperçu des fonctionnalités de Spck Editor.