nikkie-ftnextの日記

イベントレポートや読書メモを発信

新しい概念を最小限にして、自作VS Code拡張をMarketplaceに公開する

VS Code

はじめに

「今はまだ勇気も自信もぜんぜんだから」、nikkieです。

Visual Studio Code、通称「VS Code」の拡張自作シリーズです。
自作した拡張をMarketplaceに公開できたのですが、「もし自分がもう一度最初からやるなら、新しい概念に慣れるためにこうやればよかったんじゃないかな」という最小手順をアウトプットします。
ドキュメントに沿ってやりきった後、ドキュメントを眺めていたら記載がありました。

目次

前回までの自作VS Code拡張！

VSCode Conference Japan 2021のハンズオンテキストを元に、自作拡張を開発しています🎀

この拡張のE2Eも書けた1ので、いよいよ公開することにしました。

VS Code拡張をMarketplaceに公開するためのドキュメント

公開手順は「Publishing Extensions」という情報量豊富なドキュメントに記載されています。

これに沿って自作拡張を公開までできた2のですが、新しい概念が複数登場したため私には大変な道のりとも感じました。

このドキュメントにはvsceコマンドを使って自作拡張を公開する方法が網羅されているのです。
ですが、その中に新しい概念を最小限として公開する方法も紹介されていたんです！

新しい概念を最小限としてVS Code拡張を公開！

Alternatively, you can package the extension (vsce package) and manually upload it to the Visual Studio Marketplace publisher management page.3

(意訳) あるいは、vsce packageコマンドで拡張をパッケージし、Visual Studio Marketplaceのpublisher管理ページに手動でアップロードしてもよい

この方法では登場する新しい概念は2つで済みます。

  1. vsceコマンド
  2. Visual Studio Code Marketplaceのpublisher

1. vsceコマンド

npm install -g @vscode/vsceでインストールします4。
Node.jsの環境が必要です。

カレントディレクトリが自作拡張の開発ディレクトリとして話を進めます（package.jsonなどがあるディレクトリです）。

自作拡張をパッケージにするコマンドはvsce packageです。
vsce lsでパッケージにするファイルの一覧を確認できます。

vsce packageが正常終了すると拡張子がvsixのファイルができています。
例：hoge-fuga-0.0.1.vsix
これがパッケージになったVS Code拡張です。

パッケージにする際の注意点

  • YeomanでスキャフォールドしたREADMEのままではエラーとなる

    • Make sure to edit the README.md file before you package or publish your extension.

    • README.mdを編集する（タイトルだけ残すなど、大きくコンテンツを削った）
    • ref:
  • package.jsonにpublisher ID（後述）の記載が必要
    • "publisher": "publisher ID",
    • 未記載だと後述のアップロードでエラー
  • ハンズオンのテキストに沿っている場合、package.jsonのnameを変える
    • Marketplaceでnameが重複すると、後述のアップロードでエラーとなる

この記事では立ち入りませんが、Marketplaceで存在感を出す方法として、Marketplace integrationにいくつかのファイルのtipsが紹介されています。

動作環境 (2023/01/12 追記)

  • node v16.14.2
  • npm 8.5.0
  • vsce 2.11.0

2. Visual Studio Code Marketplace

ブラウザを操作してvsixファイルをアップロードします。

まず https://marketplace.visualstudio.com/manage からログイン（私はMicrosoftアカウントを使いました）。

publisherを作る

ログインした後に表示されるページでpublisherが作れます。
publisherとは「Visual Studio Code Marketplaceに拡張を公開できる識別子 (A publisher is an identity who can publish extensions to the Visual Studio Code Marketplace.5)」です。

「Create publisher」から作りましょう。
必須項目のNameを入力するとIDも同じ値になりました（Basic informationの箇所）。

作成したpublisherにvsixファイルをアップロード

作成したpublisherを選択し、「New Extension」-> 「Visual Studio Code」と選択します。
パッケージしたvsixファイルをアップロードすると処理され、エラーがなければMarketplaceに公開されます！
あなたの作った拡張を世界に公開！

私にはわかりにくかったのですが、Extensionsの各行は右クリックすると、AvailabilityをPublic / Unpublishedと切り替えられます（Nameの…（More Actions…）と同様のメニューです）。

終わりに

新しい概念を最小限にしてVS Code拡張を公開する方法を共有しました。
vsceコマンドでパッケージし、それをpublisherのExtensionとして手動アップロードできます。

私の意見では、いままでやったことがないことをやるときは新しい概念が1つが一番やりやすいです。
新しい概念が2つ3つとあると、難易度が一気に跳ね上がります（うまくいかなくなり、途中で諦めることになるかもしれません😢）。
「Publishing Extensions」のドキュメントは情報量が豊富ですが、新しい概念が多く、私にはハードルが高い内容でした。
いままでやったことがないことをやるとき、新しい概念が少ない方法があるなら、私はそちらをオススメします。

なお手動アップロードは初めての方にはオススメですが、概念に慣れた後は「Publishing Extensions」に沿うのがオススメです。
この記事では説明していない「Azure DevOps」によって、vsceコマンドだけで拡張が公開 できちゃいます！（アウトプットはまたの機会に）

P.S. vsixファイルについて

vsixファイルさえあれば code --install-extension my-extension-0.0.1.vsix でインストールできます！6
インストールできるかの確認にもよさそうですね

VS Codeの拡張のメニューにも「Install from VSIX...」があります7。

そしてインストールした拡張は、例えばmacOSなら~/.vscode/extensionsに置かれているんです！8

  1. 私は、VS Code拡張のE2E、書いてみたい！ 〜今はこれが精一杯🔰、中間報告編〜 - nikkie-ftnextの日記↩
  2. ↩
  3. https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publish-an-extension↩
  4. https://code.visualstudio.com/api/working-with-extensions/publishing-extension#installation↩
  5. https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher↩
  6. https://code.visualstudio.com/api/working-with-extensions/publishing-extension#packaging-extensions↩
  7. Visual Studio Codeの拡張機能を一通り触って自分用に公開するまで - Qiita で知りました↩
  8. 他のプラットフォームについても記載があります：https://code.visualstudio.com/api/working-with-extensions/publishing-extension#your-extension-folder↩