乐趣区

关于visual-studio-code:记一次前端vscode插件编写实战超详细的分享会建议收藏哦下篇

jiezi
这里的序号承接上文

十一. hover 的成果(官网例子含糊)

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

hover 就不必去定义命令了, 因为他的触发规定就是悬停

咱们新建 hover.js 文件

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文件如下

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 成果

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

咱们齐全能够利用这个快捷查找一些你们公司外部的词汇的具体含意, 或者某些 code 与 id 代表的含意.

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

“ 文件中配置模板

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

./snippets/cc.json内容如下:

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


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

十三. 左侧标签与构造

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

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


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

十四. 树结构, 官网例子的不足, 也没有对 api 进行无效的解说(重点)

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

第一步: 新建 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;
  },

  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 公开.

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

5: 去配置一个 token, 按图里的程序点击




这里配置的是最宽松的条件, 因为这样才会没有那些莫名其妙的谬误.

这里留神, 点击 create 之后可能页面没刷进去货色, 能够抉择重复刷新页面, 也能够抉择从新做一遍上述流程, 因为这里的 token 只展现一次, 之后是找不到了的, 所以千万要复制下来.

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

十六. 公布与勾销公布

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

当前咱们打包插件与公布插件都会用到这个小伙子.

npm install -g vsce
形式一. 控制台公布

关上控制台, 输出命令
前面是你登陆者的名字, 这里创立发布者


零碎会顺次让咱们输出 名字、邮箱、刚刚获取的 token

这里我改了下名字, 前面会讲这个问题

默认是登录状态的, 然而如果当前咱们要切换用户的话要上面的步骤
接下来咱们登陆一下 vsce login (publisher name) 登陆开发者

还须要输出一下 token

问题: 反复了的话会报上面这个错, 就须要咱们改一个发布者名字了

公布

vsce publish 或者 vsce publish -p xxxxxxxxtoken

如果呈现报错
1:

在 package.json 中增加 "publisher": "发布者的名字",
如果还不行, 咱们能够在官网增加这个名称进入团队

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

公布胜利

两分钟左右就能够在利用商店搜到了(哈哈, 上面的也是我写的 demo)

本人做好的当然要装置一下试试啦

性能都在所有安好.

形式二. 网站公布

这个也是官网比拟举荐的公布形式, 这里我来演示一下 (创立发布者账号)
地址是:https://marketplace.visualstudio.com/manage

输出名字, id 会主动雷同, 这个 id 也是惟一的所以要起个好名字.

这里能够定义你的图标了，并且能够把相关联的地址信息写上，这样公布也挺不便。

在这个网站里能够间接配置公布的信息，更新的操作如下（拖拽更新）：

十七. 打包传递

如果咱们间接在代码里公布是不必手动打包的，如下状况须要手动打包。

  1. 在网站更新降级插件
  2. 插件外部应用，采纳安装包发给对应同学的形式应用

打包命令 vsce package

会呈现如图 vsix 为后缀的文件。

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

想要给他人应用的话如下图：

而后会弹出文件抉择框，这样就能够实现安装包装置了。

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

能做什么的畅想
  1. 一个字典，每次悬停在某个 id 上主动寻找对用的含意。
  2. 团队外部组件的疾速生成应用代码。
  3. 工作中的各种提醒，比方定时提醒你头上的 bug 数，这个要让公司给你出接口了哈。
  4. 左侧栏展现今日的工作安顿，等等等等的吧
要做什么

其实吧你说它功能强大也对，然而实际上编辑器就是编辑器，一些人想要做很多很多性能放在 vscode 外面，那还不如间接做个桌面端或者网站，咱们做插件因该做尽量方面的性能，不必过多操作的性能，更定制化的性能，这里的劣势是能够获取到开发人员以后的编辑状态，所以一些与此无关，又略显繁琐的工作不倡议放在插件里实现。

end

这次就是这样, 心愿和你一起提高.

退出移动版