VS Code 插件开发体验

2024-02-08

字数统计: 1.5k字 | 阅读时长: 6分

前言

VS Code是我的主力文字编辑器，目前我的所有博客与课题调研工作都是使用它进行编辑的。Markdown格式也是我最喜欢的文本格式，它让我可以快速整理想法而仅仅考虑基本的格式。

但在做课题调研时我习惯使用[n]作为参考文献序号，VS Code不能对这种序号进行自动递增和重新索引，于是我想开发一款插件实现这两个功能，插件的名字就叫Reference Extension吧。

准备工作

0、更新npm、cnpm：

nvm install 18

# 安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org

1、安装 Yeoman 和 VS Code Extension Generator：

1	cnpm install -g yo generator-code

2、创建一个新的插件项目Reference Extension

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? Reference Extension
# ? What's the identifier of your extension? reference-extension
# ? What's the description of your extension? Literature Citation Extension
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? Yes
# ? Which package manager to use? npm

cd reference-extension

代码

主要实现两个功能：

[n]格式索引增加项时自动递增（实际只实现了一部分）。
[n]格式索引重新索引，包含删除项与增加项（实际只实现了一部分）。

// 导入 VSCode 模块
import * as vscode from 'vscode';

// 激活插件的入口函数
export function activate(context: vscode.ExtensionContext) {
    
    // 注册命令：自动递增索引
    let disposableAutoIncrement = vscode.commands.registerTextEditorCommand('rext.autoIncrement', () => {
        // 获取当前活动的文本编辑器
        const editor = vscode.window.activeTextEditor;

        if (editor) {
            // 获取当前光标位置
            const currentPosition = editor.selection.active;
            const currentLine = currentPosition.line;

            // 获取当前行的文本内容，并匹配是否以 [n] 格式结尾
            const currentLineText = editor.document.lineAt(currentLine).text;
            const match = currentLineText.match(/\[(\d+)\]\s+(.*)/);

            if (match) {
                // 获取匹配到的数字，并计算下一个数字
                const currentNumber = parseInt(match[1]);
                const nextNumber = currentNumber + 1;

                // 自增逻辑
                editor.edit(editBuilder => {
                    // TODO： 这段有问题，要修改，而且还是没有做到回车前触发。
                    for (let line = currentLine + 1; line < editor.document.lineCount; line++) {
                        const lineText = editor.document.lineAt(line).text;
                        const matchBelow = lineText.match(/\[(\d+)\]\s+(.*)/);

                        if (matchBelow) {
                            const currentNumberBelow = parseInt(matchBelow[1]);
                            const newIndexBelow = currentNumberBelow + 1;

                            // 替换下方方括号中的数字
                            const startPosBelow = new vscode.Position(line, 0);
                            const endPosBelow = new vscode.Position(line, matchBelow[0].length);
                            editBuilder.replace(new vscode.Range(startPosBelow, endPosBelow), `[${newIndexBelow}] ${matchBelow[2]}`);
                        } else {
                            // 如果下方没有符合 [n] 格式索引的项，结束循环
                            break;
                        }
                    }

                    const newPosition = new vscode.Position(currentLine + 1, 0);
                    editBuilder.insert(newPosition, `[${nextNumber}] `);
                });
            }
        }
    });

    // 注册命令：重新索引所有行的方括号
    // TODO：实际上只实现了删除一个索引时将下方索引都自动减1
    let disposableReindex = vscode.commands.registerCommand('rext.reindex', () => {
        // 获取当前活动的文本编辑器
        const editor = vscode.window.activeTextEditor;

        if (editor) {
            // 获取当前行的行号
            const currentLine = editor.selection.active.line;
            const startLine = currentLine;
            const endLine = editor.document.lineCount;

            // 定义当前列表的索引
            let currentListIndex: number | undefined = undefined;
            
            // TEMP：匹配一下
            // TODO: 查找当前列表的索引
            const lineText = editor.document.lineAt(startLine).text;
            const match = lineText.match(/\[(\d+)\]\s+(.*)/);

            if (match) {
                currentListIndex = parseInt(match[1]);
            }
            
            // TEMP：自动减1
            if (currentListIndex !== undefined) {
                // TODO：重新索引列表中的方括号数字
                editor.edit(editBuilder => {
                    for (let line = startLine; line < endLine; line++) {
                        const lineText = editor.document.lineAt(line).text;
                        const match = lineText.match(/\[(\d+)\]\s+(.*)/);

                        if (match) {
                            // 获取当前方括号中的数字和新索引
                            const currentNumber = parseInt(match[1]);
                            const newIndex = currentNumber - 1;

                            // 如果当前数字不等于新索引，替换方括号中的数字
                            if (currentNumber !== newIndex) {
                                const startPos = new vscode.Position(line, match.index!);
                                const endPos = new vscode.Position(line, match.index! + match[0].length);
                                editBuilder.replace(new vscode.Range(startPos, endPos), `[${newIndex}] `);
                            }
                        }
                    }
                });
            }
        }
    });

    // 监听文档内容变化事件
    vscode.workspace.onDidChangeTextDocument(event => {
        if (event.document.languageId === 'markdown' && event.document.fileName.endsWith('.md')) {
            const range = event.contentChanges[0].range;
            // 检查是否按下了回车键
            if (event.contentChanges[0].text === '\n') {
                vscode.commands.executeCommand('rext.autoIncrement');
            }

            // 检查是否删除了某一行
            if (event.contentChanges[0].text === '' && range.start.line !== range.end.line) {
                vscode.commands.executeCommand('rext.reindex');
            }
        }
    });

    // 将命令注册到上下文订阅中，确保插件在激活期间有效
    context.subscriptions.push(disposableAutoIncrement, disposableReindex);

    process.stdout.write('Debugging message\n');
}

// 插件被停用时调用的函数
export function deactivate() {}

这代码写的很糙，只实现了部分功能，但是也确实没时间去学markdown-it的插件实现了，以后再去实现吧（正常来说我要实现的东西通过markdown-it自定义插件插入的形式实现更方便…在插件上写插件😂）。

测试

项目F5进行调试，创建一个Markdown文件，写入对应情景内容，别忘了在package.json中设置触发条件。

打包发布

要想发布插件到市场，需要创建在Azure DevOps上创建个人访问令牌，如果没有组织则需要先创建组织。可以用GitHub账户登陆Azure DevOps创建组织，比如dev.azure.com/SilenceZheng66。

然后创建项目，在项目中创建PAT（Personal Access Tokens）并记住它。下面需要在Visual Studio Marketplace创建一个publisher，这里需要注意的是这里必须使用刚才创建个人访问令牌的微软账号，这里的publisher需要和package.json里的publisher字段一致。

准备就绪后，下载vsce，用来打包/发布/管理插件的命令行工具。

1	cnpm install -g vsce

执行发布：

# 登录
vsce login SilenceZheng66
# 发布
vsce publish --no-dependencies

使用webpack打包插件：

cnpm i --save-dev webpack webpack-cli ts-loader

# package.json 脚本如下：
"scripts": {
"vscode:prepublish": "webpack --mode production",
"compile": "webpack --mode none",
"watch": "webpack --mode none --watch"
}

参考文献

[1] https://rackar.github.io/vscode-ext-doccn/get-started/your-first-extension.html
[2] https://github.com/yzhang-gh/vscode-markdown
[3] https://juejin.cn/post/7327570230775201826
[4] https://zhuanlan.zhihu.com/p/459554765
[5] https://juejin.cn/post/6844903921555603470
[6] https://markdown-it.github.io
[7] https://juejin.cn/post/7076649162653040647

后记

首发于 silencezheng.top，转载请注明出处。