vscode建立一个下拉选框_VSCode插件开发全攻略（八）代码片段、设置、自定义欢迎页...

代码片段

代码片段&＃xff0c;也叫snippets&＃xff0c;相信大家都不陌生&＃xff0c;就是输入一个很简单的单词然后一回车带出来很多代码。平时大家也可以直接在vscode中创建属于自己的snippets&＃xff1a;

创建代码片段

那么如何在扩展中创建snippets呢&＃xff1f;

package.json文件新增如下&＃xff1a;

"contributes": {

"snippets": [

{

// 代码片段作用于那种语言

"language": "Javascript",

// 片段文件路径

"path": "./snippets/Javascript.json"

}

]

}

然后创建一个snippets/Javascript.json文件&＃xff0c;我们这里先简单点&＃xff0c;比如创建一个for循环&＃xff1a;

{

"for循环": {

"prefix": "for",

"body": [

"for (const ${2:item} of ${1:array}) {",

"\t$0",

"}"

],

"description": "for循环"

}

}

解释如下&＃xff1a;

for循环&＃xff1a;snippets的名字&＃xff1b;

prefix&＃xff1a;输入什么单词触发代码片段&＃xff1b;

body&＃xff1a;一个数组&＃xff0c;存放代码片段的内容&＃xff0c;每一行一个字符串&＃xff1b;

description&＃xff1a;片段的描述&＃xff1b;

${1:xxx}占位符&＃xff0c;数字表示光标聚焦的顺序&＃xff0c;1表示默认光标落在这里&＃xff0c;按下回车或者tab跳到2的位置&＃xff0c;以此类推&＃xff0c;xxx表示此位置的默认值&＃xff0c;可省略&＃xff0c;比如直接写$3&＃xff1b;

效果如下&＃xff1a;

示例&＃xff1a;ajax

为加深印象我们再来一个ajax的例子&＃xff1a;

{

"ajax": {

"prefix": "ajax",

"body": [

"$.ajax({",

" url: &＃39;$1&＃39;,",

" method: &＃39;${2:POST}&＃39;,",

" datatype: &＃39;json&＃39;,",

" success: data &＃61;> {",

" $3;",

" },",

" error: err &＃61;> {",

" $4;",

" }",

"})"

],

"description": "ajax模块"

}

}

效果(图片是直接偷来的&＃xff0c;懒得自己截了)&＃xff1a;

使用TextMate/Sublime Snippets

利用HelloWorld章节中讲到的yo code生成器可以直接将TextMate代码段(.tmSnippets)转换成VScode的Snippets&＃xff0c;生成器有一个选项New Code Snippets选项&＃xff0c;可让您指向包含多个.tmSnippets文件的文件夹。此外&＃xff0c;生成器还支持Sublime片段(.sublime-snippets)。

设置

每一个插件可以创建一个属于自己的专属设置项&＃xff0c;这个配置项会出现在系统设置的扩展下面&＃xff0c;效果如下&＃xff1a;

配置configuration

配置如下&＃xff1a;

"contributes": {

"configuration": {

"type": "object",

// 显示在配置页左侧

"title": "Code插件demo",

"properties": {

// 全局唯一的配置ID

"vscodePluginDemo.yourName": {

"type": "string",

"default": "guest",

"description": "你的名字"

},

"vscodePluginDemo.showTip": {

"type": "boolean",

"default": true,

"description": "启动时显示自定义欢迎页"

}

}

}

}

比较简单&＃xff0c;就不细讲了。

读取和修改设置

读取&＃xff1a;

// 如果没有设置&＃xff0c;返回undefined

const result &＃61; vscode.workspace.getConfiguration().get(&＃39;vscodePluginDemo.yourName &＃39;);

修改&＃xff1a;

// 最后一个参数&＃xff0c;为true时表示写入全局配置&＃xff0c;为false或不传时则只写入工作区配置

vscode.workspace.getConfiguration().update(&＃39;vscodePluginDemo.yourName&＃39;, &＃39;前端艺术家&＃39;, true);

自定义欢迎页

下面结合设置和webview2个章节的知识我们来做一个非常简单的自定义欢迎页。

最终效果如下&＃xff1a;

要实现欢迎页&＃xff0c;肯定要保证插件在VSCode一打开就在运行&＃xff0c;所以activationEvents必须设置成*。

然后创建一个新的打开欢迎页命令&＃xff1a;

context.subscriptions.push(vscode.commands.registerCommand(&＃39;extension.demo.showWelcome&＃39;, function (uri) {

const panel &＃61; vscode.window.createWebviewPanel(

&＃39;testWelcome&＃39;, // viewType

"自定义欢迎页", // 视图标题

vscode.ViewColumn.One, // 显示在编辑器的哪个部位

{

enableScripts: true, // 启用JS&＃xff0c;默认禁用

}

);

let global &＃61; { panel};

panel.webview.html &＃61; getWebViewContent(context, &＃39;src/view/custom-welcome.html&＃39;);

panel.webview.onDidReceiveMessage(message &＃61;> {

if (messageHandler[message.cmd]) {

messageHandler[message.cmd](global, message);

} else {

util.showError(&＃96;未找到名为 ${message.cmd} 回调方法!&＃96;);

}

}, undefined, context.subscriptions);

}));

然后在全局的active方法里面加入以下代码&＃xff1a;

const key &＃61; &＃39;vscodePluginDemo.showTip&＃39;;

// 如果设置里面开启了欢迎页显示&＃xff0c;启动欢迎页

if (vscode.workspace.getConfiguration().get(key)) {

vscode.commands.executeCommand(&＃39;extension.demo.showWelcome&＃39;);

}

在欢迎页我们加一个选项控制&＃xff1a;

然后监听show&＃xff1a;

watch: {

show(nv, ov) {

callVscode({cmd: &＃39;setConfig&＃39;, key: &＃39;vscodePluginDemo.showTip&＃39;, value: nv}, null);

}

}

代码很简单&＃xff0c;也没啥太多可以讲的。修改复选框的值后可以去设置里面看一下值是否跟着变了。

参考资料