Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Interactive Snippet Manager / 交互式代码片段管理器New to Visual Studio Code? Get it now.
Interactive Snippet Manager / 交互式代码片段管理器

Interactive Snippet Manager / 交互式代码片段管理器

ywzzy

|
3 installs
| (0) | Free
A VS Code extension to manage, customize and use code snippets with a visual interface / 一个用于管理、自定义和使用代码片段的VS Code扩展,提供可视化界面
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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"命令

创建自定义代码片段

  1. 选择您要保存为片段的代码
  2. 按下Cmd+Alt+S / Ctrl+Alt+S或从命令面板运行"Snippet Manager: Save Selection as Snippet"
  3. 或右键点击选中内容并选择"保存为代码片段"
  4. 为您的片段输入名称、描述和可选标签
  5. 片段将自动与您正在编辑的文件语言相关联

默认代码片段

扩展附带了多种常用语言的内置代码片段:

  • JavaScript/TypeScript:箭头函数、类、接口等
  • HTML:样板代码、组件结构
  • CSS:弹性盒布局、网格布局
  • Python:类、函数
  • Markdown:表格、前言

📌 后置操作脚本

新功能!
后置操作脚本现在是项目特定的,并存储在您的工作区中。

📂 脚本位置

从v1.3.0开始,IMVC Snippet将后置脚本存储在:

.vscode/imvc_snipper/postActionScripts/

✨ 优势

  • 项目特定定制 - 每个项目可以拥有自己定制的脚本
  • 源代码控制集成 - 脚本随项目进行版本控制
  • 稳定性 - 扩展更新时脚本不会丢失
  • 直接编辑 - 在项目中直接编辑脚本

🛠️ 管理脚本

编辑或创建后置操作脚本:

  1. 打开命令面板 (Cmd+Shift+P / Ctrl+Shift+P)
  2. 输入 "IMVC: Edit Post-Action Script"
  3. 选择现有脚本或"创建新脚本"

当您编辑项目中尚不存在的脚本时,它将从扩展的默认脚本中复制过来。

📝 可用脚本

扩展包含多个用于常见任务的脚本:

  • 路由更新 - 向IMVC或Vue路由配置添加路由
  • 页面信息更新 - 更新页面元数据配置
  • React IFrame列表更新 - 管理iframe页面列表配置

开发

构建扩展

# 安装依赖
npm install

# 编译扩展
npm run compile

# 打包扩展
npm run vsix

运行和调试

  1. 在VS Code中打开项目
  2. 按F5开始调试
  3. 这将打开一个新的加载了扩展的VS Code窗口

许可证

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft