NocoBase RunJS Snippets
NocoBase RunJS 代码片段 + 类型提示 - 快速编写 JSBlock、JSField、JSColumn 等代码
✨ 功能特性
- 📦 基于 NocoBase 官方开发文档
- 🚀 包含 60+ 常用代码片段
- 🎯 覆盖 HTTP、SQL、表单、路由、弹窗等场景
- 💡 支持 JavaScript、TypeScript、JSX、TSX
- 🔧 完整的类型提示和 IntelliSense
📥 安装
方式一：VS Code 扩展市场
- 打开 VS Code
- 按
Ctrl+Shift+X 打开扩展面板
- 搜索
NocoBase RunJS Snippets
- 点击安装
方式二：VSIX 文件安装
# 下载 .vsix 文件后
code --install-extension nocobase-runjs-snippets-1.0.0.vsix
⚡ 快速开始
1. 代码片段
在 .js、.ts、.jsx、.tsx 文件中输入 nb- 即可触发代码补全：
| 前缀 |
说明 |
nb-async |
基础异步函数模板 |
nb-block |
基础 JSBlock 模板 |
nb-request-list |
HTTP 请求列表查询 |
nb-request-create |
HTTP 请求创建数据 |
nb-sql-rows |
SQL 查询多行 |
nb-msg-success |
成功提示 |
nb-modal-confirm |
确认弹窗 |
nb-router-navigate |
路由跳转 |
2. 启用类型提示（推荐）
- 按
Ctrl+Shift+P
- 输入
NocoBase: 在当前项目启用类型提示
- 回车执行
- 重启 VS Code
插件会自动创建：
tsconfig.json - TypeScript 配置global.d.ts - NocoBase 全局类型定义
3. 使用 ctx 类型提示
启用类型提示后，在函数中使用 ctx 即可获得完整的 IntelliSense：
export async function renderWelcomeBlock(ctx) {
// 输入 ctx. 后会自动提示所有可用方法
ctx.message.success('Hello!');
// 输入 ctx.libs. 后会提示 React, antd, dayjs 等
const { React } = ctx.libs;
}
📋 Snippet 完整列表
基础模板
| 前缀 |
说明 |
nb-async |
基础异步函数模板 |
nb-block |
基础 JSBlock 模板 |
HTTP 请求
| 前缀 |
说明 |
nb-request-list |
HTTP 请求列表查询 |
nb-request-create |
HTTP 请求创建数据 |
nb-request-update |
HTTP 请求更新数据 |
SQL 查询
| 前缀 |
说明 |
nb-sql-rows |
SQL 查询多行 |
nb-sql-row |
SQL 查询单行 |
nb-sql-var |
SQL 查询单个值 |
表单操作
| 前缀 |
说明 |
nb-form-get |
获取表单值 |
nb-form-set |
设置表单值 |
nb-form-validate |
校验表单 |
nb-form-link |
字段联动 |
消息提示
| 前缀 |
说明 |
nb-msg-success |
成功提示 |
nb-msg-error |
错误提示 |
nb-msg-loading |
Loading 提示 |
nb-notification |
通知提醒 |
弹窗与视图
| 前缀 |
说明 |
nb-modal-confirm |
确认弹窗 |
nb-open-drawer |
打开抽屉 |
nb-open-dialog |
打开弹窗 |
路由
| 前缀 |
说明 |
nb-router-navigate |
路由跳转 |
nb-router-back |
路由返回 |
渲染组件
| 前缀 |
说明 |
nb-render-button |
渲染按钮 |
nb-render-card |
渲染卡片 |
nb-render-input |
渲染输入框 |
nb-icon |
使用图标 |
常用场景
| 前缀 |
说明 |
nb-scene-detail |
打开详情弹窗 |
nb-scene-batch |
批量操作确认 |
nb-scene-action-refresh |
点击操作并刷新 |
🔧 手动配置（可选）
如果自动配置不生效，可以手动创建配置文件：
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"checkJs": true,
"allowJs": true,
"jsx": "react",
"skipLibCheck": true,
"strict": false,
"moduleResolution": "node",
"noEmit": true
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "global.d.ts"],
"exclude": ["node_modules"]
}
global.d.ts
插件会在执行 "启用类型提示" 命令时自动创建。
📚 文档参考
更多 API 详情请参考：
🤝 贡献
欢迎提交 Issue 或 Pull Request！
📄 许可证
MIT License
Made with ❤️ for NocoBase developers
