Zenn
🐕

VSCode拡張開発でモジュールロードエラーを解決する

に公開
VS Code
png
extension
jpeg
tech

概要

VSコード拡張を作って公開してみようと思います。
以下を参考にして作業を進めました。

本記事では私が作業をするうえで詰まった内容を記載しておきます。

VSCode で Developer Toolsを使う方法

VSCode拡張の開発中は、拡張が正しく動作しない場合やエラーが発生した場合に、Developer Tools（開発者ツール）を使ってコンソールログやエラーを確認することができます。これにより、問題の原因を特定しやすくなります。最初このやり方が全く分からずに大変困りました 💦

あとは、基本的に参考にしたサイトに従って作業すれば問題ないと思うのですが、私はモジュールのロードで詰まったところがありましたので整理しておきます。

モジュールのロードエラー

今回sharpという外部パッケージを使ったのですが、その時にエラーが起きました。拡張キット開発ホストで実行した時はエラーが起きず、VSIXファイルを使ってインストールしたときだけエラーが起きました。拡張機能から使用しているパッケージファイルがVSIXに格納されないために起きたようです。

エラー内容

Could not load the "sharp" module using the darwin-arm64 runtime

他にも以下のようなエラーが出ました。

  • Cannot find module 'detect-libc'
  • Cannot find module 'color-string'
  • Cannot find module 'color-name'
  • Cannot find module 'simple-swizzle'
  • Cannot find module 'simple-swizzle'

対策

拡張機能に含めるパッケージをignore対象から外すと解決します。この時、エラーは一気に出てくれず、依存パッケージを参照するたびにエラーが出るので、vsce package -> INSTALL FROM VSIX を何度も繰り返して無視対象を絞り込みました。いい方法があったら教えて下さい 🙏

  • .vscodeignoreで以下のように例外指定を追加

    node_modules/**
!node_modules/sharp/**
!node_modules/@img/sharp-*/**
!node_modules/color/**
!node_modules/color-string/**
!node_modules/color-name/**
!node_modules/simple-swizzle/**
!node_modules/semver/**
!node_modules/detect-libc/**

    .vscodeignoreでnode_modules/**を除外し、sharp本体やバイナリだけ例外指定しても、依存パッケージ（直接・間接）がVSIXに含まれず、実行時にエラーとなる。

クリーンコマンド

ビルドの動作確認に慣れるまでは、確実に変更が反映することを保証したいので、環境をクリーンしたいことがあると思います。拡張機能開発では以下を削除すればよいようです。

  1. distディレクトリの削除（ビルド成果物のクリーン）
    rm -rf dist

  2. node_modulesの削除（依存パッケージのクリーン）
    rm -rf node_modules package-lock.json

ビルドコマンド

最終的に以下のコマンドで拡張機能を公開します。

  1. 依存パッケージをインストール
    npm install

  2. VSIXパッケージを作成
    vsce package

  3. publisherとしてログイン
    vsce login

  4. 公開
    vsce publish

作成した拡張機能

ちなみに作成した拡張脳は以下です。
ZENNで記事を書く時に、Paste Imageを使わせてもらっているのですが、PNG形式で保存されデータサイズが大きいことが気になっていました。本拡張機能でPNGをJPGに変換できるので容量を節約できます！そういう時代でもない気がしますが貧乏性で 😅

Discussion