likes
comments
collection
share

VSCode插件 - “躺平” 开发和发布

作者站长头像
站长
· 阅读数 4

开发插件

插件开发知识

VSCode插件开发需要前端开发的基础知识，包括但不限于Javascript（必须）、HTML和CSS（非必须）。

随着插件开发工具的版本提升，提供了对TS语法的支持，这个”躺平“插件就是采用TS开发的。

另外还需要一些Webpack方面的知识，不过不需要自己调整和优化配置，只需要根据官方教程设置即可。当然，如果后续涉及到复杂的开发工作，具备相关知识的jym也可以对工程进行优化。

VS Code 插件开发文档 - 中文 VS Code 插件开发文档 - 英文

由于我的”躺平“插件是一个已经具备完备功能的插件了，所以我就不把官方教程复制一遍了，而是跟着开发思路一步一步走下来。这样既可以贴近官方教程，又有一些脱离官方文档的内容和思考。不过由于时间有限，我只能提供思路，具体的代码请查看我的开源代码库。

”躺平“插件Github代码仓库

创建插件工程

首先需要安装好Node和Git，不写具体步骤了，直接三、二、一，上链接：

还有，需要安装VSCode。倒不是非得让你使用VSCode进行开发工作，但是你开发VSCode插件，不安装VSCode，就很......你懂得。

OK，万事俱备，正式开始。

首先打开终端，执行以下命令：

npm install -g yo generator-code

上面的命令作用是安装Yeoman和VS Code Extension Generator，这是VSCode官方提供的脚手架开发项目工具。

然后执行 yo code ，按提示输入项目信息

? What type of extension do you want to create? (Use arrow keys)
New Extension (TypeScript) 

? What's the name of your extension? 
lying

? What's the identifier of your extension? 
lying

? What's the description of your extension? 
遇事不决,躺平一下

？Initialize a git repository?
Yes

? Bundle the source code with webpack? 
Yes

? Which package manager to use? 
yarn

VSCode插件 - “躺平” 开发和发布

第一步选择Typescript是因为我平时使用的是TS，jym也可以选择New Extension (JavaScript)，最后一步包管理工具选择npm、yarn、pnpm都可以。如果你选择yarn或pnpm，请确保你本地已经安装了对应的包管理工具。

填写完上面的配置信息后，lying 项目会被创建并开始构建过程。

构建完成后，执行 code ./lying

code命令会打开VSCode，并加载命令后面传入的项目目录。

因为创建的项目根目录是当前目录下的lying目录，所以需要使用 ./lying ，这一点需要注意。

VSCode打开项目后，按下F5，你会立即看到一个 插件发开主机 窗口，其中就运行着插件。

在命令面板 Ctrl+Shift+P 中输入 lying 命令即可看到 Hello World 提示弹窗。

上面这部分如果出现问题或者有疑问，请移步 VS Code 插件开发中文文档 仔细查阅教程，再次尝试。

配置插件信息

我们已经把”躺平“插件的项目创建并运行成功，现在开始配置插件信息。

插件项目的配置信息在package.json中，我直接po出来关键内容（只记录增加和修改的内容）。

{
  "name": "lying", // 插件名称，英文
  "displayName": "躺平", // 插件商店展示的插件名称
  "description": "遇事不决，躺平一下 ~ ", // 项目描述，会展示在VSCode插件商店的插件描述位置
  "version": "0.1.4", // 没错，已经是0.1.4版本了
  "icon": "lying.png", // 插件图标，不配置的话在插件商店展示灰色占位图标
  "LICENSE": "MIT", // 开源协议
  "repository": {
    "type": "git",
    "url": "https://github.com/EvenZhu/lying.git"
  },
  "publisher": "EvenZhu", // 必须和创建的publisher保持一致
  "categories": [
    "Other"
  ],
  "main": "./dist/extension.js", // 这里指定的路径是使用webpack打包编译后的路径
  "contributes": {
    "commands": [ // 配置命令列表，配置此项，用户才可以在命令面板查询并执行该命令
      {
        "command": "evenzhu.lying", // 命令包含两部分，第一部分是标识符，第二部分是命令名称
        "title": "躺平"
      }
    ],
    "keybindings": [ // 为命令绑定快捷键
      {
        "command": "evenzhu.lying",
        "title": "躺平",
        "key": "shift+alt+ctrl+l",
        "mac": "shift+alt+cmd+l",
        "when": "true" // 代表在VSCode中任何情况下都可以通过快捷键唤起evenzhu.lying命令
      }
    ]
  },
  "scripts": {
    // 增加了下面这条指令，为了方便发布插件，后面的Access token是发布前在Azure DevOps创建的
    "vp": "vsce publish -p Access token"
  },
  "devDependencies": {
      ...官方配置，不需要任何调整
  },
  "dependencies": {
    "dayjs": "^1.11.10" // 为了计算和格式化时间
  }
}

命令开发

根据package.json中的配置 "main": "./dist/extension.js" 可以看出，入口文件应该是src下的。extension.ts。

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

接下来，在代码中出现的ExtensionContext、window、commands、workspace等，都是从'vscode'库中导入的。

插件入口代码

// src/extension.ts

import {
    ExtensionContext,
    window,
    commands,
    workspace
} from 'vscode';
import command, { finished, lyingAlert } from './command';

export function activate(context: ExtensionContext) {
    // 注册evenzhu.lying命令
    context.subscriptions.push(commands.registerCommand('evenzhu.lying', command));

    /**
     * 监听编辑器焦点变化和输入事件
     * 为了让你实现真正意义上的躺平，真是操碎了心
     */
    context.subscriptions.push(window.onDidChangeActiveTextEditor(event => {
        lyingAlert(event);
    }));

    context.subscriptions.push(workspace.onDidChangeTextDocument((event) => {
        lyingAlert(event);
    }));
}

export function deactivate() {
    finished(); // 停止“躺平”插件插件的执行逻辑
}

命令执行逻辑

快捷键或者命令激活并触发“躺平”插件后，执行逻辑如下：

弹出输入框，选择立即躺平 or 番茄钟

VSCode插件 - “躺平” 开发和发布

  • 使用QuickPick实现选择功能
// src/command.ts

const options: { [key: string]: (context: ExtensionContext) => Promise<string | void> } = {
  立即躺平: showInputBox,
  番茄钟: (context: ExtensionContext) => multiStepInput(context, (workTime: number, lyingTime: number, repeatCount: number) => {
    mode = 1;
    repeat = --repeatCount;
    doProgress(false, workHandler, workTime, lyingTime);
  })
};
const quickPick = window.createQuickPick();
quickPick.items = Object.keys(options).map(label => ({ label }));
quickPick.onDidChangeSelection(selection => {
  if (selection[0]) {
    options[selection[0].label](context)
      .then((text) => {
        if (selection[0].label === '立即躺平') {
          mode = 0;
          doProgress(true, lyingHandler, 0, Number.parseInt(text ?? '1'));
        }
      })
      .catch(console.error);
  }
});
quickPick.onDidHide(() => quickPick.dispose());
quickPick.show();

OK，逻辑梳理完毕，相关的API和使用到插件功能也已经列出来了，具体逻辑请结合源码理解，如有问题可以评论区留言。 ”躺平“插件Github代码仓库

发布插件

发布插件的教程官方已经整理出来了 发布插件教程

我今天只把关键的步骤写出来，如有疑问欢迎留言或者去官网查看详细资料。

创建组织

Azure DevOps

VSCode插件 - “躺平” 开发和发布

安装vsce

终端执行命令 npm install -g vsce

vsce是一个用于将插件发布到市场上的命令行工具。

创建Access token

打开 dev.azure.com/vscode 进入安全（Security）页面。

举例：我创建的组织（evenzhu）安全页面地址 dev.azure.com/evenzhu/_us…

VSCode插件 - “躺平” 开发和发布

选择Personal Access Token，点击New Token创建一个新的 Personal Access Token

VSCode插件 - “躺平” 开发和发布

创建发行方（publisher） - 在插件商店的发布人名称

点我创建publisher

VSCode插件 - “躺平” 开发和发布

补充信息

一定要在package.json中配置

  • icon - 插件图标
  • publisher - 创建的publisher名称

完成 README.md 和 CHANGELOG.md

  • README.md - 插件介绍、使用方法，宣传图文等
  • CHANGELOG.md - 会展示在插件商店的更改日志中

VSCode插件 - “躺平” 开发和发布

VSCode插件 - “躺平” 开发和发布

发布插件

在终端的项目根目录下执行命令 vsce publish -p <token> 进行发布

确认发布结果

  • 查看VSCode插件商店上插件是否已经发布成功
  • 插件的名称、版本、描述和其他信息是否显示正确

VSCode插件 - “躺平” 开发和发布

The end！

总结

  • 累，真累
  • 累，是因为
    • 两天的时间完成了VSCode插件开知识学习和插件开发
    • 以及发布、迭代和BUG修复
    • 又在这个过程中发布了插件创意思路和开发、发布过程
  • 值，真值
  • 值，是因为这个过程中学会了很多
    • VSCode插件开发技术
    • 插件运行的基本原理
    • 对产品设计的思考
    • 尝试理解用户思维
    • 推广营销的重要性
  • 也发现了自身的不足和增长点
    • 写作过程中发现很多知识想要说清楚太难了，必须有取舍
    • 很多知识在应用时还需要查阅文档和资料，说明并未烂熟于心
    • 时间安排过紧，文章的结构和内容无法进行有效的沉淀和优化
    • 希望这样热血的阶段，不是昙花一现，要持之以恒

PS：如果有需要补充的内容，请在评论区留言