更多文章請戳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": "啟動時顯示自定義歡迎頁"
}
}
}
}
比較簡單，就不細講了。
讀取和修改設置
讀取：
// 如果沒有設置，返回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);
}
}
代碼很簡單，也沒啥太多可以講的。修改復選框的值后可以去設置里面看一下值是否跟着變了。