🗂

monorepo環境でVSCode拡張機能を作る

2022/01/14に公開

monorepo 環境でライブラリと VSCode 拡張機能を作ったので、有用そうなものを紹介します。

作ったものは以下のリポジトリに置いています。細かい紹介は個人ブログに書いています。

構成

pnpm
turborepo
changesets

changets はバージョン名の更新のためだけに使って、公開はpnpm -r publishでやっています。
turbo は next.js をよく使うので、Vercel 繋がりということで使っています。今のところいい感じです。

pnpm で vsce を使うときの問題

VSCode 拡張機能を開発するために使う CLI である vsce を pnpm で使うとnpm ERR! missing:が表示されてビルド出来ません。

ビルド時に--no-dependenciesオプションを付けるとエラーは無くなりますが、パッケージに依存ライブラリが同梱されなくなります。

この問題にぶつかって一時的に yarn workspace を試していたのですが、こちらはルートの node_modules を見に行ってくれず依存ライブラリが同梱されないようです。

解決策

パッケージに依存ライブラリをバンドルした上で、ビルド時に--no-dependenciesオプションを付けることにしました。

esbuild によるバンドルは公式ドキュメントにも記載されています。

ビルド用コマンドは以下のようにすると良いようです。

package.json

    "vscode:prepublish": "npm run esbuild-base -- --minify",
    "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node",

パッケージ作成と公開のコマンドは以下のようにしました。

package.json

    "package": "pnpm vsce package --no-dependencies",
    "release": "pnpm vsce publish --no-dependencies"

GitHub Action で自動的に VSCode 拡張機能を公開する

公式ドキュメントは以下の通りです。

vsce publishは現在のバージョン名のパッケージがすでに公開されている場合にエラーで終了するので、バージョン名が変化した時だけ実行するようにしてみました。

publish.yml

      - name: Publish blogview-vscode
        run: |
          cd packages/blogview-vscode
          PUBLISHED=$(pnpm vsce search blogview-vscode --json | jq -r '.[].versions[0].version')
          CURRENT=$(cat package.json | jq -r '.version')
          if [ "$PUBLISHED" != "$CURRENT" ]; then
            pnpm release -- -p "$VSCE_TOKEN"
          fi
        env:
          VSCE_TOKEN: ${{ secrets.VSCE_TOKEN }}

vsce searchで公開したい拡張機能を検索します。
検索結果から、GitHub Actions のubuntu-latestに標準で入っているjqで現在のバージョン名を取り出します。

取得したバージョン名を package.json の値と比較しています。

おわり

monorepo で VSCode 拡張機能を作ってみて有用そうなものを紹介しました。

参考になればうれしいです。終わります。

GitHubで編集を提案

構成

pnpm で vsce を使うときの問題

解決策

GitHub Action で自動的に VSCode 拡張機能を公開する

おわり

Discussion