VSCode插件开发全攻略(八)代码片段、设置、自定义欢迎页

摘要:
有关更多文章,请单击VSCode插件开发的完整介绍系列的目录导航。通常,您也可以直接在vscode中创建自己的代码片段:创建代码片段。如何在扩展中创建代码段?

更多文章请戳VSCode插件开发全攻略系列目录导航

代码片段

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

W354xH542

创建代码片段

那么如何在扩展中创建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}) {",
          "	$0",
          "}"
        ],
        "description": "for循环"
    }
}

解释如下:

  • for循环snippets的名字;
  • prefix:输入什么单词触发代码片段;
  • body:一个数组,存放代码片段的内容,每一行一个字符串;
  • description:片段的描述;
  • ${1:xxx}占位符,数字表示光标聚焦的顺序,1表示默认光标落在这里,按下回车或者tab跳到2的位置,以此类推,xxx表示此位置的默认值,可省略,比如直接写$3

效果如下:

W463xH180

示例:ajax

为加深印象我们再来一个ajax的例子:

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

效果(图片是直接偷来的,懒得自己截了):

W755xH324

使用TextMate/Sublime Snippets

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

W880xH768

设置

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

W1032xH706

配置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个章节的知识我们来做一个非常简单的自定义欢迎页。

最终效果如下:

W806xH566

要实现欢迎页,肯定要保证插件在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);
    }
}

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

参考资料

免责声明:文章转载自《VSCode插件开发全攻略(八)代码片段、设置、自定义欢迎页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android(java)学习笔记43:Map集合的遍历之键找值在Unity中使用Lua脚本下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Chrome实用调试技巧

如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁、大量的应用插件,良好的代码规范支持、强大的V8解释器之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。 介绍Chrome调试技巧的文章很多,本文结合我自...

vscode 使用技巧

vs coder中foler和workspace区别: 官方文档说明workspace: https://code.visualstudio.com/docs/editor/multi-root-workspaces#_opening-workspace-files vscode左侧不同颜色的含义: 代码里的左侧颜色标识: 红色,未加入版本控制; (刚cl...

Win7 VSCode 在线安装Rust语言及环境配置

睡前彻底解决在VSCode中,按F12不跳转到标准库源码的问题。 首先,如果装过离线版,卸载掉。 然后去官网下载 rustup-init.exe https://www.rust-lang.org/tools/install 下好后别急着安装 新建4个环境变量 CARGO_HOMEE:Rustcargo RUSTUP_HOMEE:Rust ustup RU...

Visual Studio Code 之 运行java代码

1、安装扩展。 2、安装成功后,会在右键菜单中多出一个选项: 更改vscode“用户设置”文件:添加java.home(jdk目录)以及runcode显示在终端(解决中文乱码问题) code runner原生的配置有些问题,更改其中终端的命令:加入红色的部分 3、点击 Run Code,会执行相应的文件...

vscode中的vue文件不高亮,但是已经安装了vetur插件了,到底为什么???

我感觉这是我自己的一个低级错误,可是想了想还是准备把它写下来,因为怕跟我一样的菜鸟小白也遇到类似的情况,什么都对就是结果不对,妥妥的会被逼疯。。。 美好的一天从打开VS code开始~ 一打开,觉得哪里不对,愣了一秒,哎哟我去~vue文件怎么不高亮了(见下图这样),翻了翻其他的js、css等文件,发现是正常的,于是乎,我就开始跟这个“意外”死磕了。 于是我...

使用vscode访问和修改远程计算机文件

 这篇文章为Remote Development扩展出现之前所应用的技术,在Remote Development扩展出现后,可直接使用扩展,详情请参阅使用vscode进行远程开发。 以下为旧文档,仅作记录。 使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate;在本地windows上安装openssh;在vscode中安装扩...