VSCode外掛程式開發全攻略（八）程式碼片段、設定、自訂歡迎頁面

標籤：create   自訂   nts   語言   event   des   個數   http   控制   

更多文章請戳VSCode外掛程式開發全攻略系列目錄導航。

程式碼片段

程式碼片段，也叫snippets，相信大家都不陌生，就是輸入一個很簡單的單詞然後一斷行符號帶出來很多代碼。平時大家也可以直接在vscode中建立屬於自己的snippets：

建立程式碼片段

那麼如何在擴充中建立snippets呢？

package.json檔案新增如下：

"contributes": {    "snippets": [        {            // 程式碼片段作用於那種語言            "language": "javascript",            // 片段檔案路徑            "path": "./snippets/javascript.json"        }    ]}

然後建立一個snippets/javascript.json檔案，我們這裡先簡單點，比如建立一個for迴圈：

{    "for迴圈": {        "prefix": "for",        "body": [          "for (const ${2:item} of ${1:array}) {",          "\t$0",          "}"        ],        "description": "for迴圈"    }}

解釋如下：

• for迴圈：snippets的名字；
• prefix：輸入什麼單詞觸發程式碼片段；
• body：一個數組，存放程式碼片段的內容，每一行一個字串；
• description：片段的描述；
• ${1:xxx}預留位置，數字表示游標聚焦的順序，1表示預設游標落在這裡，按下斷行符號或者tab跳到2的位置，以此類推，xxx表示此位置的預設值，可省略，比如直接寫$3；

效果如下：

樣本：ajax

為加深印象我們再來一個ajax的例子：

{    "ajax": {        "prefix": "ajax",        "body": [            "$.ajax({",            "    url: '$1',",            "    method: '${2:POST}',",            "    datatype: 'json',",            "    success: data => {",            "        $3;",            "    },",            "    error: err => {",            "        $4;",            "    }",            "})"        ],        "description": "ajax模組"    }}

效果（圖片是直接偷來的，懶得自己截了）：

使用TextMate/Sublime Snippets

利用HelloWorld章節中講到的yo code產生器可以直接將TextMate程式碼片段（.tmSnippets）轉換成VScode的Snippets，產生器有一個選項New Code Snippets選項，可讓您指向包含多個.tmSnippets檔案的檔案夾。此外，產生器還支援Sublime片段（.sublime-snippets）。

設定

每一個外掛程式可以建立一個屬於自己的專屬設定項，這個配置項會出現在系統設定的擴充下面，效果如下：

配置configuration

配置如下：

"contributes": {    "configuration": {        "type": "object",        // 顯示在配置頁左側        "title": "Code外掛程式demo",        "properties": {            // 全域唯一的配置ID            "vscodePluginDemo.yourName": {                "type": "string",                "default": "guest",                "description": "你的名字"            },            "vscodePluginDemo.showTip": {                "type": "boolean",                "default": true,                "description": "啟動時顯示自訂歡迎頁面"            }        }    }}

比較簡單，就不細講了。

讀取和修改設定

讀取：

// 如果沒有設定，返回undefinedconst result = vscode.workspace.getConfiguration().get('vscodePluginDemo.yourName ');

修改：

// 最後一個參數，為true時表示寫入全域配置，為false或不傳時則唯寫入工作區配置vscode.workspace.getConfiguration().update('vscodePluginDemo.yourName', '前端藝術家', true);

自訂歡迎頁面

下面結合設定和webview2個章節的知識我們來做一個非常簡單的自訂歡迎頁面。

最終效果如下：

要實現歡迎頁面，肯定要保證外掛程式在VSCode一開啟就在運行，所以activationEvents必須設定成*。

然後建立一個新的開啟歡迎頁面命令：

context.subscriptions.push(vscode.commands.registerCommand('extension.demo.showWelcome', function (uri) {    const panel = vscode.window.createWebviewPanel(        'testWelcome', // viewType        "自訂歡迎頁面", // 視表徵圖題        vscode.ViewColumn.One, // 顯示在編輯器的哪個部位        {            enableScripts: true, // 啟用JS，預設禁用        }    );    let global = { panel};    panel.webview.html = getWebViewContent(context, 'src/view/custom-welcome.html');    panel.webview.onDidReceiveMessage(message => {        if (messageHandler[message.cmd]) {            messageHandler[message.cmd](global, message);        } else {            util.showError(`未找到名為 ${message.cmd} 回調方法!`);        }    }, undefined, context.subscriptions);}));

然後在全域的active方法裡面加入以下代碼：

const key = 'vscodePluginDemo.showTip';// 如果設定裡面開啟了歡迎頁面顯示，啟動歡迎頁面if (vscode.workspace.getConfiguration().get(key)) {    vscode.commands.executeCommand('extension.demo.showWelcome');}

在歡迎頁面我們加一個選項控制：

<div class="checkbox">    <label>        <input type="checkbox" v-model="show"> 啟動時顯示自訂歡迎頁面    </label></div>

然後監聽show：

watch: {    show(nv, ov) {        callVscode({cmd: 'setConfig', key: 'vscodePluginDemo.showTip', value: nv}, null);    }}

代碼很簡單，也沒啥太多可以講的。修改複選框的值後可以去設定裡面看一下值是否跟著變了。

參考資料

• Creating your own snippets
• Use TextMate Snippets
• contributes.snippets
• contributes.configuration

VSCode外掛程式開發全攻略（八）程式碼片段、設定、自訂歡迎頁面