VS Code插件开发入门

认识 Vs Code

Visual Studio Code 是微软推出的开源的跨平台编辑器，它配备了内置的JavaScript的，TypeScript和Node.js的支持，并具有其他语言（C ++，C＃，Python和PHP）的扩展以及一个丰富的生态系统。本身专注于核心以及最常用功能开发并提供简洁流程体验，vscode的很多强大功能都是基于插件实现的。

VS Code 是基于 Electron (原来叫 Atom Shell) 进行开发的。

Electron 基于 Node.js（作为后端运行时）和 Chromium（作为前端渲染)(Chromium 是 Google 的Chrome浏览器背后的引擎)，使得开发者可以使用 HTML, CSS 和 JavaScript 等前端技术来开发跨平台桌面 GUI 应用程序。Atom, GitHub Desktop, Slack, Microsoft Teams, WordPress Desktop 等知名软件都是基于 Electron 开发的。（通过切换开发者工具可以看到调试界面）

 

vscode插件可以做什么

当你每次在开发时，总是做一些重复冗杂的操作，你就可以把这些行为集成到你的VS Code插件中。或者在开发时候需要一些友好的提示、检测类行为以及其他你能想到的可以优化开发效率的功能都可以借助插件实现。

 

常用功能：是你在任何插件中都可能用到的核心功能：

• 注册命令、配置、快捷键绑定、菜单等。
• 保存工作区或全局数据。
• 显示通知信息。
• 使用快速选择获得用户输入。
• 打开系统的文件选择工具，以便用户选择文件或文件夹。
• 使用进度API提示耗时较长的操作。

 

扩展工作台功能：

• 自定义资源管理侧边栏的菜单行为
• 在侧边栏中创建新的、交互式的TreeView
• 定义新的活动栏视图
• 在状态栏显示新的信息
• 使用WebView API显示自定义内容
• 配置源控制(git/svn等)来源

 

限制：

为了避免插件影响到VS Code的性能和稳定性。比如：插件不可以修改VS Code UI底层的DOM。VS Code基于Electron，实质上是个Node.js环境，单线程，任何代码崩了都是灾难性后果。为了确保不会干扰到VS Code的性能和稳定性，同时不阻断其他插件的运行，所以把插件们放到单独的进程里，阻止了插件直接访问DOM的途径。

 

 

开发前的准备

vscode插件生产工具：官方推荐使用Yeoman 和 VS Code Extension Generator。用如下命令安装：

npm install -g yo 

generator-codeyo code

 

开发初体验：

github地址

src/extension.js：

在package.json中，在contributes.commands中注册命令并在src/extension.js中去实现，（上图）

还需要通过activationEvents告诉vscode什么时机去执行

cmd+shift+p：调出命令面板输入Hello World执行。

绑定快捷键执行：

编辑器右键绑定：

资源管理器右键绑定：

详细介绍

调试 以及 切换开发者工具

package.json详细配置：（主要配置如下图，更详细配置见package.json intro.js）：

when - 》什么情况下执行：（常用如下）：

resourceLangId == javascript：当编辑的文件是js文件时；

resourceLangId == test.js ：当前打开文件名是test.js时；

isLinux、isMac、isWindows：判断当前操作系统；

editorFocus：编辑器具有焦点时；

editorHasSelection：编辑器中有文本被选中时；

多个条件可以通过与或非进行组合，

例如 ：editorFocus && isMac && resourceLangId == javascript

更多参见官网：code.visualstudio.com/docs/getsta…

入口文件extention.ts：

插件入口文件会导出两个函数，activate 和 deactivate，你注册的任意一个激活事件被触发之时执行activate，deactivate则提供了插件关闭前执行清理工作的机会。

vscode的常用API：（详细见node_modules/vscode模块中的vscode.d.ts文件）

参见src/sample/api.js文件

一些其他的demo：

（参见sample文件夹）实现如下功能：

统计选中的单词数 ->实时统计单词数、

跳转到对应依赖包、

鼠标悬停时自定义提示信息、

快捷生成console

 

【补充一些其他】

1、npm依赖包中版本前的符号含义：

2、菜单项可以被分成组。它们按照以下默认值/规则按字典顺序排序。

以编辑器分组为例：

您可以将菜单项添加到这些组中，或者在这些组中间、下面或者上面添加新的菜单项组。只有编辑器上下文菜单允许这个分组控制。

editor/context中有这些默认组：

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

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

默认同一个组的顺序取决于菜单名称，如果想自定义排序的话可以再组后面通过@<number>的方式来自定义顺序

 

 

 

 

参考文章：https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html