✕

custom-snippets

Функция Пользовательские сниппеты в Spck Editor позволяет определять переиспользуемые шаблоны кода, которые отображаются в списке автодополнения. На этой странице представлены готовые к вставке стартовые наборы для самых распространённых шаблонов популярных фреймворков — чтобы вам не приходилось писать шаблонный код самостоятельно.

Доступность: Пользовательские сниппеты — это премиум-функция. Она открывается по подписке Gold в полной версии Spck Editor или через разовую покупку Spck Editor Lite.

Каждый набор — это JSON-конфигурация, сгруппированная по языковому режиму (javascript_ls для фронтенд-фреймворков, python_ls для Python, html_ls/css_ls для фрагментов шаблонов и стилей). Выберите фреймворк, нажмите Скопировать JSON и вставьте в редактор конфигурации сниппетов в Spck Editor.

Как использовать

  1. Выберите фреймворк ниже и нажмите Скопировать JSON.
  2. В Spck Editor откройте Settings > Editor > Custom Snippets.
  3. Нажмите на значок Code (в верхней части списка сниппетов), чтобы отредактировать конфигурацию как JSON.
  4. Вставьте скопированный JSON и нажмите Update, чтобы перезаписать конфигурацию сниппетов.
  5. Сниппеты появятся в списке автодополнения вашего редактора, как только вы начнёте вводить имя их триггера.

Импорт набора пользовательских сниппетов в Spck Editor

Все сниппеты используют табуляционные плейсхолдеры ($1, $2, $0), поэтому курсор переходит между редактируемыми позициями после вставки. Синтаксис плейсхолдеров см. в справочнике по Пользовательским сниппетам.

Наборы сниппетов

Хуки (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), функциональные и стрелочные компоненты, пользовательские хуки, forwardRef и шаблоны Context Provider.

Целевой режим: javascript_ls · Скачать react.json

Каркас App Router (page, layout, loading, error, not-found), обработчики маршрутов, server actions, generateMetadata/StaticParams, Link, Image, динамический import, хуки навигации и middleware.

Целевой режим: javascript_ls · Скачать nextjs.json

Примитивы Composition API, хуки жизненного цикла, defineProps/Emits, хранилище Pinia и резервный вариант Options API (со стороны script), а также каркас SFC, v-for/v-if/v-model/v-bind/v-on, слоты, переходы и router-link (со стороны шаблона).

Целевые режимы: javascript_ls + html_ls · Скачать vue.json

Реактивные объявления, жизненный цикл, все типы хранилищ и event dispatcher (со стороны script), а также каркас компонента, блоки {#if}/{#each}/{#await}/{#key}, директивы bind:/on:/class:/use:, подписка на хранилище и слоты (со стороны шаблона).

Целевые режимы: javascript_ls + html_ls · Скачать svelte.json

Распространённые группы утилит (раскладки flex/grid, карточки, кнопки, поля ввода, бейджи, уведомления), варианты для адаптивной вёрстки и тёмной темы, а также CSS-директивы @apply/@layer/@tailwind.

Целевые режимы: html_ls + css_ls · Скачать tailwind.json

Каркас приложения, все HTTP-методы, асинхронный маршрут с try/catch, middleware, middleware аутентификации, обработчик ошибок, модуль Router, CORS, статические файлы и хелперы для параметров запроса.

Целевой режим: javascript_ls · Скачать express.json

Каркас приложения, маршруты GET/POST/PUT/DELETE, асинхронные обработчики, path- и query-параметры, модели Pydantic, Depends, HTTPException, APIRouter, BackgroundTasks, middleware CORS, загрузка файлов и обработчики lifespan.

Целевой режим: python_ls · Скачать fastapi.json

Модели, представления на основе функций и классов, DRF APIView/ViewSet/Serializer, формы, urlpatterns, регистрация в admin, миграции, пользовательские менеджеры, сигналы и management-команды.

Целевой режим: python_ls · Скачать django.json

Настройка сниппетов

Эти наборы — лишь отправная точка: большинство разработчиков со временем добавляют свои собственные шаблоны. Любой сниппет можно отредактировать прямо в приложении:

Редактирование пользовательского сниппета в Spck Editor

Полезные дополнения, которые стоит рассмотреть:

  • Каркасы компонентов, соответствующие структуре файлов вашего проекта (например, сниппет page, включающий стандартные импорты и обёртку макета).
  • Шаблоны тестов — структура describe/it вашего тестового фреймворка с импортами, которые всегда нужны.
  • Вызовы логирования или телеметрии с предзаполненными именами событий, специфичными для вашего проекта.
  • Вызовы API-клиента — оберните ваш стандартный шаблон вызова fetch / axios / SDK обработкой ошибок.

Формат JSON прост: каждый сниппет — это просто name (то, что отображается в автодополнении) и тело snippet. Отредактируйте скачанный JSON в любом текстовом редакторе перед вставкой в конфигурацию сниппетов.

См. также