✕

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）、函数式与箭头组件、自定义 hook、forwardRef 以及 Context Provider 模式。

目标模式：javascript_ls · 下载 react.json

App Router 脚手架（page、layout、loading、error、not-found）、路由处理程序、server actions、generateMetadata/StaticParams、Link、Image、动态 import、导航 hook 以及中间件。

目标模式：javascript_ls · 下载 nextjs.json

Composition API 基础原语、生命周期 hook、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 的安装和功能概览。