Visual Studio Code (VSCode)の拡張機能開発の始め方と公開が意外と簡単だったのでご紹介します。

始め方

VSCode拡張機能のYeomanテンプレートが用意されていますのでインストールします。

npm install -g yo generator-code

Yeomanを実行して質問に答えていきます。

$ yo code

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

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)
? What's the name of your extension? (入力)
? What's the identifier of your extension? (入力)
? What's the description of your extension? (入力)
? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
? Setup linting using 'tslint'? Yes
? Initialize a git repository? Yes
? Which package manager to use? npm

すると the identifier で入力したディレクトリ内にファイルが生成されます。

これであとは開発していきます！

公開方法

公開方法もたったの数ステップです。
1. Azure DevOpsにアカウントを作る
2. Azure DevOpsでアクセストークンを作る
3. vsceをインストールする
4. vsceでpublisherを登録する
5. vsce publish

また、バージョンアップも一発です。
6. バージョンアップもpublish

以下、詳しくみていきます。（情報が古い可能性があるため、正確には公式ページを参照してください。）

1. Azure DevOpsにアカウントを作る

Azure DevOpsに行き、アカウントを作成します。

2. Azure DevOpsでアクセストークンを作る

アカウントを作成し、ログインできたらアイコンクリック -> Security ->

真ん中の Personal access token を開き、New Tokenをクリック

名前等入力して Scopes を設定するため Show all scopes をクリック

Marcketplaceを探して、AcquireとManageをチェックしてCreateクリック

表示されたトークンをコピー（二度と表示されないので注意）

3. vsceをインストールする

ローカルにnpmでvsceをインストールします。

npm install -g vsce

4. vsceでpublisherを作る

package.jsonのpublisherに指定した名前を入力してアクセストークンを入力します。例としてtiibunとします。

vsce create-publisher tiibun

すると ~/.vsce というJSONファイルができます

.vsce

{"publishers":[{"name":"tiibun","pat":"(略)"}]}

また、ls-publishersで表示されます。

$ vsce ls-publishers
tiibun

5. vsce publish

ここまで来たら後は公開するのみです。

vsce publish

しばらくするとMarcketplaceに表示され、拡張機能がインストールできるようになります。

6. バージョンアップもpublish

vsce publisheの引数に、major, minor, patchを指定すると、package.jsonのversionを書き換え、公開までしてくれます。
例えば、今のバージョンが0.1.0として、0.2.0として公開したい場合、minorを指定します。

vsce publish minor

直接指定することも可能です。

vsce publish 0.2.0

まとめ

いかがだったでしょうか。とても敷居が低く感じられると思います。
ぜひ拡張機能を作成して公開しましょう。

参考

公式
https://code.visualstudio.com/docs/extensions/overview

VSCode拡張機能開発の始め方

始め方