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 で入力したディレクトリ内にファイルが生成されます。
これであとは開発していきます！
公開方法
公開方法もたったの数ステップです。
- Azure DevOpsにアカウントを作る
- Azure DevOpsでアクセストークンを作る
- vsceをインストールする
- vsceでpublisherを登録する
- 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ファイルができます
{"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
まとめ
いかがだったでしょうか。とても敷居が低く感じられると思います。
ぜひ拡張機能を作成して公開しましょう。