vscode插件开发流程
大约 2 分钟
前置条件
- Node.js
- Git
生成项目框架
yo
: Yeoman帮助您启动新项目,提供最佳实践和工具来帮助您保实现高效开发。
generator-code
: 生成yo
创建项目所需的模版
// 全局安装
npm i -g yo generator-code
// 选择模板
yo code
启动
找到src/extension.ts
文件打开,按下F5
运行,在命令行面板中输入helloworld
,选择下方的命令行, 弹窗输出Hello World from HelloWorld!
,说明环境搭建完成。
提示:如果找不到命令,请检查vscode的版本是否匹配
package.json > engines > vscode
扩展能力
通用扩展
- 注册命令、配置、绑定快捷键或上下文菜单项。
- 存储工作区或全局数据。
- 展示通知消息
- 使用快速选取收集用户输入
- 打开系统文件选取器,让用户选择文件或文件夹。
- 使用Progress API指示长时间运行的操作。
主题扩展
- 更改源代码的颜色。
- 更改VS Code UI的颜色。
- 将现有的TextMate主题移植到VS Code。
- 添加自定义文件图标。
编程语言特性扩展
- 添加显示API示例用法的悬停。
- 使用诊断程序报告源代码中的拼写或linter错误。
- 为HTML注册新的代码格式化程序。
- 提供丰富的上下文感知智能感知。
- 为语言添加折叠、面包屑和大纲支持。
工作台扩展
- 将自定义上下文菜单操作添加到文件资源管理器。
- 在边栏中创建一个新的交互式树视图。
- 定义新的活动栏视图。
- 在状态栏中显示新信息。
- 使用WebView API呈现自定义内容。
- 贡献源代码管理提供程序。
调试扩展
- 通过贡献一个调试器适配器实现,将VS Code的调试UI连接到调试器或运行时。
- 指定调试器扩展支持的语言。
- 为调试器使用的调试配置属性提供丰富的智能感知和悬停信息。
- 提供调试配置片段。
- 根据动态创建的调试配置启动调试会话。
- 跟踪调试会话的生命周期。
- 以编程方式创建和管理断点。
限制
- 不能操作vscode的dom和css
- 不能自定义样式表来修改vscode的ui