IMVC 交互模块生成器
一个为imvc框架提供交互式、可自定义代码片段管理系统的VS Code扩展。
功能特点
1. 通过快捷键快速访问代码片段
- 按下
Cmd+Alt+I（Mac）或Ctrl+Alt+I（Windows/Linux）打开包含可用代码片段的快速选择菜单
- 代码片段会根据当前活动文件的语言自动过滤
- 选择一个片段将其插入光标位置或替换已选中的内容
2. 保存自定义代码片段
- 在编辑器中选择代码
- 按下
Cmd+Alt+S（Mac）或Ctrl+Alt+S（Windows/Linux）将选中内容保存为自定义代码片段
- 添加名称、描述和标签来组织您的代码片段
- 自定义片段全局保存，在所有VS Code工作区中均可使用
3. 可视化代码片段浏览器
- 在侧边栏查看和管理您的代码片段
- 点击片段将其插入
- 按语言或搜索词过滤片段
- 自定义片段可通过上下文菜单选项删除
4. 右键菜单集成
- 在编辑器中右键点击可以从上下文菜单访问代码片段管理器
- 选中文本后，右键点击并选择"保存为代码片段"快速保存
- 在资源管理器中右键点击可以打开代码片段管理器面板
使用扩展
打开代码片段浏览器
- 点击活动栏中的代码片段图标
- 使用命令面板（
Cmd+Shift+P / Ctrl+Shift+P）并输入"Snippet Manager: Open Snippet Panel"
- 在编辑器或资源管理器中右键点击并选择"代码片段管理器"
插入代码片段
- 从代码片段浏览器侧边栏：点击任何片段插入
- 使用键盘快捷键：按下
Cmd+Alt+I / Ctrl+Alt+I从可用片段中选择
- 从命令面板：运行"Snippet Manager: Insert Snippet"命令
创建自定义代码片段
- 选择您要保存为片段的代码
- 按下
Cmd+Alt+S / Ctrl+Alt+S或从命令面板运行"Snippet Manager: Save Selection as Snippet"
- 或右键点击选中内容并选择"保存为代码片段"
- 为您的片段输入名称、描述和可选标签
- 片段将自动与您正在编辑的文件语言相关联
默认代码片段
扩展附带了多种常用语言的内置代码片段：
- JavaScript/TypeScript：箭头函数、类、接口等
- HTML：样板代码、组件结构
- CSS：弹性盒布局、网格布局
- Python：类、函数
- Markdown：表格、前言
📌 后置操作脚本
新功能!
后置操作脚本现在是项目特定的，并存储在您的工作区中。
📂 脚本位置
从v1.3.0开始，IMVC Snippet将后置脚本存储在：
.vscode/imvc_snipper/postActionScripts/
✨ 优势
- 项目特定定制 - 每个项目可以拥有自己定制的脚本
- 源代码控制集成 - 脚本随项目进行版本控制
- 稳定性 - 扩展更新时脚本不会丢失
- 直接编辑 - 在项目中直接编辑脚本
🛠️ 管理脚本
编辑或创建后置操作脚本：
- 打开命令面板 (
Cmd+Shift+P / Ctrl+Shift+P)
- 输入 "IMVC: Edit Post-Action Script"
- 选择现有脚本或"创建新脚本"
当您编辑项目中尚不存在的脚本时，它将从扩展的默认脚本中复制过来。
📝 可用脚本
扩展包含多个用于常见任务的脚本：
- 路由更新 - 向IMVC或Vue路由配置添加路由
- 页面信息更新 - 更新页面元数据配置
- React IFrame列表更新 - 管理iframe页面列表配置
开发
构建扩展
# 安装依赖
npm install
# 编译扩展
npm run compile
# 打包扩展
npm run vsix
运行和调试
- 在VS Code中打开项目
- 按F5开始调试
- 这将打开一个新的加载了扩展的VS Code窗口
许可证
MIT
| |
