vscode插件开发(1)-yeoman下载安装

孟沛
2023-12-01

vscode 是通过Electron实现跨平台的,而Electron则是基于Chromium和node.js,vscode界面,就是通过Chromium进行渲染的,同时,vscode是多进程架构,当vscode第一次被启动时会创建一个主进程,每个窗口,都会创建一个渲染进程,榆次同时,vscode会为每个窗口创建一个进程专门来执行插件,即Extension Host
除了以上三个主要的进程之外,还有两种特殊的进程,第一种是调试进程vscode为调试窗口创建了Debug Adaper,进程,渲染进程会通过VS code Debug Protocol和Debug Adapter进程通讯,第二种则是Language Server

VS code创建Extension Host进程的方式,就是创建一个新的Electron进程,并且以node.js的形式运行,也就是说,这个进程就是一个完整的node.js进程

开发vscode插件的时候:

  • 插件就是一个node.js应用
  • 在应用中,可以直接访问VS code的API,通过API操作VS code
  • 每当打开一个窗口,VS code就会为这个窗口创建插件进程,并且按需要激活插件,同一时间,开发的插件代码有可能被多次运行

vscode是居于electron,前端这里不需要考虑兼容写法

vscode构建扩展

确保已经安装node.js和git,官网提供了推荐的开发工具:yeoman,yeoman是一个脚手架工具,通过yeoman可以快速创建代码模板
下载

npm install -g yo generator-code

创建

yo code xxx(文件名)
  1. what type of extension do you want to creat ?:创建什么类型的模板
  • New Extension(TypeScript):通过TS编程提供插件功能
  • New Extension(JavaScript):通过JS编程提供插件功能,结果类似,因为TS最后需要被编译成JS再发布
  • New Color Theme:主题插件
  • New Language Support:语言支持
  • New Code Snippets:代码片段
  • New Keymap:分享快捷键
  • New Extension Pack:多个插件组合分享

选择不同类型模板后接下来的问题会有所不同

输入全部的问题后会自动创建文件,安装需要的依赖,全部安装完毕后,会提示运行下面的命令打开插件

cd xxx(同上的文件名)
code .

参考链接:https://geek-docs.com/vscode/vscode-plugin-dev/vscode-create-a-plug-in.html

 类似资料: