✕

custom-snippets

O recurso Trechos personalizados do Spck Editor permite definir modelos de código reutilizáveis que aparecem na lista de autocompletar. Esta página fornece pacotes iniciais prontos para colar com os padrões mais comuns dos frameworks populares — para que você não precise escrever o boilerplate por conta própria.

Disponibilidade: Trechos personalizados é um recurso premium. Ele é desbloqueado com uma assinatura Gold na versão completa do Spck Editor, ou como compra única pelo Spck Editor Lite.

Cada pacote é uma configuração JSON indexada por modo de linguagem (javascript_ls para os frameworks de frontend, python_ls para os de Python, html_ls/css_ls para fragmentos de template e estilo). Escolha um framework, clique em Copiar JSON e cole no editor de configuração de trechos no Spck Editor.

Como usar

  1. Escolha um framework abaixo e clique em Copiar JSON.
  2. No Spck Editor, abra Settings > Editor > Custom Snippets.
  3. Toque no ícone Code (no topo da lista de trechos) para editar a configuração como JSON.
  4. Cole o JSON copiado e, em seguida, toque em Update para sobrescrever sua configuração de trechos.
  5. Os trechos aparecerão na lista de autocompletar do seu editor à medida que você digita o nome do gatilho.

Importando um pacote de trechos personalizados no Spck Editor

Todos os trechos usam marcadores de tabulação ($1, $2, $0) para que o cursor salte entre as posições editáveis após a inserção. Consulte a referência de Trechos personalizados para a sintaxe dos marcadores.

Pacotes de trechos

Hooks (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), componentes funcionais e de arrow, hooks personalizados, forwardRef e padrões de Context Provider.

Modo alvo: javascript_ls · Baixar react.json

Estrutura de App Router (page, layout, loading, error, not-found), route handlers, server actions, generateMetadata/StaticParams, Link, Image, importação dinâmica, hooks de navegação e middleware.

Modo alvo: javascript_ls · Baixar nextjs.json

Primitivas da Composition API, hooks de ciclo de vida, defineProps/Emits, store do Pinia e fallback da Options API (lado do script), além da estrutura SFC, v-for/v-if/v-model/v-bind/v-on, slots, transições e router-link (lado do template).

Modos alvo: javascript_ls + html_ls · Baixar vue.json

Declarações reativas, ciclo de vida, todos os tipos de store e event dispatcher (lado do script), além de estrutura de componente, blocos {#if}/{#each}/{#await}/{#key}, diretivas bind:/on:/class:/use:, assinatura de store e slots (lado do template).

Modos alvo: javascript_ls + html_ls · Baixar svelte.json

Agrupamentos comuns de utilitários (layouts flex/grid, cards, botões, inputs, badges, alertas), variantes responsivas e de modo escuro, além de diretivas @apply/@layer/@tailwind do lado CSS.

Modos alvo: html_ls + css_ls · Baixar tailwind.json

Estrutura de app, todos os métodos HTTP, rota assíncrona com try/catch, middleware, middleware de autenticação, error handler, módulo Router, CORS, arquivos estáticos e helpers de parâmetros de requisição.

Modo alvo: javascript_ls · Baixar express.json

Estrutura de app, rotas GET/POST/PUT/DELETE, handlers assíncronos, parâmetros de path e query, modelos Pydantic, Depends, HTTPException, APIRouter, BackgroundTasks, middleware CORS, upload de arquivos e handlers de lifespan.

Modo alvo: python_ls · Baixar fastapi.json

Models, views baseadas em funções e classes, DRF APIView/ViewSet/Serializer, forms, urlpatterns, registro do admin, migrações, managers personalizados, signals e management commands.

Modo alvo: python_ls · Baixar django.json

Personalizando os trechos

Esses pacotes são pontos de partida — a maioria dos desenvolvedores adiciona seus próprios padrões ao longo do tempo. Você pode editar qualquer trecho diretamente dentro do aplicativo:

Editando um trecho personalizado no Spck Editor

Adições úteis a considerar:

  • Esqueletos de componentes que correspondam à estrutura de arquivos do seu projeto (por exemplo, um trecho page que inclua seus imports padrão e o wrapper de layout).
  • Boilerplate de testes — a estrutura describe/it do seu framework de testes com os imports que você sempre precisa.
  • Chamadas de logging ou telemetria com os nomes de eventos específicos do seu projeto já preenchidos.
  • Chamadas a clientes de API — envolva seu padrão padrão de chamada fetch / axios / SDK com tratamento de erros.

O formato JSON é simples — cada trecho é apenas um name (o que aparece no autocompletar) e um corpo snippet. Edite o JSON baixado em qualquer editor de texto antes de colá-lo na configuração de trechos.

Veja também