VSCode简介
VSCode是微软开源的一款基于Electron开发的代码编辑器。具有对TypeScript,JavaScript和Node.js的内置支持。同时提供了强大的插件拓展机制,并提供插件市场供开发者发布、下载插件。
VSCode组成
主要由三部分组成:Monaco Editor,Extension Host以及Language Server Protocol & Debug Adapter Protocol。
Monaco Editor:是一个网页版的编辑器,可以反映出符合LSP协议的插件的语言特性。
Extension Host:VSCode的主进程和插件进程是分开管理的,Extension Host就是用来管理插件进程的。
Language Server Protocol & Debug Adapter Protocol:是现在主流浏览器都会支持的两种协议,负责语言的编译和调试。
VSCode插件的作用
VSCode插件可以对以下几部分进行操作和扩展:主题、通用功能、工作区、程序语言。
主题包括色彩主题和图标主题两部分。
通用功能包括配置、快捷键、数据存储等。
工作区包括对活动栏、提示框、状态栏等扩展。
程序语言包括语法高亮、语义高亮、代码库管理等。
VSCode插件基础
插件-主题-色彩
插件-主题-图标
通用功能
通用功能包括:命令、配置、数据存储、显示通知、进度条等。
工作区扩展
工作区是指整个VS Code UI。包括:标题栏、活动栏、侧边栏、面板、编辑器群和状态栏。
程序语言-语言高亮
语言高亮包括语法高亮和语义高亮。
语法高亮包括两部分:分词、主题化。
分词:将文本分割为一系列符号(包括单词和标点)。
主题化:根据主题或用户设置,对符号进行着色添加样式。
VSCode插件开发
VSCode插件环境
环境变量 版本
vscode 1.52.1
npm 6.14.8
nodejs 14.9.0
yo脚手架会生成一个基础的VSCode插件项目。运行生成器,然后填好下列字段:
这样生成了最基本的VSCode插件。
VSCode生命周期
从生命周期来看,VSCode有三个部分:Activation Event(定义插件触发时间)、Contribution Point(定义插件功能)和Register(注册监听事件)。
Contribution Point定义的是插件作用的方面,以及实现某些功能,比如插件修改了哪些指令、配置以及视图。
Activation Event定义插件触发的时间点,比如输入某个指令、修改某个文件、打开某个视频。
Contribution Point和Activation Event通常是在package.json中定义。
Register注册监听事情,当监听到某个事件发生的时候,触发相应的操作。位于入口文件(默认是 extension.ts)的activate()函数中。
插件打包发布
使用vsce可以进行插件的打包、发布。(vsce一个用于将插件发布的命令行工具。)
可以使用以下方式将开发的插件发布到插件市场,便于其他人下载使用插件。
如果仅希望指定范围内使用,则无需发布。使用下面指令打包生成vsix文件,通过VSCode安装即可使用。