vscode markdown格式化的外掛編寫(2)
第一篇: 介紹編寫外掛的準備和如何釋出.
第二篇: 介紹外掛簡單功能的具體編寫過程.
第三篇: 介紹外掛開發遇到的問題和解決的方案,
有生之年啦,有生之年,如果黑契出第三季,我就更
俗話說的好,一千個人心裡有一千個 README.md 的格式,但是,偶爾也需要統一一下業界格式滴,不然我的小龍女是這樣,
而你的小龍女是那樣
小孩子才做選擇,成年人都知道,我們一個都得不到:cry:
這是一個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地址在這裡~
ofollow,noindex">程式碼 在這裡,star隨意,歡迎issues~, 也歡迎大家在vscode中使用,我會持續更新~