Go to Qiita Advent Calendar Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k2-gc

VSCode 拡張機能を作って Marketplace で公開してみた

Posted at

VSCode 拡張機能を作って Marketplace で公開してみた

VSCode の拡張機能を作って publish してみたので，その覚書です．
本記事に含まれるもの：拡張機能の実装準備〜公開
含まれないもの：実装

はじめに

最近 Google Antigravity が出たりして IDE 周りも変わってきていますが，
それでも多くの方は Visual Studio Code（VSCode）を使っているのではないでしょうか．

私自身も普段の開発では VSCode をメインで使用しており，
さまざまな拡張機能に助けられながら実装を進めています．

そんな中でふと，

「そもそも VSCode の拡張機能ってどうやって作るんだ？」

と気になったので，実際に作ってみることにしました．
さらに， Marketplace に publish までしてみました．

この記事では，
VSCode 拡張機能を作って公開するまでの流れと作成した拡張機能のご紹介をしようと思います．

作成したもの

まずは私が作成したものをご紹介しようと思います．
主な機能は以下です．

  • 何もしません
  • ただただ，可愛いアイコンが出てきて歩き回る
  • 疲れた時に開いて癒されてください

以下が動かした時のデモです．
起動するとパネルが分割されて，下記のような動物がずっと歩き回ります．

demo.gif

以降，準備から公開までの手順を記載します．

準備

必要なもの

  • Node.js
  • git
  • Microsoft アカウント（Azure DevOps 用）
  • VSCode

実装準備

  1. Yeoman と VS Code Extension generator の実行
    下記により，VSCode の拡張の実装に必要なテンプレートの作成に入ることができます

    $ npx --package yo --package generator-code -- yo code

    もしくは

    $ npm install --global yo generator-code
$ yo code

  2. テンプレート作成
    上記を実行すると下記のような画面が表示されるので，各質問に回答する

    $ yo code

         _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

✔ What type of extension do you want to create? New Extension (TypeScript)
✔ What's the name of your extension? hello-vscode-world
✔ What's the identifier of your extension? hello-vscode-world
✔ What's the description of your extension? 
✔ Initialize a git repository? Yes
✔ Which bundler to use? unbundled
✔ Which package manager to use? npm
✔ Do you want to open the new folder with Visual Studio Code? Open with `code`

  3. フォルダが作成される
    上記が完了すると extension name でフォルダが作成される
    下記のようになっていたら OK

    ./hello-vscode-world/
    ├── CHANGELOG.md
    ├── eslint.config.mjs
    ├── node_modules/
    ├── package-lock.json
    ├── package.json
    ├── README.md
    ├── src
    │   ├── extension.ts
    │   └── test
    ├── tsconfig.json
    └── vsc-extension-quickstart.md

公開用の準備

  1. vsce インストール
    npm で vsce をインストールする
    vsce は VSCode の拡張機能を固めたり，公開するのをサポートしてくれるツール 
    $ npm install -g @vscode/vsce
  2. Azure DevOps の Personal Access Token（PAT）作成
    公開には Azure DevOps の PAT が必要
    • Azure DevOps で Organization を作成し，下記選択
      image.png
    • 「+ New Token」ボタン選択
    • 諸々入力
      • Name：token 名（なんでも良い）
      • Organization：多分デフォルトで入っている
      • Expiration：token の有効期限
      • Scopes：「Custom defined」-> 「Show all scopes」-> 「Marketplace」->「Manage」
      • 「Create」
        image.png
      • 表示された token をコピー
  3. publisher 作成
    公開に必要な publisher の作成
    • Marketplace の publisher 用の管理ページ にアクセスし，PAT を作成したのと同じ Microsoft アカウントでログイン
    • 「Create publisher」選択
    • 必要事項入力
      • ID：Marketplace 内で一意な ID．Extension の URL に使用される．後から変更不可
      • Name：Marketplace に表示される publisher 名
    • 「Create」選択
    • アカウント verify
      自分のターミナルで vsce login "publisher-ID" を実行
      PAT を聞かれたら作成した token を入力する
      下記のように succeeded と表示されたら OK 
      $ vsce login "publisher-ID"

      The Personal Access Token verification succeeded for the publisher '"publisher-ID"'.

実装など

実装方法などはここでは解説しません．

公開に必要なもの・準備しておくと良いものは下記です．

項目 内容
package.json name，version，publisher，enginesは必須
LICENSE，repository，bugs とかもあると良い
詳細は参考-Extension Manifestを参照
README.md Extension Marketplace でそのまま表示される
icon Marketplace で表示される
.vscodeignore Marketplace にアップするファイルに不要なものを入れないための設定
CHANGELOG.md Marketplace で表示してくれる

など．
あとは後述する .vsix ファイル（Marketplace にアップロードする本体のファイル）です．

公開

  1. 作成したコードのパッケージ化
    プロジェクトディレクトリ内で下記を実行する

    $ vsce package

    hello-vscode-world-0.0.1.vsix
├─ [Content_Types].xml 
├─ extension.vsixmanifest 
└─ extension/
   ├─ changelog.md
   ├─ package.json
   ├─ readme.md
   └─ out/
      ├─ extension.js
      └─ test/
         └─ extension.test.js

    問題がなければ .vsix ファイルが作成され，同梱されたファイルが表示される．

  2. 一応中身の確認
    下記コマンドで含まれているファイル一式を確認できる

    $ vsce ls --tree

    hello-vscode-world-0.0.1.vsix
├─ CHANGELOG.md
├─ README.md
├─ package.json
└─ out/
   ├─ extension.js
   └─ test/
      └─ extension.test.js

  3. publish
    問題がなければ公開
    2 通りの方法

    1. ブラウザから
      Marketplace の管理ページ から「New Extension」-> 「Visual Studio Code」-> .vsix ファイルアップロード
    2. terminal から 
      $ vsce publish

      DONE  Published XXXXX vX.Y.Z.

  4. 管理ページから状況確認
    Marketplace の管理ページ から "version" の欄を確認
    「verifying 」から「バージョン名」に変化したらリリース完了
    image.png

  5. vsce の package と publish の違いについて

    1. 共通
      • package.json 内に記載されているscripts.vscode:prepublish を実行
      • .vscodeignore などを参照し，固めるファイルなどを選定
      • .vsix ファイルに固める
    2. package
      • .vsix ファイルをローカルに出力
      • ブラウザからの publish や Marketplace 以外でのファイル共有などに使用
      • .vsix 内のファイルの確認などにも使用
    3. publish
      • .vsix を作成した上で publish まで実行

さいごに

今回は VSCode Extension の作成と公開をしてみました．
意外とすんなりできました．
今後は，今回作成した Extension の拡張と，便利ツールの作成などにもトライしてみたいです！
私の作成した Kawaii Terrarium，もし興味あればいれてみてください！（記事投稿時で 1 インストール）

参考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?