程式碼片段

程式碼片段，也叫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": "啟動時顯示自定義歡迎頁"
            }
        }
    }
}

比較簡單，就不細講了。

讀取和修改設定

讀取：

// 如果沒有設定，返回undefined
const 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);
    }
}

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

參考資料