薅一手 Github Actions 自动发包 VSCode 插件

[rottenpen]

薅一手 Github Actions 自动发包 VSCode 插件

背景

之前忙于开发（其实是懒）一直没有做过 VSCode 插件 CI 方面的工作，一直是手动发包的节奏，vsce package → VSCode 官网 → publish extension → 拖压缩包进来 → 上传。链路长，而且巨硬的网速出了名的烂，未免有点呆。最近正好 VSCode Kooltest 开源，干脆薅上 Github actions 的羊毛，集成一下。

Github Actions

Github 的 CI 规则与日常使用 gitlab 的规则大同小异这里就不赘述了，不过 Github Actions 有一个很好的地方是，它有一个 Github Marketplace 可以从上面直接复用别人写好的 YML 脚本(类似 docker hub)

在 Marketplace 上搜到了专门针对 VS Code 插件的 Publish VS Code Extension。

具体操作

在你的github仓库根目录下创建好 .github/workflows/main.yml ，参考我写好的 YMI（直接复制粘贴即可）

# action 名
name: Deploy Extension
# 触发时机: 这里表示 push 或者 pr 合并到 main 上
on:
  push:
    branches:
      - main
    pull_request:
      branches:
        - main
jobs:
  deploy:
# 运行的镜像和使用的 node 版本号
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 15
	# 运行 npm ci 前，请保证现在 lock 相关文件无误
      - run: npm ci
	# 使用上述 github action
      - name: Publish to Visual Studio Marketplace
        uses: HaaLeo/publish-vscode-extension@v0
	# 在 [https://dev.azure.com/](https://dev.azure.com/) 上生成的 marketplace 密钥
        with:
          pat: ${{ secrets.VS_MARKETPLACE_TOKEN }}
          registryUrl: https://marketplace.visualstudio.com

创建好文件之后，请在 https://dev.azure.com/ 生成密钥，**Organization 要选 All accessible organizations (此处划重点) ，**不然 deploy 的时候会报 401。

接下来要配置你的 github 仓库，注意 secret 名要叫VS_MARKETPLACE_TOKEN

到这，整个 CI 配置就基本完成，接下来就可以通过 push 或者 pr 来触发这套 deploy job 了。（版本号记得更新，不然也会发包失败）

补充知识点和坑

npm ci

npm ci 和 npm install 命令一样，是用来安装依赖的命令，但它可以比常规的 npm 安装快得多，也比常规安装更严格，它可以保证 npm 依赖安装的一致和稳定 (锁版本)。

所以这里有一个小前提，要保证 package-lock.json 文件存在并且无误。存在即是指要git push 的时候要把 package-lock.json 文件上传到仓库。无误指的是 lock 文件内的仓库地址可访问，如果这个 lock 文件是在内网私库环境生成的，在 github 上运行就会运行失败了。

文件名大小写要注意

import 的首字母大小写是会被 tsc 忽略的，以前有些模块引入路径我写错了，但没怎么留意。直至走 CI 流程的时候才被捕捉到，告诉我路径有问题。