一、基础介绍
VSCode 采用了 Electron，在语言上，VSCode 使用了自家的 TypeScript 语言开发。Electron是基于 Chromium 和 Node.js，使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，它兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
从实现上来看，Electron = Node.js + Chromium + Native API
接下来看下VS Code布局
二、插件开发
IDE介绍
Visual Studio Code（简称 VSCode）凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点，从众多 IDE 中脱颖而出，受到了广大开发人员的青睐。
VSCode 提供以下扩展能力：代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。
接下来主要介绍如何在VS Code中开发一个插件。
官方文档地址：https://code.visualstudio.com/api/references/vscode-api
2、开发环境准备
- 安装最新版本的 VSCode
- Nodejs，建议使用 LTS 版本
- 官方推荐使用的脚手架工具 Yeoman 和 Generator-code
- 插件打包和发布工具 vsce
3、安装工具
全局安装 Generator-code
jianshuangpeng@ZBMac-C02F2R9QM npm install -g yo generator-code
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
added 128 packages, removed 450 packages, and changed 730 packages in 47
全局安装 vsce
jianshuangpeng@ZBMac-C02F2R9QM ~ npm install -g vsce
changed 106 packages in 7s
4、脚手架使用
选择一个文件目录下执行命令：
yo code
选择 New Extension 类型，然后依次填写插件名称、描述、包管理工具等基础信息。
jianshuangpeng@ZBMac-C02F2R9QM ~/Documents/project yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? vscode-plugin-todo
? What's the identifier of your extension? vscode-plugin-todo
? What's the description of your extension? 测试插件
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? n
安装各种依赖后生成一个文件，目录如下, 更详细文档请查看
jianshuangpeng@ZBMac-C02F2R9QM tree -L 2 -a
.
├── .vscode
│ ├── extensions.json
│ ├── launch.json //插件加载和调试的配置
│ ├── settings.json
│ └── tasks.json // // 配置TypeScript编译任务
├── .vscodeignore
├── CHANGELOG.md //变更记录
├── README.md
├── node_modules
├── package-lock.json
├── package.json // TypeScript配置
├── src
│ ├── extension.ts // 插件源代码
│ └── test
├── tsconfig.json // ts配置文件
├── vsc-extension-quickstart.md
└── webpack.config.js
针对生成文件目录重点说明，其中最重要的文件是package.json和extension.js，了解这两个文件基本上就可以入门开发一个vscode插件了。
1、package.json
该文件是vscode扩展的清单文件，里面有很多字段，官方对每个字段都进行了详细阐述，本次我们重点阐述以下初始化后期清单文件
// package.json
{
"name": "vscode-plugin-todo", // 一个插件的ID
"displayName": "vscode-plugin-todo",
"description": "测试插件",
"version": "0.0.1",
"engines": { // 描述了这个插件依赖的最低VS Code API版本
"vscode": "^1.73.0"
},
"categories": [
"Other"
],
"activationEvents": [ // 激活事件
"onCommand:vscode-plugin-todo.helloWorld"
],
"main": "./dist/extension.js", // 插件的主入口
"contributes": { // 发布内容配置
"commands": [
{
"command": "vscode-plugin-todo.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"compile-tests": "tsc -p . --outDir out",
"watch-tests": "tsc -p . -w --outDir out",
"pretest": "npm run compile-tests && npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"@types/vscode": "^1.73.0",
"@types/glob": "^8.0.0",
"@types/mocha": "^10.0.0",
"@types/node": "16.x",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"eslint": "^8.26.0",
"glob": "^8.0.3",
"mocha": "^10.1.0",
"typescript": "^4.8.4",
"ts-loader": "^9.4.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"@vscode/test-electron": "^2.2.0"
}
}
重点关注的主要有三部分内容：activationEvents、main以及contributes。
main：指明了该插件的主入口在哪，只有找到主入口整个项目才能正常的运转
activationEvents：指明该插件在何种情况下才会被激活，因为只有激活后插件才能被正常使用，官网已经指明了激活的时机，这样我们就可以按需设置对应时机。（具体每个时机用的时候详细查看即可）。
- onLanguage 打开解析为特定语言文件时被激活，例如"onLanguage:python"
- onCommand 在调用命令时被激活
- workspaceContains 每当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时
- onView 每当在 VS Code 侧栏中展开指定 id 的视图
- onUri 每当打开该扩展的系统范围的 Uri 时
- onWebviewPanel
- onCustomEditor
contributes：通过扩展注册contributes用来扩展Visual Studio Code中的各项技能，其有多个配置，如下所示：
- commands 命令
- configuration 配置
- configurationDefaults 默认的特定于语言的编辑器配置
- keybindings 快捷键绑定
2、extension.ts
该文件时其入口文件，即package.json中main字段对应的文件（不一定叫extension.js这个名字），该文件中将导出两个方法：activate和deactivate，两个方法的执行时机如下所示：
- activate
这是插件被激活时执行的函数 - deactivate
这是插件被销毁时调用的方法，比如释放内存等。
5、运行插件
默认已经很顺利的完成上面所有的操作，接下来我们尝试启动刚才的插件，使用vscode打开文件目录后，按F5刷新
在新打开的页面中，按command+Shit+P进入「Command Palette」，输入「Hello World」执行这个项目
6、发布插件
发布插件的方式基本有三种：
1、直接共享源文件；
2、发布到插件市场；
3、打包成vsix插件安装。这里只介绍下第三种方式。
前面我们已经全局安装了vsce。现在只需要在插件根目录下执行：vsce package即可生成插件
jianshuangpeng@ZBMac-C02F2R9QM vsce package
Executing prepublish script 'npm run vscode:prepublish'...
> vscode-plugin-todo@0.0.1 package
> webpack --mode production --devtool hidden-source-map
[webpack-cli] Compiler starting...
[webpack-cli] Compiler finished
Do you want to continue? [y/N] y
DONE Packaged: /Users/jianshuangpeng/Documents/project/vscode-plugin-todo/vscode-plugin-todo-0.0.1.vsix (6 files, 3.
7、安装插件
插件安装完成后左侧菜单中会自动添加插件
