LoginSignup
7

More than 3 years have passed since last update.

自作 VSCode 拡張機能を作って公開する

Posted at

自作の VSCode 拡張機能を作って公開する機会があったので,手順をまとめておきたいと思います。

公開すると,VSCode 上で自分の拡張機能を見つけることができます。

スクリーンショット 2020-01-29 21.53.32.png

気分がいいですね!

VSCode 拡張機能を作る

ツールの準備

Your First Extensionを参考にして必要なものをインストールします。

$ npm install -g yo generator-code

雛形の作成

$ 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? nextword
? What's the identifier of your extension? nextword
? What's the description of your extension? Suggest next English words.
? Initialize a git repository? Yes
? Which package manager to use? npm
   create nextword/.vscode/extensions.json
   create nextword/.vscode/launch.json
   create nextword/.vscode/settings.json
   create nextword/.vscode/tasks.json
   create nextword/src/test/runTest.ts
   create nextword/src/test/suite/extension.test.ts
   create nextword/src/test/suite/index.ts
   create nextword/.vscodeignore
   create nextword/.gitignore
   create nextword/README.md
   create nextword/CHANGELOG.md
   create nextword/vsc-extension-quickstart.md
   create nextword/tsconfig.json
   create nextword/src/extension.ts
   create nextword/package.json
   create nextword/tslint.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN nextword@0.0.1 No repository field.
npm WARN nextword@0.0.1 No license field.

added 121 packages from 582 contributors and audited 288 packages in 12.164s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


Your extension nextword has been created!

To start editing with Visual Studio Code, use the following commands:

     cd nextword
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

今回は nextword という拡張機能を作ることにしたので,カレントディレクトリに nextword というディレクトリが生成されました。

コードを書く

TypeScript を使ってコードを書きます。
最低限編集する必要のあるファイルは,

  • src/extension.ts
  • package.json

です。

Microsoft の GitHub に書き方のサンプルが大量にあるので,このリポジトリを参考にしつつ,ソースコードを書いていきます。

microsoft/vscode-extension-samples

今回は英語の入力補完をするプラグインを書きたかったので,completions-sample を参考にしました。

package.json は Extension Manifest に必要な情報が載っていたので,
既存の拡張機能の package.json を参考にしながら書きました。

activationEvents をちゃんと書かないと,拡張機能がちゃんと起動しない!ということが起こるので,正しく書くのがポイントだと思います。

ということで,以下のように拡張機能を書きました。

high-moctane/vscode-nextword

動作させる

F5 を押してデバッグを開始すると VSCode の新しいウインドウが起動します。
このウインドウは編集中の拡張機能が有効になっているので,動作検証ができます。

今回は以下のように正しく動作していることが確認できました。

vscode.gif

公開する

必要なものは

  • Azure DevOpt organization の Personal Access Token
  • vsce

です。
Publish Extensionsを参考に進めていきます。
順に見ていきましょう。

Personal Access Token の取得

私は Azure に全然詳しくないので,Publish Extensionsを参考に適当に進めました。

まず,Microsoft アカウントがなかったので,これを作成しました。
次に Azure DevOps organization を作成しました。
それから Personal access token を発行します。
発行の際に token の権限をいくつかつけないといけなかったので,記事を参考に権限を与えました。

あれこれすると Personal access token が手に入るので,クリップボードにコピーしておきましょう。

vsce を使った操作

vsce を入手します。これは拡張機能のパッケージングや公開に使うためのコマンドラインツールのようです。

$ npm install -g vsce

publisher の作成

Marketplace に公開できる人のことを publisher と呼ぶそうです。これを作成します。

$ vsce create-publisher high-moctane

high-moctane は私の名前です。
途中で先程作った personal access token を聞かれるので入力します。
これで完了です。

拡張機能をパッケージ化する

以下のコマンドを叩きます。

$ vsce package

終わりです。

公開する

以下のコマンドを叩きます。

$ vsce publish

終わりです。
あっけなく公開ができてしまいました!

まとめ

  1. 雛形をつくる
  2. コードを書く
  3. Publisher の登録をする
  4. 公開する

の手順で自作 VSCode Extension を公開することができてしまいました。
思ったよりも簡単だったので是非 Extension を公開してみてください!

今回例にした自作 Extension はこちらです。

Nextword - Visual Studio Marketplace

英語の入力が楽々になるので是非使ってみてください。

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
7