VSCode拡張機能開発の始め方

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

# 始め方

VSCode拡張機能の[Yeoman](https://yeoman.io/)テンプレートが用意されていますのでインストールします。

```
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

以下、詳しくみていきます。（情報が古い可能性があるため、正確には[公式ページ](https://code.visualstudio.com/docs/extensions/publish-extension)を参照してください。）

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

[Azure DevOps](https://azure.microsoft.com/services/devops/)に行き、アカウントを作成します。
![AzureDevOps.png](https://qiita-image-store.s3.amazonaws.com/0/15783/8c29eca3-9146-fa61-e499-288f2a1a5079.png)

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

アカウントを作成し、ログインできたらアイコンクリック -> Security ->
<img width="1112" alt="token-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/15783/7fe73aa8-d187-bea0-ef3d-ec437ad7d2c4.png">
真ん中の `Personal access token` を開き、`New Token`をクリック 
<img width="1156" alt="token-1.5.png" src="https://qiita-image-store.s3.amazonaws.com/0/15783/976c95e2-13b6-9f1b-3fbd-de7a1c020979.png">
名前等入力して Scopes を設定するため `Show all scopes` をクリック
<img width="1156" alt="token-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/15783/759f48a0-ce9e-8109-1428-04198335dfbf.png">
`Marcketplace`を探して、`Acquire`と`Manage`をチェックして`Create`クリック
<img width="1156" alt="token-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/15783/a6a94575-5002-b845-1c41-e9fde4fb7c66.png">
表示されたトークンをコピー（二度と表示されないので注意）
<img width="400" alt="token-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/15783/4e360080-fc4b-d1a1-4f76-0882c1afea3b.png">

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

ローカルにnpmで[vsce](https://www.npmjs.com/package/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