记一次前端"vscode插件编写实战"超详细的分享会(建议收藏哦)(下篇)

时间  2020-12-24
标签 javascript java node git github npm json api 数组 安全 栏目 JavaScript 繁體版
原文   原文链接
这里的序号承接上文

十一. hover的效果(官网例子模糊)

想象一下鼠标悬停在一个语句上就会浮现出你的提示信息, 是否是还挺酷的, 说干就干,但仍是忍不住吐槽一下官网的例子太粗糙了.javascript

hover就不用去定义命令了, 由于他的触发规则就是悬停

咱们新建hover.js文件java

const vscode = require('vscode');
const path = require('path');

module.exports = vscode.languages.registerHoverProvider('javascript', {
  provideHover(document, position, token) {
    const fileName    = document.fileName;
    const workDir     = path.dirname(fileName);
    const word        = document.getText(document.getWordRangeAtPosition(position));
    // console.log(1, document)
    // console.log(2, position)
    // console.log(3, token)
    console.log(4, '这个就是悬停的文字', word)
    // 支持markdown语法
    return new vscode.Hover(
    `### 我就是返回的信息!
      1. 第一项：
        - 第一个元素
        - 第二个元素
      2. 第二项：
        - 第一个元素
        - 第二个元素
  `);
  }
 }
);

index.js文件以下node

const vscode = require('vscode');
const message = require('./message.js');
const navigation = require('./navigation.js');
const progress = require('./progress.js');
const hover = require('./hover.js');

 function activate(context) {
    vscode.window.showInformationMessage('插件成功激活!');
    context.subscriptions.push(message);
    context.subscriptions.push(navigation);
    context.subscriptions.push(progress);
    context.subscriptions.push(hover);
}

module.exports = {
    activate
}
  1. provideHover是不用引用的
  2. 支持markdown语法
  3. 由于悬停其余插件也有相关显示, 那么vscode会按顺序展现每一个插件的hover效果

image.png

因而可知, 咱们hover的时候能够得到被悬停的文字, 能够得到其所在的文件位置, 那么咱们就能够去node_modules里面查找对应的文件了, 而后获取到他的版本号与更新时间和官网地址, 因此那些在 package.json中hover出现详情的插件的原理, 你!懂!了!吧!

咱们彻底能够利用这个快捷查找一些大家公司内部的词汇的具体含义, 或者某些code与id 表明的含义.git

十二. 模板的定义, 打造属于本身团队的快捷开发

``文件中配置模板github

"contributes": {
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets/cc.json" // 这里就是存放模板的文件
                }
        ]
    },

./snippets/cc.json内容以下:npm

{
  "名字写在这里真奇怪, 使公司模板统一": {
      "prefix": "cc 左侧名字",
      "body": [
        "for (xxxxxxxxxxxxxxxxx ${2:item} of ${1:array}) {",
        "\t$0",
        "}"
      ],
      "description": "我本身定义的cc哦， 厉害吧"
  }
}

image.png
image.png

  1. prefix就是快捷选择栏里面显示的名字, 也是你输入的字符的匹配文字
  2. body里面是咱们定义的模板体
  3. ${1:array} 这里的意思是, 光标在生成模板的时候的所在位置的顺序, 当你点击tab的时候鼠标会依次出如今1,2,3这三个地方厉害吧.
有了这个功能, 与你开发的插件来个小配合, 才叫真正的快捷开发代码.

十三. 左侧标签与结构

这个就只须要两个配置对象, 而且有一张你的icon图标.json

"viewsContainers": {
        "activitybar": [
            {
                "id": "xingqiu",
                "title": "标题,而且hover显示",
                "icon": "./images/星球.png"
            }
        ]
    },
    "views": {
        "xingqiu": [
            {
                "id": "c1",
                "name": "超脱：踏天"
            },
            {
                "id": "c2",
                "name": "超脱：道无涯"
            },
            {
                "id": "c3",
                "name": "超脱：道源"
            },
            {
                "id": "c4",
                "name": "超脱：永恒"
            }
        ]
    }

image.png
image.png

  1. activitybar里面会按照id调用对应的views视图
  2. xingqiu只有一个对象则彻底占领, 多个的话就是平分这里的面积
  3. 展开的时候会抢面积, 点击折叠起来就行了

十四. 树结构, 官网例子的缺少,也没有对api进行有效的讲解(重点)

先把最终的效果图放在这里, 咱们按图索骥.....
image.pngapi

第一步: 新建tree.js文件, 在这里编写树形视图的代码.数组

module.exports = vscode.window.createTreeView('c1', {
    treeDataProvider: aNodeWithIdTreeDataProvider(),
    showCollapseAll: true
  });
  1. createTreeView的第一个参数是id, 也就是咱们views中定义的id.

2.aNodeWithIdTreeDataProvider方法会生成一个'对象', 用来定义与生成tree的展现效果, 接下来咱们会详细的讲.安全

  1. showCollapseAll选项所有折叠

重点讲讲aNodeWithIdTreeDataProvider
其中有三个key, 其中两个这里重点讲一下.

第一个: getChildren方法, 这里能够理解为获取数据源, 也就是树形数据, 可是他的理念是每次点击会获取一次子集数据, 好比{ a:{name:'xx'} }, 那么点击a的时候会返回{name:'xx'}这个对象, 注意:第一次执行是undefined 因此咱们要在第一次执行的时候我咱们定义好的树形数据传进来.

上代码:

const {c1Tree} = require('./treeData');
aNodeWithIdTreeDataProvider(){
getChildren: (el) => {
    const arr = [];
    const tree = el || c1Tree;
    for (let item in tree) {
      const activeItem = tree[item];
      if (typeof activeItem !== 'object') {
        arr.push(`${item}：${activeItem}`)
      } else {
        Object.defineProperty(activeItem, "_cc_key", {
          get: function () { return item },
          enumberable: false
        });
        arr.push(activeItem)
      }
    }
    return arr
  },
 }

./treeData.js代码以下, 这只是我当前的格式, 明白了原理你固然能够定制属于大家团队的代码啦.

const c1Tree = {
  '1': {
    '做者': "lulu",
      '宠物': {
        '名字': 'cc',
        '品种':'金毛',
        '年龄': 6,
      }
  },
  '2': {
    '做者': "lulu2",
      '宠物': {
        '名字': 'cc2',
        '品种':'金毛',
        '年龄': 9,
    }
  },
  '3': '单独的字符串'
}

module.exports = {
  c1Tree,
}
原理解析
  1. getChildren返回的是个数组
  2. getChildren返回值的每一项显示在界面上时, 都会传递给getTreeItem作处理
  3. 其实在这个函数里面咱们要作的就是把数据处理成getTreeItem方便使用的形式, 这里不作具体的界面输出操做.
  4. 这里我把每一个'对象数据'都赋予了_cc_key这样一个属性, 这是为了方便下面取用, 下面讲完getTreeItem我会说一下还有哪些作法.

第一个: getTreeItem方法, 每次用户点击一个下拉的项, 都会在这个方法里面得到这个项的配置.

getTreeItem: (el) => {
    let treeItem = {};
    if (typeof el === 'string') {
      treeItem = {
        label: el,
        collapsibleState: 0,
        tooltip: "hover: 单纯的字符串 ",
        // id: new Date().getTime()
      }
    } else {
      treeItem = {
        label: el._cc_key,
        collapsibleState: 1,
        tooltip: "hover: 可展开 ",
        // id: new Date().getTime()
      }
    }
    return treeItem;
  },

image.png

  1. label 界面上显示的文字
  2. collapsibleState 是否可展开, 也就是是否有子集可点击
  3. tooltip hover上时显示的提示信息
  4. id注册一个惟一标识, 这个能够不写, 若是写的话要保证id的惟一性.
  5. vscode.TreeItemCollapsibleState.None 就是不可折叠, 比直接用0更安全.
  6. vscode.TreeItemCollapsibleState.Collapsed可折叠可展开.

第三个: getParent 获取父级, 可是此次没用到这个就先不详细展开了.

完整代码以下:

const vscode = require('vscode');
const {c1Tree} = require('./treeData');

module.exports = vscode.window.createTreeView('c1', {
    treeDataProvider: aNodeWithIdTreeDataProvider(),
    showCollapseAll: true
  });
  
  function aNodeWithIdTreeDataProvider() {
    return {
      getChildren: (el) => {
        const arr = [];
        const tree = el || c1Tree;
        for (let item in tree) {
          const activeItem = tree[item];
          if (typeof activeItem !== 'object') {
            arr.push(`${item}：${activeItem}`)
          } else {
            Object.defineProperty(activeItem, "_cc_key", {
              get: function () { return item },
              enumberable: false
            });
            arr.push(activeItem)
          }
        }
        return arr
      },
      getTreeItem: (el) => {
        let treeItem = {};
        if (typeof el === 'string') {
          treeItem = {
            label: el,
            collapsibleState: 0,
            tooltip: "hover: 单纯的字符串 ",
          }
        } else {
          treeItem = {
            label: el._cc_key,
            collapsibleState: 1,
            tooltip: "hover: 可展开 ",
          }
        }
        return treeItem;
      },
      getParent: () => {
        return {}
      }
    };
  }
  1. 添加_cc_key属性是由于不想被for in的时候循环出来
  2. 能够用'冻结属性'的方式禁止获取
  3. 能够用属性禁止循环出来的方式禁止获取
  4. getChildren里面把字符串组装成 'key: value'的形式, 把对象添加_cc_key属性, 由于对象前面的key以后就没法取到了, 须要这里放入对象.

这样一个树形结构就完成了, 是否是总体逻辑感受不是那么顺畅, 我也不知道vscode为啥这样设计,奇奇怪怪明明有更好的方法...

十五. 注册帐号与申请token详细流程

1: 首先要有一个帐号, 登陆这里https://login.live.com/
须要配置一个邮箱, 地区选择中国.

2: 注册好后能够点击这里https://aka.ms/SignupAzureDevOps

3: 登陆好你会看到以下图片, 输入你的项目名称与项目简介, 这里我选择public公开.
image.png

4: 点击 create project 会跳到下面的页面

5: 去配置一个token, 按图里的顺序点击
image.png
image.png
image.png
image.png
这里配置的是最宽松的条件, 由于这样才会没有那些莫名其妙的错误.

这里注意, 点击create以后可能页面没刷出来东西, 能够选择反复刷新页面, 也能够选择从新作一遍上述流程, 由于这里的token只展现一次, 以后是找不到了的, 因此千万要复制下来.

image.png

6: 这里咱们就多了一个工程
image.png

十六. 发布与取消发布

vsce是“ Visual Studio代码扩展”的简称，是用于打包，发布和管理VS代码扩展的命令行工具

之后咱们打包插件与发布插件都会用到这个小伙子.

npm install -g vsce
方式一. 控制台发布

打开控制台, 输入命令
后面是你登录者的名字, 这里建立发布者
image.png
image.png
系统会依次让咱们输入 名字、邮箱、刚刚获取的token
image.png
这里我改了下名字, 后面会讲这个问题

默认是登陆状态的, 可是若是之后咱们要切换用户的话要下面的步骤
接下来咱们登录一下 vsce login (publisher name) 登录开发者
image.png
还须要输入一下token
image.png

问题: 重复了的话会报下面这个错, 就须要咱们改一个发布者名字了
image.png

发布

vsce publish 或者 vsce publish -p xxxxxxxxtoken

若是出现报错
1:
image.png
在 package.json 中添加 "publisher": "发布者的名字",
若是还不行, 咱们能够在官网添加这个名称进入团队
image.png

image.png

2: 他本身生成的.md文件不是很合格, 咱们先清空

发布成功

image.png

两分钟左右就能够在应用商店搜到了(哈哈,下面的也是我写的demo)
image.png

本身作好的固然要安装一下试试啦
image.png
功能都在一切安好.

方式二. 网站发布

这个也是官方比较推荐的发布方式, 这里我来演示一下(建立发布者帐号)
地址是:https://marketplace.visualstudio.com/manage
image.png
输入名字, id会自动相同, 这个id也是惟一的因此要起个好名字.
image.png
这里能够定义你的图标了， 而且能够把相关联的地址信息写上， 这样发布也挺方便。

在这个网站里能够直接配置发布的信息， 更新的操做以下（拖拽更新）：
image.png

十七. 打包传递

若是咱们直接在代码里发布是不用手动打包的， 以下状况须要手动打包。

  1. 在网站更新升级插件
  2. 插件内部使用， 采用安装包发给对应同窗的方式使用

打包命令 vsce package
image.png
会出现如图vsix为后缀的文件。

这个时候咱们就能够把它拖拽到网站上去更新咱们的包。

想要给别人使用的话以下图：
image.png
而后会弹出文件选择框， 这样就能够实现安装包安装了。

十八. 能作什么, 要作什么。

能作什么的畅想
  1. 一个字典， 每次悬停在某个id上自动寻找对用的含义。
  2. 团队内部组件的快速生成使用代码。
  3. 工做中的各类提示， 好比定时提示你头上的bug数， 这个要让公司给你出接口了哈。
  4. 左侧栏展现今日的任务安排，等等等等的吧
要作什么

其实吧你说它功能强大也对， 可是实际上编辑器就是编辑器， 一些人想要作不少不少功能放在vscode里面，那还不如直接作个桌面端或者网站， 咱们作插件因该作尽可能方面的功能， 不用过多操做的功能， 更定制化的功能， 这里的优点是能够获取到开发人员当前的编辑状态， 因此一些与此无关，又略显繁琐的工做不建议放在插件里完成。

end

此次就是这样, 但愿和你一块儿进步.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程