✕

custom-snippets

La función Fragmentos personalizados de Spck Editor te permite definir plantillas de código reutilizables que aparecen en la lista de autocompletado. Esta página ofrece paquetes iniciales listos para pegar con los patrones más comunes de los frameworks más populares, para que no tengas que escribir el código repetitivo tú mismo.

Disponibilidad: Fragmentos personalizados es una función premium. Se desbloquea con una suscripción Gold en la versión completa de Spck Editor o mediante una compra única a través de Spck Editor Lite.

Cada paquete es una configuración JSON ordenada por modo de lenguaje (javascript_ls para los frameworks de frontend, python_ls para los de Python, html_ls/css_ls para fragmentos de plantilla y estilo). Elige un framework, pulsa Copiar JSON y pégalo en el editor de configuración de fragmentos de Spck Editor.

Cómo utilizarlo

  1. Elige un framework de abajo y haz clic en Copiar JSON.
  2. En Spck Editor, abre Settings > Editor > Custom Snippets.
  3. Toca el icono Code (parte superior de la lista de fragmentos) para editar la configuración como JSON.
  4. Pega el JSON copiado y luego toca Update para sobrescribir tu configuración de fragmentos.
  5. Los fragmentos aparecerán en la lista de autocompletado de tu editor cuando escribas el nombre de su disparador.

Importando un paquete de fragmentos personalizados en Spck Editor

Todos los fragmentos utilizan marcadores de posición con paradas de tabulación ($1, $2, $0) para que el cursor salte entre las posiciones editables después de la inserción. Consulta la referencia de Fragmentos personalizados para conocer la sintaxis de los marcadores.

Paquetes de fragmentos

Hooks (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), componentes funcionales y de flecha, hooks personalizados, forwardRef y patrones de Context Provider.

Modo de destino: javascript_ls · Descargar react.json

Estructura de App Router (page, layout, loading, error, not-found), manejadores de ruta, server actions, generateMetadata/StaticParams, Link, Image, importación dinámica, hooks de navegación y middleware.

Modo de destino: javascript_ls · Descargar nextjs.json

Primitivas de la Composition API, hooks de ciclo de vida, defineProps/Emits, store de Pinia y respaldo de Options API (lado del script), además de estructura SFC, v-for/v-if/v-model/v-bind/v-on, slots, transiciones y router-link (lado de la plantilla).

Modos de destino: javascript_ls + html_ls · Descargar vue.json

Declaraciones reactivas, ciclo de vida, todos los tipos de store y event dispatcher (lado del script), además de andamio de componente, bloques {#if}/{#each}/{#await}/{#key}, directivas bind:/on:/class:/use:, suscripción a stores y slots (lado de la plantilla).

Modos de destino: javascript_ls + html_ls · Descargar svelte.json

Agrupaciones de utilidades comunes (layouts flex/grid, tarjetas, botones, entradas, badges, alertas), variantes responsive y de modo oscuro, además de directivas @apply/@layer/@tailwind del lado CSS.

Modos de destino: html_ls + css_ls · Descargar tailwind.json

Estructura de app, todos los métodos HTTP, ruta asíncrona con try/catch, middleware, middleware de autenticación, manejador de errores, módulo Router, CORS, archivos estáticos y utilidades para parámetros de solicitud.

Modo de destino: javascript_ls · Descargar express.json

Estructura de app, rutas GET/POST/PUT/DELETE, handlers asíncronos, parámetros de ruta y consulta, modelos Pydantic, Depends, HTTPException, APIRouter, BackgroundTasks, middleware CORS, cargas de archivos y handlers de lifespan.

Modo de destino: python_ls · Descargar fastapi.json

Modelos, vistas basadas en funciones y clases, DRF APIView/ViewSet/Serializer, formularios, urlpatterns, registro de admin, migraciones, managers personalizados, signals y management commands.

Modo de destino: python_ls · Descargar django.json

Personalizar los fragmentos

Estos paquetes son puntos de partida; la mayoría de los desarrolladores añaden sus propios patrones con el tiempo. Puedes editar cualquier fragmento directamente dentro de la app:

Editando un fragmento personalizado en Spck Editor

Añadidos útiles a considerar:

  • Andamios de componentes que coincidan con la estructura de archivos de tu proyecto (por ejemplo, un fragmento page que incluya tus imports estándar y el envoltorio de layout).
  • Boilerplate de pruebas: la estructura describe/it de tu framework de pruebas con los imports que siempre necesitas.
  • Llamadas de logging o telemetría con los nombres de eventos específicos de tu proyecto ya rellenados.
  • Llamadas a clientes de API: encapsula tu patrón estándar de fetch / axios / SDK con manejo de errores.

El formato JSON es sencillo: cada fragmento es solo un name (lo que se muestra en el autocompletado) y un cuerpo snippet. Edita el JSON descargado en cualquier editor de texto antes de pegarlo en la configuración de fragmentos.

Véase también