✕

custom-snippets

Spck Editor のカスタムスニペット機能を使うと、オートコンプリート一覧に表示される再利用可能なコードテンプレートを定義できます。このページでは、人気のフレームワークでよく使われるパターン向けに、貼り付けるだけで使えるスターターパックを提供しています。これでボイラープレートコードを自分で書く手間を省けます。

提供範囲: カスタムスニペットはプレミアム機能です。Spck Editor の完全版では Gold サブスクリプションで解除でき、Spck Editor Lite の買い切り版でも利用できます。

各パックは言語モードごとにキー分けされた JSON 設定です（フロントエンド系フレームワークには javascript_ls、Python 系には python_ls、テンプレート／スタイル断片には 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 でカスタムスニペットパックをインポートする

すべてのスニペットは Tab ストップのプレースホルダー（$1、$2、$0）を使用しているため、挿入後にカーソルが編集可能な位置を順に移動します。プレースホルダー構文についてはカスタムスニペットリファレンスを参照してください。

スニペットパック

Hooks（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、ナビゲーションフック、ミドルウェア。

対象モード: javascript_ls · nextjs.json をダウンロード

Composition API のプリミティブ、ライフサイクルフック、defineProps/Emits、Pinia ストア、Options API のフォールバック（スクリプト側）に加え、SFC の雛形、v-for/v-if/v-model/v-bind/v-on、スロット、トランジション、router-link（テンプレート側）。

対象モード: javascript_ls + html_ls · vue.json をダウンロード

リアクティブ宣言、ライフサイクル、すべてのストア型、イベントディスパッチャー（スクリプト側）に加え、コンポーネントの雛形、{#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 を使った async ルート、ミドルウェア、認証ミドルウェア、エラーハンドラー、Router モジュール、CORS、静的ファイル、リクエストパラメータ用のヘルパー。

対象モード: javascript_ls · express.json をダウンロード

アプリの雛形、GET/POST/PUT/DELETE ルート、非同期ハンドラー、パスとクエリのパラメータ、Pydantic モデル、Depends、HTTPException、APIRouter、BackgroundTasks、CORS ミドルウェア、ファイルアップロード、lifespan ハンドラー。

対象モード: python_ls · fastapi.json をダウンロード

モデル、関数ベースおよびクラスベースのビュー、DRF APIView/ViewSet/Serializer、フォーム、urlpatterns、admin 登録、マイグレーション、カスタムマネージャー、シグナル、management コマンド。

対象モード: python_ls · django.json をダウンロード

スニペットのカスタマイズ

これらのパックはあくまで出発点です。多くの開発者は時間をかけて独自のパターンを追加していきます。アプリ内で各スニペットを直接編集できます。

Spck Editor でカスタムスニペットを編集する

追加すると便利なものの例:

  • コンポーネントの雛形 — プロジェクトのファイル構成に合わせたもの（例: 標準的な import とレイアウトラッパーを含む page スニペット）。
  • テスト用ボイラープレート — 必ず必要となる import を含めた、テストフレームワークの describe/it 構造。
  • ロギングやテレメトリ呼び出し — プロジェクト固有のイベント名を事前に埋め込んだもの。
  • API クライアント呼び出し — エラーハンドリングを含めた、標準的な fetch / axios / SDK 呼び出しパターンのラッパー。

JSON のフォーマットは単純で、各スニペットはオートコンプリートに表示される name とスニペット本体 snippet だけで構成されます。ダウンロードした JSON を任意のテキストエディタで編集してから、スニペット設定に貼り付けてください。

関連項目