VS Code markdown格式化的插件編寫(2)[開發流程]

前言

第一篇: 介紹編寫插件的準備和如何發佈.

第二篇: 介紹插件簡單功能的具體編寫過程.

第三篇: 介紹插件開發遇到的問題和解決的方案,有生之年啦,有生之年,若是黑契出第三季,我就更

---

俗話說的好,一千我的內心有一千個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插件裏查找

git地址在這裏~

代碼在這裏,star隨意,歡迎issues~, 也歡迎你們在vscode中使用,我會持續更新~