✕

custom-snippets

Spck Editor 的自訂程式碼片段功能讓你可以定義可重複使用的程式碼範本，它們會出現在自動完成清單中。本頁提供可直接貼上使用的入門套件，涵蓋熱門框架中最常見的模式——讓你不必自己撰寫樣板程式碼。

可用性： 自訂程式碼片段是進階功能。在 Spck Editor 完整版中，可透過 Gold 訂閱解鎖；也可以透過一次性購買 Spck Editor Lite 取得。

每個套件都是依照語言模式（前端框架使用 javascript_ls，Python 框架使用 python_ls，範本與樣式片段使用 html_ls/css_ls）整理的 JSON 設定。選擇一個框架，按 複製 JSON，然後貼到 Spck Editor 的程式碼片段設定編輯器中。

使用方法

  1. 在下方選擇一個框架，按一下 複製 JSON。
  2. 在 Spck Editor 中開啟 Settings > Editor > Custom Snippets。
  3. 點選程式碼片段清單頂端的 Code 圖示，以 JSON 形式編輯設定。
  4. 貼上複製的 JSON，然後點選 Update 覆寫程式碼片段設定。
  5. 當你輸入觸發名稱時，程式碼片段就會出現在編輯器的自動完成清單中。

在 Spck Editor 中匯入自訂程式碼片段套件

所有程式碼片段都使用定位點佔位符（$1、$2、$0），插入後游標會在可編輯位置之間跳動。佔位符語法請參考自訂程式碼片段參考。

程式碼片段套件

Hooks（useState、useEffect、useRef、useMemo、useCallback、useContext、useReducer）、函式型與箭頭函式元件、自訂 hooks、forwardRef，以及 Context Provider 模式。

目標模式：javascript_ls · 下載 react.json

App Router 樣板（page、layout、loading、error、not-found）、路由處理器、server actions、generateMetadata/StaticParams、Link、Image、動態 import、導覽 hooks 以及中介軟體。

目標模式：javascript_ls · 下載 nextjs.json

Composition API 基本元素、生命週期 hooks、defineProps/Emits、Pinia store，以及 Options API 備援（script 端）；外加 SFC 樣板、v-for/v-if/v-model/v-bind/v-on、插槽、轉場與 router-link（範本端）。

目標模式：javascript_ls + html_ls · 下載 vue.json

反應式宣告、生命週期、所有 store 類型以及事件分派器（script 端）；外加元件樣板、{#if}/{#each}/{#await}/{#key} 區塊、bind:/on:/class:/use: 指令、store 訂閱與插槽（範本端）。

目標模式：javascript_ls + html_ls · 下載 svelte.json

常用工具類組合（flex/grid 版面配置、卡片、按鈕、輸入框、徽章、警示）、響應式與深色模式變體，以及 CSS 端 @apply/@layer/@tailwind 指令。

目標模式：html_ls + css_ls · 下載 tailwind.json

應用程式樣板、所有 HTTP 方法、附 try/catch 的非同步路由、中介軟體、驗證中介軟體、錯誤處理器、Router 模組、CORS、靜態檔案，以及請求參數輔助函式。

目標模式：javascript_ls · 下載 express.json

應用程式樣板、GET/POST/PUT/DELETE 路由、非同步處理器、path 與 query 參數、Pydantic 模型、Depends、HTTPException、APIRouter、BackgroundTasks、CORS 中介軟體、檔案上傳以及 lifespan 處理器。

目標模式：python_ls · 下載 fastapi.json

模型、函式型與類別型視圖、DRF APIView/ViewSet/Serializer、表單、urlpatterns、admin 註冊、遷移、自訂 manager、signals 以及 management 命令。

目標模式：python_ls · 下載 django.json

自訂程式碼片段

這些套件只是起點——大多數開發者會隨著時間加入自己的模式。你可以直接在應用程式內編輯任何程式碼片段：

在 Spck Editor 中編輯自訂程式碼片段

值得考慮加入的實用內容：

  • 元件樣板，配合你專案的檔案結構（例如包含標準匯入與版面配置包裝的 page 程式碼片段）。
  • 測試樣板 ——你測試框架的 describe/it 結構，加上你總是會用到的匯入。
  • 記錄或遙測呼叫，預先填好你專案特有的事件名稱。
  • API 客戶端呼叫 ——把你標準的 fetch / axios / SDK 呼叫模式連同錯誤處理一起包裝好。

JSON 格式很單純——每個程式碼片段只包含一個 name（出現在自動完成中）和一個 snippet 主體。在貼到程式碼片段設定之前，可以在任何文字編輯器中編輯下載的 JSON。

另請參閱

  • 自訂程式碼片段參考 ——佔位符語法、作用範圍，以及在應用程式內管理程式碼片段的方法。
  • Spck Editor Lite ——包含自訂程式碼片段的一次性購買版本。
  • 價格 —— Spck Editor 完整版的 Gold 訂閱詳情。
  • 快速開始 —— Spck Editor 的安裝及功能概覽。