VSCode插件开发
VSCode插件开发
- 安装脚手架
- 初始化插件目录
- 调试运行插件
- 在activitybar中添加图标
- 插件打包
- 插件使用
- 打包报错
- Make sure to edit the README.md
(完整代码)[https://download.csdn.net/download/qq_17129291/91161160]
安装脚手架
npm install -g yo generator-code
初始化插件目录
yo code
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below #### ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
调试运行插件
打开src/extension.ts文件，按F5或者点击运行-启动调试或者点击下图按钮均可启动调试窗口。
在启动的调试窗口中按ctrl+shift+P输入命令名称即可调出测试例子。
运行效果如图（底部状态栏弹出通知消息）：
打开
package.json修改其中节点内容后保存：
在调试窗口中按ctrl+R即可刷新页面，再重新按ctrl+shift+P输入刚刚修改的HelloVSC即可执行命令。
注："command": "vscdemo.helloWorld"需要与src\extension.ts中的registerCommand('vscdemo.helloWorld',function())保持一致。
在activitybar中添加图标
- 在
src\extension.ts中添加如下代码：
class YourTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {getTreeItem(element: vscode.TreeItem): vscode.TreeItem {return element;}getChildren(element?: vscode.TreeItem): Thenable<vscode.TreeItem[]> {return Promise.resolve([new vscode.TreeItem('Item 1'),new vscode.TreeItem('Item 2')]);}
} // 注册视图const treeDataProvider = new YourTreeDataProvider();vscode.window.registerTreeDataProvider('vscdemo.view', treeDataProvider);
2.
在package.json的contributes中添加如下代码
"viewsContainers": {"activitybar": [{"id": "vscdemo","title": "Demo Extension","icon": "media/shop.svg" }]},"views": {"vscdemo": [{"id": "vscdemo.view","name": "Demo View"}]}
3. 在根目录添加media文件夹，放置一个名叫shop.svg的图片。
注：图标需要使用 SVG 格式
viewsContainers 定义 Activity Bar 容器
views 定义容器内的具体视图
需要实现 TreeDataProvider 来提供视图内容
4.在调试窗口中按ctrl+R即可刷新页面即可看到新加的图标及图标对应的内容。
插件打包
vsce是vscode extension的缩写，可用于插件的打包和发布。
执行vsce package命令进行打包。
npm install -g vsce
vsce package
打包过程中会出现一些警告，选择
n就行。
或者直接执行vsce package --ignore-warnings
插件使用
打包报错
Make sure to edit the README.md
PS D:\HD\Project\demo\VSCExtension\vscdemo> vsce package
Executing prepublish script 'npm run vscode:prepublish'...> vscdemo@0.0.1 vscode:prepublish
> npm run compile> vscdemo@0.0.1 compile
> tsc -p ./ERROR Make sure to edit the README.md file before you package or publish your extension.
删除After writing up a brief description...之前的这句代码即可。
参考资料：
官网教程
甚至用不了五分钟就能学会vscode插件开发