[VS Code擴充套件]寫一個程式碼片段管理外掛（一）：介紹與介面搭建

@

目錄

• VS Code擴充套件機制
• 專案搭建
• 建立UI元素
  • 活動欄按鈕
  • 主邊欄檢視
  • 主邊欄工具欄按鈕
  • 側邊欄右鍵選單
  • 編輯器右鍵選單
• 專案地址

• [VS Code擴充套件]寫一個程式碼片段管理外掛（一）：介紹與介面搭建
• [VS Code擴充套件]寫一個程式碼片段管理外掛（二）：功能實現

寫程式碼的時候，經常要輸入重複的內容，雖然VS Code提供了程式碼片段功能，但是建立自定義程式碼片段時，需要寫JSON格式的配置，這些JSON檔案在使用者資料夾下，沒有統一的介面管理，而且對於我來說，製表符補全這樣的高階功能並不是必需的。

變數對映可以透過內建的對映規則在插入片段時自動生成這些內容。VS Code自帶的功能比較單一，我需要一個自定義的變數對映功能，可以自定義Key-Value做為可靈活配置的變數對映。

VS Code提供了一組API，用於自定義或增強軟體功能，稱之為VS Code外掛（或擴充套件）。

我基於上述的考慮，寫一個帶有變數對映功能程式碼片段管理VS Code擴充套件：SnippetCraft。

VS Code擴充套件機制

首先需要大致瞭解VS Code的擴充套件機制，VS Code可以看成一個框架，可以想象是你車上的儀表臺，比如時速表儀表臺，中控大屏，燈光、空調控制等獨立皮膚所在的佔位。

VS Code這些框架的部分，官方稱之為“容器”，整個VS Code由6個容器組成，分別是：活動欄，主邊欄，編輯器，輔邊欄，皮膚，狀態列。

每個容器中，包含擴充套件提供的按鈕，或者檢視的區域。類似儀表臺控制上的控制皮膚，比如燈光皮膚上有燈的開關，有些是預留的槽位。透過增加改裝件使用這些預留槽位。

這些區域，官方稱之為“專案”。常用的專案有側邊欄，編輯器，狀態列，皮膚上的工具欄區域。擴充套件可以將專案新增到各種容器中。

此外，VS Code擴充套件還提供常用的功能，比如資料持久化，檔案選擇器，輸入框，通知彈窗，網頁檢視等。

VS Code擴充套件是一個基礎功能，透過擴充套件可以滿足軟體的所有功能增強，包括內建的核心功能，如檔案管理，搜尋，Git，偵錯程式，這些都是透過擴充套件實現的。

VS Code為了體驗一致性，禁用擴充套件中UI元素自定義樣式。

專案搭建

請確保已安裝 Node.js。使用 Yeoman 和 VS Code 擴充套件生成器來快速建立擴充套件專案。首先安裝 Yeoman 和生成器：

npm install -g yo generator-code
yo code

專案會自動建立一個HelloWorld擴充套件。

如果手動建立專案，可以參考下面的目錄結構

my-VS Code-extension/
├── .VS Code/
│   └── extensions.json
├── src/
│   └── extension.ts
├── .gitignore
├── package.json
├── tsconfig.json
├── README.md

準備圖示，擴充套件需要一個產品展示圖示。圖示為128x128畫素的PNG格式檔案
準備活動欄按鈕圖示，圖示為24x24畫素，居中於50x40畫素的塊內，填充顏色為'rgb(215, 218, 224)'或'#d7dae0'。建議使用SVG格式的圖示。

VS Code擴充套件在package.json中宣告“貢獻點”，“貢獻點”用於描述該擴充套件可以為VS Code增強哪些功能，請參考官方說明

在package.json檔案的contributes節點中，我們新增擴充套件用到的所有命令：

Command	操作
extension.snippetCraft.searchSnipps	程式碼片段搜尋
extension.snippetCraft.insertSnipps	插入程式碼片段
extension.snippetCraft.deleteAllSnippets	刪除全部程式碼片段
extension.snippetCraft.createSnipp	建立程式碼片段
extension.snippetCraft.refreshEntry	重新整理程式碼片段列表
extension.snippetCraft.addEntry	新增程式碼片段
extension.snippetCraft.editEntry	編輯程式碼片段
extension.snippetCraft.editTitle	編輯程式碼片段標題
extension.snippetCraft.deleteEntry	刪除程式碼片段
extension.snippetCraft.insertEntry	插入程式碼片段
extension.snippetCraft.addKv	新增對映
extension.snippetCraft.refreshKv	重新整理對映列表
extension.snippetCraft.deleteKv	刪除對映
extension.snippetCraft.editKv	編輯對映

建立UI元素

活動欄按鈕

點選此按鈕將開啟VS Code擴充套件的主邊欄檢視。圖示和名稱一般為產品的Logo和名稱

在package.json檔案的contributes節點中，新增如下內容：

"viewsContainers": {
      "activitybar": [
        {
          "id": "snippsView",
          "title": "Snippet Craft",
          "icon": "./logo.svg"
        }
      ]
    }

完成活動欄按鈕的新增

主邊欄檢視

主邊欄中用於直觀地列出程式碼片段的列表和對映表

在package.json檔案的contributes節點中，新增如下內容：

"views": {
    "snippsView": [
    {
        "id": "view.snippetCraft.snippsView",
        "name": "Snippets列表"
    },
    {
        "id": "view.snippetCraft.dictionaryView",
        "name": "對映表"
    }
    ]
},

完成主邊欄檢視的新增

主邊欄工具欄按鈕

在package.json檔案的contributes節點中，新增如下內容：

"view/title": [
    {
        "command": "extension.snippetCraft.addEntry",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.refreshEntry",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.searchSnipps",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.addKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "navigation"
    },
    {
        "command": "extension.snippetCraft.refreshKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "navigation"
    }
    
    ]
},

完成主邊欄工具欄按鈕的新增

側邊欄右鍵選單

在package.json檔案的contributes節點中，新增如下內容：

"view/item/context": [
    {
        "command": "extension.snippetCraft.editTitle",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.deleteEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.insertEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.editEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.editKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "kveditor"
    },
    {
        "command": "extension.snippetCraft.deleteKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "kveditor"
    }
    ],

完成側邊欄右鍵選單的新增

編輯器右鍵選單

在編輯器區域右鍵彈出的上下文選單中選擇“插入Snippet”，可以選擇一個已有的片段插入當前游標所在位置

當編輯器中有文字被選中時，上下文選單的“建立Snippet”會顯示，點選時選中的文字將作為程式碼片段被儲存。

"menus": {
    "editor/context": [
    {
        "command": "extension.snippetCraft.createSnipp",
        "when": "editorHasSelection",
        "group": "snippet"
    },
    {
        "command": "extension.snippetCraft.insertSnipps",
        "group": "snippet"
    }
    ],

完成編輯器右鍵選單的新增

專案地址

Github:snippet-craft