VSCode插件开发全攻略(八)代码片段、设置、自定义欢迎页
更多文章请戳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);
自定义欢迎页
下面结合设置
和webview
2个章节的知识我们来做一个非常简单的自定义欢迎页。
最终效果如下:
要实现欢迎页,肯定要保证插件在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插件开发全攻略(八)代码片段、设置、自定义欢迎页的更多相关文章
- VSCode插件开发全攻略(一)概览
文章索引 VSCode插件开发全攻略(一)概览 VSCode插件开发全攻略(二)HelloWord VSCode插件开发全攻略(三)package.json详解 VSCode插件开发全攻略(四)命令. ...
- VSCode插件开发全攻略(三)package.json详解
更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先 ...
- VSCode插件开发全攻略(十)打包、发布、升级
更多文章请戳VSCode插件开发全攻略系列目录导航. 发布方式 插件开发完了,如何发布出去分享给他人呢?主要有3种方法: 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然 ...
- VSCode插件开发全攻略(七)WebView
更多文章请戳VSCode插件开发全攻略系列目录导航. 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在Visual Studio Code中创建完全自定义的 ...
- VSCode插件开发全攻略(六)开发调试技巧
更多文章请戳VSCode插件开发全攻略系列目录导航. 前言 在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebView的知识 ...
- VSCode插件开发全攻略(五)跳转到定义、自动补全、悬停提示
更多文章请戳VSCode插件开发全攻略系列目录导航. 跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provide ...
- VSCode插件开发全攻略(四)命令、菜单、快捷键
更多文章请戳VSCode插件开发全攻略系列目录导航. 命令 我们在前面HelloWord章节中已经提到了命令写法,这里再重温一下. context.subscriptions.push(vscode. ...
- VSCode插件开发全攻略(二)HelloWord
更多文章请戳VSCode插件开发全攻略系列目录导航. 写着前面 学习一门新的语言或者生态首先肯定是从HelloWord开始. 您可以直接克隆我放在GitHub上vscode-plugin-demo 的 ...
- VSCode插件开发全攻略(九)常用API总结
更多文章请戳VSCode插件开发全攻略系列目录导航. 本文提炼一些常见的API使用场景供参考,本文内容有待完善. 编辑器相关 修改当前激活编辑器内容 替换当前编辑器全部内容: vscode.windo ...
随机推荐
- Ubuntu 16.04 安装的那点事
通常,Ubuntu都是与windows共存——安装成双系统的 如果在虚拟机上安装,请参照 https://blog.csdn.net/wyx100/article/details/51582617 U ...
- Flask-WTForms 简单使用
安装 wtforms 2.2.1 直接上代码: app.py 文件: from flask import Flask, render_template, request from wtforms im ...
- mysql设置存储中文变成问号或者乱码
技术交流群: 816227112 问题: 解决办法: 修改my.ini 如果是my-default.ini 要重命名成my.ini 要注意顺序,有可能服务启动不起来 [mysqld] charact ...
- c#gridcontrol 的一些设置
1:单元格变色,当鼠标点击到单元格的时候, 可能我们是想选择整个行,而此时gridview 默认设置是点击单元格整个行变色,这个点击的单元格变白色, 整行选择感觉有断层 于是和可以这么设置 设置Gri ...
- python中的深浅copy
https://www.cnblogs.com/Eva-J/p/5534037.html 转自Eva_J 分析的特别好
- qt quick-初始学习概念
Qt Quick简介: Qt Quik 是一种高级用户界面技术,使用它可以轻松地创建供移动和嵌入式设备使用到动态触摸式界面和轻量级应用程序:Qt Quick主要由三部份组成: 改进的Qt Creato ...
- C#下载Url文件到本地
protected void Page_Load(object sender, EventArgs e) { string filePath = Request.Params["FilePa ...
- windows环境下wamp安装redis拓展
环境: wamp集成环境 安装分为两部 1.安装redis客户端 https://github.com/ServiceStack/redis-windows/raw/master/download ...
- Java————迷宫问题
它表示一个迷宫,其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线. package algorithm_java; import java. ...
- ORM创建多表以及多表的增删改查
一. 多表的创建 1. 一对一 在哪个表中设置都行,但是添加数据的时候需要现在没有外键的表中添加数据 models.OneToOneField(to="表名",to_field=& ...