Better Input：VSCode插件开发指南

0.准备工作

先安装（更新） node.js 和 nmp

  • node 更新

    去 Node.js 官网下载最新版本，然后重新安装在原来的安装路径下（第一次下载可只进行第三步）

    1. node -v查看当前版本是否是最新版本
    2. where node 查看之前的安装路径
    3. 去 Node.js 官网下载 LTS 版本
    4. 执行 node -v 查看现在的版本信息

  • npm -v 更新

    1. 查看当前版本
    2. npm install -g npm 更新版本
    3. npm cache clean --force 清理 npm 缓存数据

1.创建项目

  1. npm install -g yo 安装 Yeoman 工具集
  2. npm install -g generator-code 安装 generator-code 模块
  3. yo code 创建新项目

2.编写插件

打开项目，按下 F5 ，会打开一个 扩展开发宿主VSCode 这个窗口包含了你编写的插件

在命令面板( Ctrl+Shift+P )中输入Hello World命令，会在右下角出现 Hello World from *****! 的提示，说明插件运行成功了。

如果右下角没有出现提示，可能是插件默认支持的 VSCode 版本过高，高于你当前的 VSCode 版本。打开项目里的 package.json 文件，将 "vscode": 后面的版本改低一点： 1.8.1标识你的插件只与1.8.1的 VSCode 兼容， ^1.8.0 则表示你的插件向上兼容，包括 1.8.1, 1.9.0 等等。

文件目录如下：

1
2
3
4
5
6
extension name/
├── src/
│   └── extension.js
├── package.json
├── 其它文件
└── ...

框架搭好后主要修改两部分：extension.js 和 package.json

  • package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 插件名称，必须全部小写且无空格
"name":

// 插件在VSCode中显示的名称
"displayName":

// 插件的简要描述
"description":

// 版本号
"version":

// 插件图标
"icon":

// 发布者的名称（发布前加上）
"publisher":

// 插件所支持的VSCode的最低版本
"engines":

// 插件所属的类别
"categories":

// 插件关键词
"keywords":

// 插件激活的事件
"activationEvents": 

// 插件的主入口文件
"main":
  • extension.js
1
2
3
4
5
6
7
8
9
10
11
12
13
// 引入VSCode的API模块
const vscode = require('vscode');

// 插件激活函数
function activate(context) {
    /*
    在这里开始编写代码
    */
}

// 代码

其它···

以上是主要会用到或者修改的部分

3. 本插件实现方法

出于安全性和可控性的考虑， VSCode 并没有提供原生的 API 来直接模拟键盘事件。尽管 VSCode 本身不提供直接的键盘模拟事件的 API ，但仍可以尝试使用第三方的 JavaScript 库，如robotjs 来模拟键盘事件。 robotjs是一个跨平台的 Node.js 库，可以用于模拟键盘和鼠标事件。用户想使用他必须先使用 npm 进行安装： npm install robotjs 然后就是疯狂报错 🤣👉🤡

而且这个方法不够优雅，不能够做到开箱即用（需要用户自己配置环境)

于是在网上一顿乱搜，找到了 AutoHotkey （ 什么是 AHK ? ） AutoHotKey （缩写为 AHK ）是一个免费开源的自动化脚本语言和工具，用于自定义键盘快捷键、自动化任务和创建自定义的宏。通过预先编写好的 AHK 脚本，并将其打包成 exe 文件，可以在没有安装 AutoHotkey 的电脑上运行脚本。

接着就是编写 AHK 脚本了。我在 GitHub 上找到一份用 AutoHotKey V2 版本 编写的切换输入法脚本

然后直接在 extension.js 中适时调用切换输入法的 exe 即可

4.发布插件

  • 先在 package.json 中填好插件的图标和作者， 然后修改框架里的 README.md 文件

    1
    2
    "icon": "图标.png",
    "publisher": "作者",

  • 直接在 VSCode 终端安装 vsce ： npm install -g vsce

    如果出现报错，可以在 cmd 中安装，效果也是一样的

  • 在 VSCode 终端安装打包插件 ： vsce package

成功打包会在根目录自动生成一个 .vsix 文件

如果出现上图报错， 以管理员身份打开 PowerShell （按下 win 后输入 PowerShell ），在打开的 PowerShell 窗口中，运行命令 Set-ExecutionPolicy RemoteSigned 以解除脚本执行策略的限制。

  • 发布到插件市场

    打开 Extensions for Visual Studio 右上角的 Publish extensions ，再点击左侧的 Create publisher 填完基本信息后返回。在 New extension 中选择 Visual Studio Code ，点击如下红框内按钮上传刚才生成的 .vsix 文件

注意，上传的 logo 应为 128px X 128px 的，在这个网站可以更改图片尺寸

上传完成后等几分钟就能在插件市场中找到这个插件了