热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

代码片段代码片段,也叫snippets,相信大家都不陌生,就是输入一个很简单的单词然后一回车带出来很多代码。平时大家也可以直接在vscod

代码片段

代码片段,也叫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');

}

在欢迎页我们加一个选项控制:

启动时显示自定义欢迎页

然后监听show:

watch: {

show(nv, ov) {

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

}

}

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

参考资料



推荐阅读
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 本文详细介绍了如何构建一个高效的UI管理系统,集中处理UI页面的打开、关闭、层级管理和页面跳转等问题。通过UIManager统一管理外部切换逻辑,实现功能逻辑分散化和代码复用,支持多人协作开发。 ... [详细]
  • [论文笔记] Crowdsourcing Translation: Professional Quality from Non-Professionals (ACL, 2011)
    Time:4hoursTimespan:Apr15–May3,2012OmarZaidan,ChrisCallison-Burch:CrowdsourcingTra ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
author-avatar
黄可麟66032
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有