这是一篇没代码的技术文章，仅仅想尝试分享一些总结和想法。

我觉得，每个人思考方式不一致，工作内容不一致，接触事物不一致，价值观不一致，各式各样多姿多彩的生活下，为什么要把分享的模式也固化？

所以最后选择不分享api了，直接聊聊零零散散的东西，当然我也做好没啥阅读量的准备。

背景

近2年大部分时间都在折腾小程序，微信、百度、字节、支付宝、360等等平台都在探索。

在6月份WWDC 2020 上推出iOS的App Clips，随后9月无意发现Moon FM Podcast Player 有提供clips体验。

当时体验了一个名为Anyway.FM的Clips，发现这真是一个好电台，两位UI设计师在FM一直聊非UI设计相关的主题，但同时会介入很多设计上或科技上的思考内容。

在小程序的圈子久了，想寻找一些新鲜的事物，然后从我自身寻找一些“伪需求”作为目标。

我每天接触最多的工具就是vscode，每天看的最多内容是关于switch游戏的折扣和新闻。

于是找到切入点，在vscode上随时看得到这些内容。

抓包

开发插件前，我没有任何数据，自然也没有任何接口。所以首先想到的是抓包。

如何抓包，在任何地方搜一搜都能看到Fiddler、Wireshark、Charles等等的App教程。

之前我比较喜欢用surge，最大原因就是界面好看清晰。但是因为surge的正版需要$50就暂时没入手。

后来找了下类似软件，发现proxyman，并且提供长期的试用版，更重要的还是好看。

我写这个插件，接口的来源是从小程序抓取。

小程序现在可以在Mac上访问后，抓取的工作就变得异常简单。在之前需要手机连接同一个wifi，设置http代理至电脑，安装CA证书等等。

但现在直接在电脑上启动小程序就可以动手抓包了。

开发

Vscode 插件功能从2015年11月随着beta版本的vscode上线，直到现在经历了5年。所以文档和示例代码都非常完善了。

创建一个插件其实只需要两步，简单的步骤才不会杜绝写代码的激情。

# 安装yeoman(yo)和yeoman里的vscode插件生成工具(generator-code)
npm install -g yo generator-code

# 创建插件项目
yo code

启动项目后，微软也非常贴心帮你准备好运行脚本，直接在vscode右侧的“运行”点击 “Run Extension”即可。

概念

在一个新平台做开发，首要是需要了解概念。包括目录结构、能力、核心。

查询文档后，归纳出以下概念

src为插件源代码（行业标配）
package.json是对整个插件的描述配置（当做小程序的app.json，Android的manifest，iOS的Project）
event和command是核心，最传统的订阅发布机制
入口文件提供activate和deactivate两个方法（更贴切成为生命周期）

对初步的平台有了概念，并且通过以往的经验进行类比。那接下来写代码逻辑上会清晰许多。

在插件里，我的目标是需要定义一个侧边栏，并且显示一个树状列表显示游戏的列表。

这里需要找出“侧边栏”和“树状列表”的实现方式。

侧边栏

定义一个侧边栏，那应该是插件的描述配置Package.json的内容，比较vscode的外壳我们不能随意自定义，通过配置注入才合理。在文档上对应Contribution Points章节，找到contributes.viewsContainers的段落后，就可以得到答案。

Contribute a view container into which Custom views can be contributed. 提供一个视图容器，可以将自定义视图放入其中。

树状列表

树状列表也是很容易找到文档，在文档的Extension Guides直接能看到Tree View API的说明。非常清晰的介绍如何设置icon、command、event等等。

这里可以提一下，树状列表的每一项是通过getChildren返回的TreeItem后进行渲染。和Android的RecycleView通过adapter的onCreateViewHolder有异曲同工之处，当然iOS的TableView也一样。

当发现了这个规律，就可以了解到提供者模式和适配器模式的具体表现，明白如何为两个独立接口的场景提供解耦的桥梁。

Github

自己玩玩的代码当然放在github最理想，提供private repo，github actions 等实用的功能，而且免费的额度也足够使用。

github actions

我一直不喜欢在本地的电脑上做任何发布的。觉得这些操作重复率高，容易出错，体验上很傻X，总是要进入“如何证明自己的操作是正确的”这样的证明题。

GitHub Actions 是微软于 2018 年秋季推出的一个平台。开发者可以借助 Actions 平台建立工作流，使用他们代码仓库中定义好的 action、或者 GitHub 公开代码库中的 action，甚至是一个公开的 Docker 容器镜像。

github actions 体验到现在，给我最大的感触是，比以往jekenis、gitlab ci/cd简单多了。

在github上，创建一个workflow是非常容易。github提供了一系列完整的workflow作为你项目的基础。比如部署到Azure、Amazon ECS，构建一个iOS/Android app，甚至可以检车项目的issue，PR等等。

可以完全不用像以往，在一个新的CI/CD平台上，先了解全部的概念，才能断断续续写出一个可能可用的workflow，然后小心翼翼的点击测试，祈祷output上没有红色的一行文字。

Actions的配置会存在项目的.github/workflow里

name: publish
on:
  push:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install with cache
        uses: bahmutov/npm-install@v1.1.0

      - run: npm run vscode:prepublish
      
      - uses: lannonbr/vsce-action@master
        with:
          args: "publish -p $VSCE_TOKEN"
        env:
          VSCE_TOKEN: ${{ secrets.AZURE_TOKEN }}

打开yaml的配置非常清晰的任务描述，甚至可以用中文直接读起来。

任务publish，在master分支进行push的时候进行构建，构建在最新的Ubuntu上运行。构建步骤：

1.拉代码
2.搞个nodejs 12.x的版本
3.装个依赖
4.跑个命令
…

Github actions 在免费套餐下有限额，每月提供2000分钟的运行时间。

后续

一顿折腾下来，我的收获：

找到一个好看的代理工具proxyman
了解了部分vscode插件原理、上线发布
了解了github actions的操作使用
收获到55位用户😂

在vscode的扩展搜索“任天堂”或”nintendo”即可。

其实后面也可以延伸更多的尝试，比如把插件在Atom、JetBrain系列编辑器上移植过去，在JetBrain上也可以体验一下kotlin。

或者有机会在业务上实现一套插件解决方案，灵感也可以来源于vscode这类工具。

github地址

一篇没代码的技术文章—尝试vscode插件

背景

抓包

开发

概念

侧边栏

树状列表

Github

github actions

后续