VsCode插件开发之插件初步通信

参考了Egret Wing，想像Egret Wing那样在上方titlebar最右边上面增加一个menu(这个menu相对于一个按钮，当点击这个按钮时会出现一个window弹框，这个window弹框里就包含相关的表单信息以供登录或者注册使用。我是以这个作为参考模板的。但是目前进展并不是很顺。于是我通过插件的方式暂时性解决了这个问题。但是觉得还不是想要的那样。

Egret Wing是这样的，如图所示:

不得不承认一点Egret Wing改造的挺不错的，不愧是对VsCode进行魔改。

今天先说一下通过插件通信。

我主要参考的是一个叫小茗同学的插件开发，并改造其插件来达到我的目的。

这个小茗同学我觉得他写的插件开发，我觉得不是特别详细全面，当然，参考意义还是有的。

他的插件开发目录如下:

他的插件github地址为:https://github.com/sxei/vscode-plugin-demo.git

他的插件可以在VsCode插件扩展中搜到(搜到后安装，然后直接在下载成功的插件的基础上改造)，例如:

那么说说我是如何改造它的呢？

我主要改造它这么几个地方？

一个是图标，另外一个修改它的html界面(主要是修改custom-welcome.html)，同时我要和还改了package.json文件。

插件开发可以用TypeScript，也可以用JavaScript。

如果是用TypeScript的话，通常扩展脚本文件是extension.ts形式存在，如果是JavaScript，则是以extension.js的形式存在。

在此我想强调的是改他人插件或者自己编写插件，以ts为例，主要把握也就两个文件，一个是extension.ts，另一个就是package.json。

如何从0开发以插件的相关视频，感兴趣的可以看看，感觉还是有一定的启发的:https://v.qq.com/x/page/k08220bdz3s.htmlb

我改造后的插件代码，放在我的个人github上，大家可以将其下载下来放入，如下两个文件中(任意一个都行):

注意:

.vscode文件夹:官方插件下载好默认放入的目录。

.vscode-oss-dev:下载源码，自己编译，下载插件放置的目录。

自己编译的不知道由于什么原因不能直接联网通信搜索一些应用市场下载的插件。

通常情况下(以.vscode-oss-dev为例)，git clone下来我的插件地址，然后将其移植到这个目录就能看到对应的效果，效果图如下:

我的VsCode插件地址为:https://github.com/youcong1996/study_simple_demo/tree/vscode-plugin-communication

将其克隆下来放入.vscode或者.vscode-oss-dev中的extensions目录下即可起作用。

另外有一点要强调的是，如果是vscode非自己编译的，需要重启一下vscode，如果是自己编译的话，监听需要暂时中断重新输入(yarn watch)。

接下来说说我修改的三个地方。

1.修改package.json(包含图标一起说了及其点击登录的同时展示对应的左侧栏sidebar)

{
    "name": "vscode-plugin-demo",
    "displayName": "vscode-plugin-demo",
    "description": "VSCode插件demo",
    "keywords": [
        "vscode",
        "plugin",
        "demo"
    ],
    "version": "1.0.3",
    "publisher": "sxei",
    "engines": {
        "vscode": "^1.27.0"
    },
    "categories": [
        "Other"
    ],
    "icon": "images/icon.png",
    "activationEvents": [
        "*"
    ],
    "main": "./src/extension",
    "contributes": {
        "configuration": {
            "type": "object",
            "title": "Code插件demo",
            "properties": {
                "vscodePluginDemo.yourName": {
                    "type": "string",
                    "default": "guest",
                    "description": "你的名字"
                },
                "vscodePluginDemo.showTip": {
                    "type": "boolean",
                    "default": true,
                    "description": "启动时显示自定义欢迎页"
                }
            }
        },
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello，小茗同学"
            },
            {
                "command": "extension.demo.getCurrentFilePath",
                "title": "获取当前文件(夹)路径"
            },
            {
                "command": "extension.demo.testMenuShow",
                "title": "这个菜单仅在JS文件中出现",
                "icon": {
                    "light": "./images/tool-light.svg",
                    "dark": "./images/tool-light.svg"
                }
            },
            {
                "command": "extension.demo.openWebview",
                "title": "打开WebView"
            },
            {
                "command": "extension.demo.showWelcome",
                "title": "显示自定义欢迎页"
            }
        ],
        "keybindings": [
            {
                "command": "extension.sayHello",
                "key": "ctrl+f10",
                "mac": "cmd+f10",
                "when": "editorTextFocus"
            },
            {
                "command": "extension.demo.openWebview",
                "key": "ctrl+f9",
                "mac": "cmd+f9",
                "when": "editorTextFocus"
            }
        ],
        "menus": {
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "extension.sayHello",
                    "group": "[email protected]"
                },
                {
                    "when": "editorFocus",
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "[email protected]"
                },
                {
                    "when": "editorFocus && resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "z_commands"
                },
                {
                    "command": "extension.demo.openWebview",
                    "group": "navigation"
                }
            ],
            "editor/title": [
                {
                    "when": "editorFocus && resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "navigation"
                }
            ],
            "editor/title/context": [
                {
                    "when": "resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "navigation"
                }
            ],
            "explorer/context": [
                {
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "navigation"
                },
                {
                    "command": "extension.demo.openWebview",
                    "group": "navigation"
                }
            ]
        },
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets/javascript.json"
            },
            {
                "language": "html",
                "path": "./snippets/html.json"
            }
        ],
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "beautifulGirl",
                    "title": "测试",
                    "icon": "images/beautifulGirl.svg"
                }
            ]
        },
        "views": {
            "beautifulGirl": [
                {
                    "id": "测试001",
                    "name": "test"
                },
                {
                    "id": "测试002",
                    "name": "test"
                },
                {
                    "id": "测试003",
                    "name": "test"
                }
            ]
        },
        "iconThemes": [
            {
                "id": "testIconTheme",
                "label": "测试图标主题",
                "path": "./theme/icon-theme.json"
            }
        ]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^2.6.1",
        "vscode": "^1.1.6",
        "eslint": "^4.11.0",
        "@types/node": "^7.0.43",
        "@types/mocha": "^2.2.42"
    },
    "license": "SEE LICENSE IN LICENSE.txt",
    "bugs": {
        "url": "https://github.com/sxei/vscode-plugin-demo/issues"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/sxei/vscode-plugin-demo"
    },
    "homepage": "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md",
    "__metadata": {
        "id": "ac2b7b16-d87f-4e51-87a8-37011e8aa713",
        "publisherId": "cdd0fc1d-3acf-4250-a09b-95545e29bdbc",
        "publisherDisplayName": "小茗同学"
    }
}

在package.json我也就修改了这么几个地方，一个是views(这个view通常主要用于展示左侧的sidebar视图)，一个是viewsContainers(我主要修改beautifulGirl.svg)。

修改后的效果分别如下所示:

2.通信(修改custom-welcome.html)

通信我目前采用最原始的javascript的ajax请求，其实jQuery及其vue.js的异步通信也是可以的。

这个custom-welcome.html你可以理解成它就是一个webview。

custom-welcome.html文件内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义欢迎页</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <style>
        html, body, #app {
            height: 100%;
        }
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px
        }

        ::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #d8dce5
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #adadad
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #929292
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: #666363
        }

        ::-webkit-scrollbar-corner {
            background-color: #535353
        }

        ::-webkit-scrollbar-resizer {
            background-color: #ff6e00
        }
        .page-title {
            margin-bottom: 20px;
        }

        .control-label {
            font-weight: normal;
        }

        .btn-primary {
            background-color: #1890ff;
            border-color: #1890ff;
            outline: none;
        }

        .btn-primary:focus,
        .btn-primary:hover {
            background-color: #40a9ff;
            border-color: #40a9ff;
            outline: none;
        }

        .btn-primary.active,
        .btn-primary:active {
            background-color: #096dd9;
            border-color: #096dd9;
            color: #fff;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app" class="container-fluid">
        <h3 class="page-title">自定义欢迎页</h3>
        <p class="alert alert-success" style="width: 300px;">{{userName}}，{{time}}好！
        <span id="info"></span>
        </p>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-6">
                    <div id="form">
                        <form>
                            <p>用户名:<input type="text" id="userName" style="color:black;"/></p>
                            <p>密&nbsp;&nbsp;码&nbsp;&nbsp;:<input type="password" id="password" style="color:black;"/></p>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" style="color:black;" value="提交" onclick="test()"/>
                        <input type="button" value="打开" onclick="openLogin()"/>
                         </form>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" v-model="show"> 启动时显示自定义欢迎页
                            &nbsp;&nbsp;
                            <input type="button" onclick="register()" value="退出"/>
                        </label>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <script src="../../lib/jquery/jquery.min.js"></script>
    <script src="../../lib/bootstrap-3.3.1/js/bootstrap.min.js"></script>
    <script src="../../lib/vue-2.5.17/vue.js"></script>
    <script src="../../src/view/custom-welcome.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../lib/layer/layer-v3.1.1/layer/mobile/layer.js"></script>
    <script>
    function openLogin(){
        layui.use(‘layer‘, function(){
          var layer = layui.layer;

          layer.open({
                type: 2,
                title: ‘Login‘,
                fix: false,
                maxmin: true,
                shadeClose: true,
                shade: 0.8,
                area: [‘500px‘, ‘500px‘],
                content: ‘login.html‘,
                end: function () {
                   location.reload();
                }
            });
        });
    }

    function test(){
           var userName = document.getElementById("userName").value;

           if(userName != null && userName != undefined){
            var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                $("#info").html("登录成功");
                $("#form").hide();

                console.log(‘test:‘+xhr.status);
                console.log(xhr.responseText);
                } else {
                console.log("请求成功：" + xhr.status);
                }
                }
                };
                xhr.open("POST", "http://www.test.com/test-web/sysUser/getUserCodeByInfo?userCode=2", true);
                xhr.send(null);

            }else{
                layui.use(‘layer‘, function(){

                var layer = layui.layer;

                layer.msg(‘userName为必填项‘);
                });
            }

           }
    function register(){
        $("#info").html("");
        $("#form").show();
    }

    </script>
</body>

</html>

这个html在浏览器上看到的效果如下所示:

目前这仅仅是一个很初级的(蹩脚通信)，后续我将会继续补充对VsCode的源码解析及其插件开发相关的详细说明，由于目前掌握的比较分散不够系统，暂时延后讲解。

原文地址：https://www.cnblogs.com/youcong/p/10294758.html

时间： 2024-10-07 04:43:09

VsCode插件开发之插件初步通信的相关文章

万圣节福利：红孩儿3D引擎开发课程《3ds max导出插件初步》

红孩儿3D引擎开发课堂 QQ群:275220292 国内最详尽教授怎样开发3D引擎的地方!揭开3D引擎开发最不为人知的秘密! 万圣节福利,国内最详尽的3ds max导出插件编程指南0基础篇免费发放!            前言:今天网易的<乱斗西游>上线AppStore ,将继完美世界<黑暗黎明>后再次证明自研引擎的实力!假设你想成为引擎研发高手,那么,一切,将从3ds max导出插件起步~ 第九章课程<3ds max导出插件初步> 一．3ds max导出插件简单介绍:

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

更多文章请戳VSCode插件开发全攻略系列目录导航. 代码片段 代码片段,也叫snippets,相信大家都不陌生,就是输入一个很简单的单词然后一回车带出来很多代码.平时大家也可以直接在vscode中创建属于自己的snippets: 创建代码片段 那么如何在扩展中创建snippets呢? package.json文件新增如下: "contributes": { "snippets": [ { // 代码片段作用于那种语言 "language": &

vscode插件开发

npm使用介绍 https://www.runoob.com/nodejs/nodejs-npm.html 常用命令: npm -v 出现版本提示表示安装成功nmp npm config get registry npm config set registry https:// 参考: VSCode插件开发全攻略(一)概览 https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html vscode编写插件详细过程 https://

[Misc] python 开发vim 插件初步测试

[Misc] python 开发vim 插件初步测试 今日雨夹雪, 晚上闲来没事突然想了解下用python试试VIM插件开发. 于是写了个初步测试. 总体来说相当简单, 几个相当设置语法后, import vim 后就进入python世界了. (相当操作命令vim内:help py了解更多) 测试代码, 放到.vim/plugin目录下, *.vim vim内: Helloworld 和 : Helloname abeen 调用测试方法. 测试如下: 1 " vim plugin test 2

vscode的vetur插件提示 [vue-language-server] Elements in iteration expect to have &#39;v-bind:key&#39; directives错误的解决办法

1.使用VS Code 出现如下问题,如图 Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的. 2.更改vetur配置 vscode->文件->首选项->用户设置 找到 "vetur.validation.template" 改为false "vetur.validation.template": false vscode的vetur插件提示 [vue-language-server] Elements in iterati

chrome 浏览器插件开发（二）—— 通信 获取页面 编写chrome插件专用的库

在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的.下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— crxTool . 一.坑和铲子 1.browser action或page action与content script通信 在网上找了不少方法,最后选择的方法如下: 发送消息: 1 var send= function(data, cb){ 2 chrome.tabs.query({active:

VSCode 前端常用插件

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软件跨平台支持 Win.Mac 以及 Linux. VSC中文网:http://www.vscode.org/

vscode配置和插件

使用Visual Studio Code编写Vue的札记 梁源2017-04-28 2860标签: ESLint , VSCode , 网络编程 前言 Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support f

解决忽略VScode中Python插件pylint报错的问题

pylint是VScode中python自带的插件,可以帮助代码规范,美观. 但是有些报错是你不想看到的,你可以选择性的忽略. 例如,在re.compile()中,可以添加参数re.S使. 匹配任意字符.而pylint会一直报错不存在这种方法,导致无法运行.在Pycharm中则不会出现这种问题. 想要自定义忽略错误,操作如下: 在setting,json文件中搜索python.linting.pylintArgs 修改如下. 在python.linting.pylintArgs 中添加字符串 -