前言
本文是关于visual studio code软件上自定义插件的开发记录,将从头记录本人开发的过程,虽然网上也有很多文章,但个人在实践的过程还是会遇到不一样的问题,所以记录下来,以便于后期参考。
前期准备:
1、node.js(我用的18.18.2)
2、visual studio code
1. 安装插件开发脚手架;
-
首先,我们执行以下命令全局安装 Yeoman 和 VS Code Extension Generator:
npm install -g yo generator-code
2. 使用插件开发脚手架创建插件项目;
yo code
-
根据脚手架提示选择和填入相关信息:
-
在选项选择完成后,会进行项目依赖的安装:
-
项目依赖安装完成后,可以根据提示打开插件项目:
下面开始本地测试该插件:
注意:先打开package.json里面看vscode的版本
"engines": {
"vscode": "^1.90.0"
}
而查看我的vscode -> Help -> About, 可以看到我的vscode才1.82.2,故需要修改package.json里面的版本(否则调试搜不到该插件)
"engines": {
"vscode": "^1.82.0"
}
然后根据提示(vsc-extension-quickstart.md)开始调试该插件项目
## Get up and running straight away
* Press `F5` to open a new window with your extension loaded.
* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
* Find output from your extension in the debug console.
1. 在vscode该插件项目中,按F5(以windows为例),会自动打开调试窗口,在调试窗口,可以自行打开任意项目
2.在该界面按键 Ctrl+Shift+P,搜索 Hello World,即脚手架生成的插件名称,然后回车
可以看到右下角有出现提示即表示正常运行
对应的是extension.ts中
到此,脚手架生成的初始模板已生效,下面就开始自己的插件开发旅程!