ofs-ui Code Helper
一个为 ofs-ui 组件库提供智能代码提示的 VS Code 扩展。
🚀 快速开始
使用
- 在 Vue 文件中输入
<Ofs 或 ofs 开始使用
- 点击左侧活动栏的
ofs-ui 图标打开配置面板
- 根据需要调整配置选项
🎯 主要功能
🚀 核心功能
- 智能组件补全：自动识别和补全 ofs-ui 组件
- 属性智能提示：提供组件属性和事件的详细说明
- 注释提取：自动提取并显示属性和事件的注释信息
- 动态绑定支持：支持
:prop 动态绑定语法
- TypeScript 声明文件解析：自动解析
.d.ts 文件获取完整属性信息
⚙️ 配置选项
- 自动补全开关：启用/禁用自动补全功能
- 注释显示：控制是否显示属性和事件的注释
- 引号自动插入：自动插入引号并将光标定位到引号内
- 动态绑定语法：选择使用
:prop 或 prop 语法
- 组件名格式：支持 PascalCase 和 kebab-case 格式
- 启用 TS 声明合并：从
.d.ts 中合并属性（默认开启）
🎯 触发方式
- 组件补全：输入
<ofs 或 ofs 触发组件补全
- 属性补全：在组件标签内输入属性名
- 事件补全：在组件标签内输入
@ 触发事件补全
- 属性值补全：在属性名后输入
: 触发值补全
💻 使用体验
- 首次激活或首次解析组件时，右下角会显示"正在解析 ofs-ui 组件…"进度提示
- 手动刷新组件缓存时，右下角显示"正在刷新 ofs-ui 组件缓存…"，完成后不再弹出额外提示弹窗
🔧 TypeScript 声明文件解析
功能说明
插件会自动扫描 node_modules/ofs-ui/types/ 目录下的 TypeScript 声明文件（.d.ts），解析组件的完整属性信息，特别适用于使用 v-bind="$attrs" 透传的组件。
解析机制
- 自动扫描：扫描
node_modules/ofs-ui/types/ 目录
- 智能匹配：根据组件名自动匹配对应的声明文件
- 属性合并：将声明文件的属性与 Vue 文件解析的属性合并（声明文件优先）
- 来源标识：在补全提示中显示属性来源（Vue 文件或声明文件）
- 接口结构展示：若属性类型为接口/对象，补全文档中以代码块展示完整声明结构
支持的文件格式
excel-export.d.ts - 对应 excel-export 组件table.d.ts - 对应 table 组件button.d.ts - 对应 button 组件- 等等...
使用示例
// 声明文件示例：excel-export.d.ts
export declare class OfsExcelExport extends OfsUIComponent {
visible?: boolean;
loadingJsx?: boolean;
onConfirm?: ((form: IFrom) => void) | null;
onClose?: (() => void) | null;
}
<!-- 使用时的智能补全 -->
<OfsExcelExport
:visible="true" <!-- 来自声明文件 -->
:loadingJsx="false" <!-- 来自声明文件 -->
@confirm="handleConfirm" <!-- 来自声明文件 -->
@close="handleClose" <!-- 来自声明文件 -->
/>
| |
