VS Code外掛開發介紹（二）

dabai發表於2019-02-16

  • 一、前言

在上一篇文章裡，我簡要介紹了 VSCode 外掛開發的基本流程，同時講解了如何獲取資料夾絕對路徑和使用者輸入的方法。最近又開發了一個新的外掛，主要用途是替換當前編輯檔案的內容。google 了一圈，發現介紹這方面的文章很少，特此記錄一下，希望對有類似需求的人有一些幫助。

  • 二、需求

需求很簡單，我需要將下面檔案的內容：

export default {
    add_member#
    manage_member_card#
    member_setting#
    search_member#
    edit_member#
    delete_member#
    assign_consultant#
    add_member_tag#
    import_member#
    modify_member_point#
};

替換為：

export default {
    add_member: `ce0`,
    manage_member_card: `ce1`,
    member_setting: `ce2`,
    search_member: `ce3`,
    edit_member: `ce4`,
    delete_member: `ce5`,
    assign_consultant: `ce6`,
    add_member_tag: `ce7`,
    import_member: `ce8`,
    modify_member_point: `ce9`,
};

可以理解為一個簡單的自動化編號工具。其中要解決的問題主要有下面三個：

  • 獲取當前檔案路徑
  • 讀取檔案內容
  • 寫檔案內容

下面介紹如何實現。

  • 三、實現

開始以為 VSCode 有現成的 API 可以取到當前檔案內容，但找了一圈搜不到，只能通過迂迴的方式實現。

第一步，獲取當前檔案的路徑：

const currentlyOpenTabfilePath = vscode.window.activeTextEditor.document.fileName;

第二步，讀取檔案內容，並拆分為陣列

const fs = require(`fs`);

const fileContentArr = fs.readFileSync(currentlyOpenTabfilePath, `utf8`).split(/
?
/);

第三步，寫檔案。由於沒法逐行替換檔案內容，只能現將原來的檔案清空，再一行一行新增回去。

fs.truncateSync(currentlyOpenTabfilePath);

fileContentArr.forEach( (line, index) => {
    let content = line;
    if (line.slice(-1) == `#`) {
        content = xxxxx;
    } 

    fs.appendFileSync(currentlyOpenTabfilePath, content + ((index == contentLength - 1) ? `` : `
`));
})

  • 四、總結

其實這個需求實現起來還是蠻簡單的，主要是要根據 VSCode 的特點將思路理順，再一步步實現。如果有更好的實現方式，請務必留言給我

相關文章