any-rule vscode插件开发全解析：从构思到发布-优快云博客

any-rule vscode插件开发全解析：从构思到发布

【免费下载链接】any-rule 🦕 常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台项目地址: https://gitcode.com/gh_mirrors/an/any-rule

你是否还在为编写正则表达式而烦恼？是否常常因为记不住复杂的正则规则而浪费大量时间？any-rule VS Code插件将彻底解决这些问题，让你轻松获取和使用常用正则表达式。本文将带你深入了解any-rule VS Code插件的开发全过程，从最初的构思到最终的发布上线，读完你将掌握插件开发的核心流程和关键技术点。

项目概述

any-rule是一个功能强大的正则表达式工具库，支持web、vscode、idea、Alfred Workflow等多个平台。其中VS Code插件是其重要组成部分，旨在为开发者提供便捷的正则表达式查询和插入功能。

项目路径：gh_mirrors/an/any-rule

核心功能

通过F1命令打开正则列表并搜索
右键菜单选择正则插入
代码中输入触发字符串"@zz"快速插入
正则表达式可视化解析

项目结构

any-rule/
├── src/                  # 插件源代码
│   ├── extension.ts      # 插件入口文件
│   ├── useQuickPick.ts   # 快速选择功能实现
│   └── ...
├── packages/www/src/     # web端代码
│   └── RULES.js          # 正则规则定义
├── __test__/             # 测试文件
├── images/               # 图片资源
└── ...

开发环境搭建

技术栈选择

编程语言：TypeScript
构建工具：npm scripts
测试框架：Jest
版本控制：Git

项目初始化

首先，克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/an/any-rule
cd any-rule

安装依赖：

npm install

核心功能实现

插件入口设计

插件的入口文件是src/extension.ts，它负责激活插件并注册各种命令和功能：

import { ExtensionContext } from 'vscode';
const RULES = require('../packages/www/src/RULES.js');
import useCommand from './useCommand';
import useQuickPick from './useQuickPick';
import useMenuCommand from './useMenuCommand';

export function activate(context: ExtensionContext) {
    useCommand(context, RULES);
    useQuickPick(context, RULES);
    useMenuCommand(context, RULES);
}

export function deactivate() { }

在activate函数中，我们注册了三种主要交互方式：命令面板、快速选择和菜单命令，它们共同构成了插件的核心交互系统。

正则规则管理

所有正则规则都集中定义在packages/www/src/RULES.js文件中，采用JSON格式存储，每条规则包含标题、正则表达式和示例：

module.exports = [{
    title: '火车车次',
    rule: /^[GCDZTSPKXLY1-9]\d{1,4}$/,
    examples: ['G1868', 'D102', 'D9', 'Z5', 'Z24', 'Z17']
},
{
    title: '手机机身码(IMEI)',
    rule: /^\d{15,17}$/,
    examples: ['123456789012345', '1234567890123456', '12345678901234567']
},
// 更多规则...
];

这种集中管理的方式使得规则的维护和更新非常方便，同时也确保了多平台（web和VS Code）使用的是同一套规则。

快速选择功能

快速选择功能是插件的核心交互方式之一，实现于src/useQuickPick.ts文件中。它通过VS Code的CompletionItemProvider提供代码补全功能，当用户输入触发字符串时，显示正则列表供选择：

const disposable = languages.registerCompletionItemProvider(supportedLanguages.split(','), {
    provideCompletionItems(document, position) {
        const { triggerString } = getConfig();
        if (!triggerString) return [];

        const linePrefix = document.lineAt(position).text.substr(0, position.character);
        if (!linePrefix.endsWith(triggerString)) return [];

        setTimeout(() => {
            window.showQuickPick(RULES.map(({ examples, title, rule }) => {
                return {
                    label: title,
                    rule: String(rule),
                    detail: `例如: ${examples.join(' 或 ')}`
                };
            }), {
                placeHolder: '请输入关键词'
            }).then(item => {
                if (!item) return;
                insertRule(document, position, item.rule);
                // 日志和消息提示...
            });
        }, 10);
        return [];
    }
}, triggerStringEnd);

这段代码实现了以下功能：

注册代码补全提供者
监听触发字符串
显示正则列表供用户选择
将选中的正则表达式插入到代码中

正则插入功能

当用户选择某个正则表达式后，需要将其插入到代码中。insertRule函数实现了这一功能：

function insertRule(document: TextDocument, position: Position, ruleString: string) {
    const { triggerString } = getConfig();
    const editor = window.activeTextEditor;
    if (!editor) return;
    
    editor.edit(editBuilder => {
        const line = document.lineAt(position);
        const startPostion = position.translate(0, -triggerString.length);
        editBuilder.replace(new Range(startPostion, position), ruleString);
        
        setTimeout(() => {
            // 选中插入的正则表达式
            const endPostion = new Position(line.lineNumber, startPostion.character + ruleString.length);
            editor.selection = new Selection(startPostion, endPostion);
        }, 0);
    });
}

正则规则管理

规则定义格式

正则规则的定义格式在packages/www/src/RULES.js中，每条规则包含以下字段：

title: 规则名称
rule: 正则表达式
examples: 示例值数组
counterExamples: 反例值数组（可选）

例如手机号规则的定义：

{
    title: '手机号(mobile phone)中国(严谨)',
    rule: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[01256789]))\d{8}$/,
    examples: ['008618311006933', '+8617888829981', '19119255642']
}

添加新规则

要添加新的正则规则，只需在RULES.js文件中添加一个新的规则对象，然后运行测试和构建命令：

npm run test:rules
npm run build:md

测试与调试

单元测试

项目的测试文件位于test/rule.js，运行测试命令：

npm run test:rules

VS Code插件调试

在VS Code中，按下F5即可启动插件调试会话，这将打开一个新的扩展开发宿主窗口，你可以在其中测试插件功能。

打包与发布

插件打包

使用VS Code提供的vsce工具打包插件：

npm install -g vsce
vsce package

发布到市场

打包完成后，得到一个.vsix文件，可以将其发布到VS Code市场：

vsce publish

功能演示

使用方法1：通过F1命令

按下F1键，输入"any-rule"，选择相应命令，然后搜索需要的正则表达式：

F1命令使用

使用方法2：右键菜单

在编辑器中右键点击，选择"🦕正则大全"，然后选择需要的正则表达式：

右键菜单使用

使用方法3：触发字符串

在代码中输入"@zz"，然后选择需要的正则表达式：

触发字符串使用

正则表达式可视化

选择正则表达式后，可以点击"🤖图解正则"查看可视化解析结果：

正则可视化

项目贡献指南

如果你想为any-rule项目贡献代码或正则规则，可以按照以下步骤操作：

在packages/www/src/RULES.js中添加新的正则规则
运行npm run test:rules进行测试
运行npm run build:md更新README.md
提交PR到develop分支

详细贡献指南请参考项目的README.md。

总结与展望

any-rule VS Code插件通过简洁的界面和便捷的操作，极大地提高了开发者使用正则表达式的效率。本文详细介绍了插件的开发过程，包括项目结构、核心功能实现、测试与发布等方面。

未来，我们计划添加更多功能，如自定义正则规则、正则表达式验证等，让插件更加实用和强大。

如果你觉得这个插件对你有帮助，请给项目点赞和收藏，也欢迎关注项目的后续更新！

【免费下载链接】any-rule 🦕 常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台项目地址: https://gitcode.com/gh_mirrors/an/any-rule

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考