前言

第一篇: 介绍编写插件的准备和如何发布.

第二篇: 介绍插件简单功能的具体编写过程.

第三篇: 介绍插件开发遇到的问题和解决的方案,有生之年啦,有生之年,如果黑契出第三季,我就更

俗话说的好,一千个人心里有一千个README.md的格式,但是,偶尔也需要统一一下业界格式滴,不然我的小龙女是这样,


而你的小龙女是那样

小孩子才做选择,成年人都知道,我们一个都得不到?

这是一个markdown格式化的vscode插件的详细编写过程,之前的准备和之后的发布,都在这里

脚手架分析

我们从脚手架开始, 目录如下

file: {
    out: {
        dir: '输出文件目录',
        cd: {
            src: {
                dir: '输出转换后的代码'
            },
            test: {
                dir: '输出测试代码'
            }
        }
    },
    src: {
        dir: '代码目录',
        cd: {
            extension.ts: {
                file: '代码入口'
            }
        }
    }
}
复制代码

其实, 基本只需要编写 extension.ts (如果你使用的是js模版, 就是 extension.js ), 其实都一样了~,毕竟ts也很简单 :-) 难道我会说,我也是选错了,才用的ts模版

模版里已经在extensions.ts实现了一个命令行工具

// 注册事件
let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
    // 页面提示
    vscode.window.showInformationMessage('Hello World!');
});
// 在订阅者里放入注册事件
context.subscriptions.push(disposable);
复制代码

再看 package.json

// 触发注册事件的行为
"activationEvents": [
    "onCommand:extension.sayHello"
],
"contributes": {
    // 命令行触发
    "commands": [{
        "command": "extension.sayHello",
        "title": "Hello World"
    }]
}
复制代码



你可以 command+shift+D 进入调试模式, 在自动打开的窗口里用 command+shift+p , 在命令行里输入 sayHello 会出现'hello world', 点击后, 会弹出 hello, world 的信息框

开发

配置package.json

根据我们的需求,应该是在打开markdown文档后,可以触发格式化的方法.

那么package.json中需要加上

"activationEvents": [
    "onLanguage:markdown"
],
复制代码

此外,我们还需要一些给用户可配置的能力

"configuration": {
    "type": "object",
    "title": "Markdown Formatter",
    "properties": {
        "markdownFormatter.enable": {
            "type": "boolean",
                "default": true,
                "description": "Enable/disable Markdown Formatter."
            },
            "markdownFormatter.formatOpt": {
                "type": "object",
                "default": {},
                "description": "you have code style ~~ now."
            }
        }
    }
复制代码
编写extensions.js/ts

先看

// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {}
复制代码

这个函数是插件被激活的时候被调用,这里面可以放一些公用不变的方法或变量,例如

const PERIOD_EXP = /([，,。;；！、？：])\ */g;
复制代码

这是一个匹配符号的正则.

别忘了我们之前package.json的配置,在这里可以使用worksapce.getConfiguration('markdownFormatter')来获取设置

let config = workspace.getConfiguration('markdownFormatter');
let enable: boolean = config.get<boolean>('enable', true);
复制代码

然后activate函数里:

context.subscriptions.push(vscode.languages.registerDocumentFormattingEditProvider(
    'markdown', {
        provideDocumentFormattingEdits(document, options, token) {}
    }))
复制代码

registerDocumentFormattingEditProvider 这是一个在格式化文件的时候会调用的方法,传入第一个参数是文件的格式,第二个参数是一个函数,在每次格式化后执行.

然后咧,我们就需要拿到vscode里输入的内容

const result: vscode.TextEdit[] = [];
const start = new vscode.Position(0, 0);
const end = new vscode.Position(document.lineCount - 1, document.lineAt(document.lineCount - 1).text.length);
const range = new vscode.Range(start, end);
let text = document.getText(range)
复制代码

然后正则替换一下

text = text.replace(PERIOD_EXP, '$1 ')
复制代码

接着,你需要将更新的text,覆盖掉用户的输入

result.push(new vscode.TextEdit(range, text));
return result;
复制代码

至此,你可以在调试窗口里,进行输入啦,你会发现,按下command+shift+f,会在众多标点符号后空出一格啦,下面就可以进行发布了.


目前开发了一些功能,算是可以用了,个人格式化了40篇md没有什么问题. 开发两小时,修了两天bug


在vscode插件里查找