vscode-编写插件(一)

 

前言

一、安装yeoman和genertor

二、配置项目

1. yo code

2.  运行插件

3. 运行插件

三、插件调试

1. 为什么是输入Hello World

2. 调试

总结


前言

这里是为了记录一次完整编写vscode插件的过程,作者的操作系统是win10,既然都开发vscode插件了,默认vscode、node、git都已安装。

参考地址:https://code.visualstudio.com/api/get-started/your-first-extension


 

一、安装yeoman和genertor

npm install -g yo generator-code

二、配置项目

1. yo code

yo code

根据提示,选择自己安装项目的配置

vscode-编写插件(一)

 

2.  运行插件

用vscode打开生成的项目,使用F5或者点击下图位置run起来,这时候会新起一个插件开发的新窗口

vscode-编写插件(一)

vscode-编写插件(一)

3. 运行插件

F5启动后,Ctrl+Shift+P打开命令行搜索板,输入Hello World,然后选中,会发现下方弹出插件提示成功信息。(这里不好截图,就截图的官方文档视频里的)

vscode-编写插件(一)

vscode-编写插件(一)

 

三、插件调试

1. 为什么是输入Hello World

这里最主要的两个文件是extension.js和package.json(截图时项目已替换成Code Block关键字)

vscode-编写插件(一)

vscode-编写插件(一)

在extension.js里会去注册命令行,然后找到package.json里对应的activationEvents,然后输入的Hello World(Code Block)对应的就是commands中,当然,你也可以注册多个,然后在activationEvents和commands配置多个即可。

 

2. 调试

调试就更简单了,在要调试的左侧地方点击即可,然后reload 插件的窗口即可,再搜索Code Block,然后你就会发现debugger在该位置,左侧还能看到变量等信息

PS:Ctrl+Shift+P,然后选择reload window

vscode-编写插件(一)


总结

后续会介绍怎么发布到插件平台,代码块插件的开发

上一篇:我有服务器啦!


下一篇:一位码农决定去当rapper