跳至主要內容

vscode插件开发流程

CoderAn大约 2 分钟工具vscode

前置条件

  • 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
上次编辑于:
贡献者: 宗安