記一次前端"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教程