VSCode插件开发全攻略(八)代码片段、设置、自定义欢迎页
2018-10-22 11:45
1566 查看
更多文章请戳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); } }
代码很简单,也没啥太多可以讲的。修改复选框的值后可以去设置里面看一下值是否跟着变了。
参考资料
相关文章推荐
- iOS开发 偷懒小技巧---自定义XCode代码片段
- iOS开发 偷懒小技巧---自定义XCode代码片段
- Xcode开发技巧之自定义code snippets(代码片段)
- iOS开发 偷懒小技巧---自定义XCode代码片段
- Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)
- sublime自定义代码片段+emmet插件自定义
- iOS开发-自定义带参数代码片段 Code Snippets
- Python开发工具 Wing IDE Snippet 代码片段 快捷键 设置
- vscode在ubuntu下安装插件,同时配置python虚拟环境、ctrl+鼠标滚轮放大代码窗口设置
- iOS开发 偷懒小技巧---自定义XCode代码片段
- OC开发_代码片段——代码编写自定义的tableViewCell
- 微信公众号开发之设置自定义菜单实例代码【java版】
- iOS开发 偷懒小技巧---自定义XCode代码片段
- 在DW8中创建自定义代码片段--提高CSS布局开发效率
- rcp(插件开发) 去掉plugin_customization.ini文件,在代码中实现配置功能
- SSMS2008插件开发(4)--自定义菜单
- iOS开发常用代码片段整理
- Android开发学习笔记:Android很有用的代码片段
- 天纵智能软件快速开发平台参数设置插件
- Asp.net 2.0 自定义控件开发[创建自定义HeaderRow的GridView控件][示例代码下载]