让 Cursor 教我写插件

1. 写在最前面

以前每次发现好玩的 VSCode 插件，都萌生写一个 VSCode 插件的想法，然后顺便探究一下其中的原理，但是每次都不知道从何入手。最近刚好版本已经提测了，就想要研究一下该怎么写一个 example 版本的 VSCode 插件。

注：「Cursor 是基于 VSCode 开源核心构建的 AI 代码编辑器」，所以其实 VSCode 的插件是可以给 Cursor 使用的。

在 Cursor 的帮助一下，笔者大概耗时 1.5h 左右，写出了两个 exmple 功能的插件。

在光标位置插入时间
将 json 配置图表化展示。

「工欲善其事，必先利其器」这句话的具象化，可能就是如此吧。

2. 插件介绍

2.1 在光标位置插入时间

2.1.1 效果

2.1.2 核心代码

当你尝试搬起石头的时候，你也许会发现其他它可能没有想象中那么重。所有恐惧都是来源于自己的想象。

在光标位置插入时间的核心代码其实只有 41 行：

javascript 复制代码

import * as vscode from 'vscode';

// 这个函数会在插件激活时被调用
export function activate(context: vscode.ExtensionContext) {
    console.log('插件 "cursor-time-inserter" 已激活！');

    // 注册命令
    let disposable = vscode.commands.registerCommand('cursor-time-inserter.insertTime', async () => {
        try {
            // 获取活动编辑器
            const editor = vscode.window.activeTextEditor;
            if (!editor) {
                await vscode.window.showInformationMessage('请先打开一个文件！');
                return;
            }

            // 获取当前时间
            const currentTime = new Date().toLocaleString();

            // 在光标位置插入文本
            await editor.edit(editBuilder => {
                editor.selections.forEach(selection => {
                    editBuilder.insert(selection.active, currentTime);
                });
            });

            // 显示成功消息
            await vscode.window.showInformationMessage(`已插入时间: ${currentTime}`);
        } catch (error) {
            console.error('插入时间时发生错误:', error);
            await vscode.window.showErrorMessage('插入时间失败！');
        }
    });

    context.subscriptions.push(disposable);
}

// 这个函数会在插件停用时被调用
export function deactivate() {
    console.log('插件 "cursor-time-inserter" 已停用！');
}

2.1.3 深入思考

demo 插件的作用是用于学习，但是如果浅尝辄止的话，学到的估计就只能是皮毛了。最近在写代码的时候有很多需要修改 json 配置的时候，每次改的时候，都觉得这个东西有点子反人类，应该支持拖拽 + 图形化展示。

支持拖拽的好处：让配置的同学更快的入手
支持图形化的好处：让新接入的同学更快速的理解上下游及功能的全集

说干就干，趁着提测的空隙学习一下，应该不算过分吧。

2.2 将 json 配置图表化展示

因为这部分插件都是笔者自己开发的类 demo 插件，就没有推到 VSCode 的插件仓库中了。推送 VSCode 仓库中的方式见参考文章。

2.2.1 效果

本地测试效果：

本地安装后的效果：

注：本地安装就是将写好的代码安装到 .cursor 的插件目录

2.2.2 核心代码

此部分核心代码基本为 cursor 写的，没有更多参考意义，此处就不做赘述了。

3. 插件演进

当前两个 demo 的插件都是按照 cursor 给的思考实现的极简版本，还能发布出去使用。后面希望能挤出时间来，搞一个自己设计的功能完整版本的 json 配置 graph 展示的插件。

3.1 关于脚手架

VSCode 插件的开发是有一个脚手架的，后面开发的时候还是得走正规流程，用脚手架来创建项目。

3.2 关于发布 VSCode 插件

在发布自己的 VSCode 插件前需要先去注册账号，这个就等后续开始真正设计的时候在搞吧，毕竟经常忘记密码的选手找回账户和密码也是一个困难。

4. 碎碎念

就先写到这里吧，要允许给自己一些消化的时间，如果逼得太狠的话，可能就会丧失掉学习的动力了吧。

影响你情绪的不是事情，而是你对事情的认知。
要知道能够治愈你的，只有你对生活本身的热爱。
别人待我如何，是我的因果；我待别人如何，是我的修行。

5. 参考资料

How to Make Your Own VS Code Extension