✕

custom-snippets

Fitur Cuplikan Khusus di Spck Editor memungkinkan Anda menentukan templat kode yang dapat digunakan kembali dan muncul di daftar pelengkapan otomatis. Halaman ini menyediakan paket pemula siap tempel untuk pola paling umum di berbagai framework populer — sehingga Anda tidak perlu menulis kode boilerplate sendiri.

Ketersediaan: Cuplikan Khusus adalah fitur premium. Fitur ini terbuka dengan langganan Gold di Spck Editor versi penuh, atau melalui pembelian sekali bayar lewat Spck Editor Lite.

Setiap paket adalah konfigurasi JSON yang dikelompokkan berdasarkan mode bahasa (javascript_ls untuk framework frontend, python_ls untuk Python, html_ls/css_ls untuk fragmen templat dan gaya). Pilih framework, klik Salin JSON, lalu tempel ke editor konfigurasi cuplikan di Spck Editor.

Cara Menggunakan

  1. Pilih framework di bawah dan klik Salin JSON.
  2. Di Spck Editor, buka Settings > Editor > Custom Snippets.
  3. Ketuk ikon Code (di bagian atas daftar cuplikan) untuk mengedit konfigurasi sebagai JSON.
  4. Tempel JSON yang sudah disalin, lalu ketuk Update untuk menimpa konfigurasi cuplikan Anda.
  5. Cuplikan akan muncul di daftar pelengkapan otomatis editor Anda saat Anda mengetik nama pemicunya.

Mengimpor paket cuplikan khusus di Spck Editor

Semua cuplikan menggunakan placeholder tab-stop ($1, $2, $0) sehingga kursor berpindah antar posisi yang dapat diedit setelah penyisipan. Lihat referensi Cuplikan Khusus untuk sintaks placeholder.

Paket Cuplikan

Hooks (useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer), komponen fungsional dan arrow, custom hooks, forwardRef, dan pola Context Provider.

Mode target: javascript_ls · Unduh react.json

Kerangka App Router (page, layout, loading, error, not-found), route handler, server actions, generateMetadata/StaticParams, Link, Image, dynamic import, hook navigasi, dan middleware.

Mode target: javascript_ls · Unduh nextjs.json

Primitif Composition API, hook siklus hidup, defineProps/Emits, store Pinia, dan fallback Options API (sisi script) ditambah kerangka SFC, v-for/v-if/v-model/v-bind/v-on, slot, transisi, dan router-link (sisi template).

Mode target: javascript_ls + html_ls · Unduh vue.json

Deklarasi reaktif, siklus hidup, semua jenis store, dan event dispatcher (sisi script) ditambah kerangka komponen, blok {#if}/{#each}/{#await}/{#key}, direktif bind:/on:/class:/use:, langganan store, dan slot (sisi template).

Mode target: javascript_ls + html_ls · Unduh svelte.json

Pengelompokan utilitas umum (tata letak flex/grid, kartu, tombol, input, badge, alert), varian responsif dan mode gelap, plus direktif @apply/@layer/@tailwind sisi CSS.

Mode target: html_ls + css_ls · Unduh tailwind.json

Kerangka app, semua metode HTTP, route async dengan try/catch, middleware, middleware autentikasi, error handler, modul Router, CORS, file statis, dan helper parameter request.

Mode target: javascript_ls · Unduh express.json

Kerangka app, route GET/POST/PUT/DELETE, handler async, parameter path dan query, model Pydantic, Depends, HTTPException, APIRouter, BackgroundTasks, middleware CORS, upload file, dan handler lifespan.

Mode target: python_ls · Unduh fastapi.json

Model, view berbasis fungsi dan kelas, DRF APIView/ViewSet/Serializer, form, urlpatterns, registrasi admin, migrasi, manager kustom, signals, dan management command.

Mode target: python_ls · Unduh django.json

Menyesuaikan Cuplikan

Paket-paket ini adalah titik awal — kebanyakan developer menambahkan pola mereka sendiri seiring waktu. Anda dapat mengedit cuplikan apa pun langsung di dalam aplikasi:

Mengedit cuplikan khusus di Spck Editor

Tambahan yang bermanfaat untuk dipertimbangkan:

  • Kerangka komponen yang sesuai dengan struktur file proyek Anda (mis. cuplikan page yang mencakup import standar dan layout wrapper Anda).
  • Boilerplate pengujian — struktur describe/it framework pengujian Anda dengan import yang selalu Anda perlukan.
  • Pemanggilan logging atau telemetri dengan nama event khusus proyek Anda yang sudah terisi.
  • Pemanggilan client API — bungkus pola pemanggilan standar fetch / axios / SDK Anda dengan penanganan error.

Format JSON ini sederhana — setiap cuplikan hanya berupa name (yang muncul di pelengkapan otomatis) dan body snippet. Edit JSON yang diunduh di editor teks apa pun sebelum menempelkannya ke konfigurasi cuplikan.

Lihat Juga

  • Referensi Cuplikan Khusus — sintaks placeholder, cakupan, dan cara mengelola cuplikan di dalam aplikasi.
  • Spck Editor Lite — versi pembelian sekali bayar yang menyertakan Cuplikan Khusus.
  • Harga — detail langganan Gold untuk Spck Editor versi penuh.
  • Memulai — pemasangan dan ikhtisar fitur Spck Editor.