vscode 插件开发

文章目录

vscode 插件开发
- 【demo】
- menus
- when语句语法有很多，这里列举几个常用的：
- 组间排序
- 几个调试快捷键：
- 代码为什么没生效
- 打开文件
- 这是官网给出的建议，在使用webview之前请考虑以下事项：
- 默认情况下，`vscode-resource:`只能访问以下位置中的资源：
- 发布方式

HTML+JS

【demo】

https://github.com/sxei/vscode-plugin-demo

plugin-Demo

menus

editor/title是key值，定义这个菜单出现在哪里；
when控制菜单合适出现；
command定义菜单被点击后要执行什么操作；
alt定义备用命令，按住alt键打开菜单时将执行对应命令；
group定义菜单分组；

目前插件可以给以下场景配置自定义菜单：

资源管理器上下文菜单 - explorer/context
编辑器上下文菜单 - editor/context
编辑标题菜单栏 - editor/title
编辑器标题上下文菜单 - editor/title/context
调试callstack视图上下文菜单 - debug/callstack/context
SCM标题菜单 -scm/title
SCM资源组菜单 -scm/resourceGroup/context
SCM资源菜单 -scm/resource/context
SCM更改标题菜单 -scm/change/title
左侧视图标题菜单 -view/title
视图项菜单 -view/item/context
控制命令是否显示在命令选项板中 - commandPalette

when语句语法有很多，这里列举几个常用的：

resourceLangId == javascript：当编辑的文件是js文件时；
resourceFilename == test.js：当当前打开文件名是test.js时；
isLinux、isMac、isWindows：判断当前操作系统；
editorFocus：编辑器具有焦点时；
editorHasSelection：编辑器中有文本被选中时；
view == someViewId：当当前视图ID等于someViewId时；
等等等

组间排序

控制菜单的分组和排序。不同的菜单拥有不同的默认分组。

editor/context中有这些默认组：

navigation- 放在这个组的永远排在最前面；
1_modification - 更改组；
9_cutcopypaste - 编辑组
z_commands - 最后一个默认组，其中包含用于打开命令选项板的条目

除了navigation是强制放在最前面之外，其它分组都是按照0-9、a-z的顺序排列的，所以如果你想在1_modification和9_cutcopypaste插入一个新的组别的话，你可以定义一个诸如6_test

几个调试快捷键：

F5运行
Ctrl+F2停止运行
F6下一步跳过（类似于Chrome的F10）
F5下一步跳入
F8跳过

代码为什么没生效

代码没生效一般从这几个地方去查找：

activationEvents里面添加了吗？开发的时候如果老是忘记可以直接设置成*；
代码是不是报错了？如前文所说，很多错误是不会暴露出来的，需要手动打开控制台查看；
代码是不是忘记引入了？有时候拆分多个文件之后可能忘了引入；
逻辑是不是写错了？最好的办法就是debug，这是找问题最快的方法；
版本冲突

这里重点说一下最后面的版本冲突，这个甚至可以说是vscode本身的一些bug，经常发现代码莫名其妙地没生效，怎么调试都不对，后来发现运行的根本就不是我们正在开发的那个版本，特别是当你的插件已经发了一版到应用市场并安装后，本地再按F5运行，理论上说debug运行的会覆盖已安装的，但有时候还是会出现异常情况，所以为了以防万一，当出现这种情况时可以先把已经安装的给卸载。

打开文件

打开文件是vscode.window.showTextDocument而不是vscode.workspace.openTextDocument，这个根据字面意思很容易搞错，原来老外也有命名不准确的时候啊，哈哈。

vscode.workspace.openTextDocument仅仅是加载文档并返回一个TextDocument对象，但是并不在vscode中打开；
vscode.window.showTextDocument则是在vscode中打开一个文档

这是官网给出的建议，在使用webview之前请考虑以下事项：

这个功能真的需要放在VSCode中吗？作为单独的应用程序或网站会不会更好呢？
webview是实现这个功能的唯一方法吗？可以使用常规VS Code API吗？
您的webview是否会带来足够的用户价值以证明其高资源成本？

虽然Webview令人很振奋，因为基于它我们可以随意发挥不受限制，但必须注意还是要慎用，毕竟VSCode是很注重性能的，不能因为你一个插件拖累了整个IDE，一般仅在原有API和功能以及交互方式无法满足你时才需要考虑，另外，设计糟糕的Webview也很容易在VS Code中让人感觉不舒适，不能让人家一看就觉得你这是一张网页，好看的UI也很重要。

默认情况下，`vscode-resource:`只能访问以下位置中的资源：

扩展程序安装目录中的文件。
用户当前活动的工作区内。
当然，你还可以使用dataURI直接在Webview中嵌入资源，这种方式没有限制；

发布方式

插件开发完了，如何发布出去分享给他人呢？主要有3种方法：

方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。

在编写插件的时候 VSCode 可以让插件设置 Activation Events 来对插件懒加载。比如只有打开了 Markdown 文件才打开对应的插件。这样可以降低无谓的 CPU 和内存使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tj6HvRW-1647506746419)(C:\Users\BZL\AppData\Roaming\Typora\typora-user-images\image-20201020213628885.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMEfPnps-1647506746420)(C:\Users\BZL\AppData\Roaming\Typora\typora-user-images\image-20201020220254961.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8DNgIMY-1647506746420)(C:\Users\BZL\AppData\Roaming\Typora\typora-user-images\image-20201020220645978.png)]

名称	释义	接口
Keybinding	快捷键	`contributes.keybindings`
Configuration	设置（setting）	`contributes.configuration`/`workspace.getConfiguration`
Command	命令	`vscode.commands`/`contributes.commands`
Context Menu	上下文（右键）	`contributes.menus`
Data Storage	数据存储	`ExtensionContext.workspaceState`/`ExtensionContext.globalState`/`ExtensionContext.storagePath`/`ExtensionContext.globalStoragePath`
Display Notifications	显示通知	`window.showInformationMessage` `window.showWarningMessage` `window.showErrorMessage`