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

慕逸發表於2018-12-01

前言

第一篇: 介紹編寫外掛的準備和如何釋出.

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

第三篇: 介紹外掛開發遇到的問題和解決的方案,有生之年啦,有生之年,如果黑契出第三季,我就更

俗話說的好,一千個人心裡有一千個README.md的格式,但是,偶爾也需要統一一下業界格式滴,不然我的小龍女是這樣,

VS Code markdown格式化的外掛編寫(2)[開發流程]
而你的小龍女是那樣
VS Code markdown格式化的外掛編寫(2)[開發流程]

小孩子才做選擇,成年人都知道,我們一個都得不到?

這是一個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"
    }]
}
複製程式碼

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

你可以 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

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

在vscode外掛裡查詢

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

git地址在這裡~

程式碼在這裡,star隨意,歡迎issues~, 也歡迎大家在vscode中使用,我會持續更新~

相關文章