VSCodeでオリジナルのテーマを作る！〜公開まで〜

## はじめに
僕は開発の時、よくVSCodeを使うのですが、ずっと同じテーマを使ってるとちょっと飽きてきます。なんかいいテーマがないか探していたのですが、その時ビビッとくるものが見つからなくて、だったら自分で作ったらいいのでは？と思い、調べたら意外と簡単にできそうだったので作ってみました。
[ThatDayTheme](https://marketplace.visualstudio.com/items?itemName=rui9109.thatdaytheme)は、黒板をモチーフにしたテーマです。
学生時代、毎日見ていた馴染み深い黒板。このテーマを眺めていると、あの時の退屈で、だけどキラキラしていた青春時代を思い出さずにはいられませんね。
いいなと思った方はぜひ使ってみてください。きっと職場で話題の的です。まるで、教室に流行りの缶筆箱を持っていったあの日のように。
![スクショ5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/ae35d043-128a-2ea8-cf94-628963a35e64.png)

## テーマを作る
### プロジェクト作成
まずはじめに、テーマを作成するためのプロジェクトを作成します。
それに必要なライブラリ[YEOMAN](https://www.npmjs.com/package/yo)と[Yo Code](https://code.visualstudio.com/docs/extensions/yocode)をインストールします。

```
npm install -g yo generator-code
```

インストール完了後、yo codeをコマンド実行します。
すると、以下の通り、対話形式で必要な情報を入力していきます。
全く新しくテーマを作成したい場合は、
`Do you want to import or convert an existing TextMate color theme ?`で`No, start fresh`を選択してください。

![スクショ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/26351b23-6258-ee2d-0a5d-3c342d23cc75.png)

全ての情報を入力したら、プロジェクトが作成されます。

### 配色の変更
プロジェクトのディレクトリに移動し、themesディレクトリの直下にある、
{プロジェクト名}-color-theme.jsonファイルを開きます。
そこにある配色を変更することで、テーマカラーを自由に設定できます。
![スクショ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/dc00e01a-cc0e-6fc5-74e7-4717f9b6e969.png)


カラーを指定できる場所の項目は、type定義されているので予測変換で参照することができますが、結構多いのでそのやり方だと多少大変です。
全パラメータを確認するにはコマンドパレット(MacではCommand + Shift + Pで開く)にgenerateなどと入力し、"Developer": Generate Color Theme...を選択します。
するとUntitled-1が生成されます。これは現在設定されているカラーテーマの配色の設定値となります。カラー指定の参考に。

### デバック方法
上記の方法でjsonファイルを好きに編集したら、現在編集中のプロジェクトディレクトリをコピーして.vscode/extensionsディレクトリ直下に、ペーストします。

一度、VSCodeを終了。再起動します。
その後任意のプロジェクトを開き、コマンドパレットに`color them`と入力し、`Preferences: Color Theme`を選択。一覧でカラーテーマが表示されるので、その中から自身の作成したものを選択。するとテーマが適用されるはずです。

## マーケットに公開する
### Microsoftのアカウント作成
編集が完了したら次はMarketPlaceに公開してみましょう!
まずは、[Microsoftのアカウントを作成します](https://docs.microsoft.com/azure/devops/organizations/accounts/create-organization)。

### トークンの取得
アカウントを作成したら、Tokenを取得します。
![スクショ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/9da15b70-7200-ace1-3e8b-decbbda33ccc.png)

上の画像の、Personal Access Tokensからtokenを作成します。

作成時は、Organizationは`All accessible organization`、Scopeは`Custom defined`、MarketPlace(下にスクロールすると出てきます)は`Manage`に設定します。
![スクショ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547300/7ad3dd0d-635f-b663-ec2b-134ce336421b.png)


作成したら再度確認ができないので保管しておいてください。

### ユーザーの作成
次に[こちら](https://marketplace.visualstudio.com/manage)からユーザーを作成します。
作成後、プロジェクトのpackage.jsonに自身の設定したIDを追記してください。

```
    {
        "name": "thatdaytheme",
        "displayName": "ThatDayTheme",
        "publisher": "自身で設定したID", // ここを追記
    }
```

### 必要なもののインストール
次に必要なライブラリ[vsce](https://github.com/microsoft/vsce)をインストールします。

```
npm install -g vsce
```
インストール完了後、先ほど作成した自身のプロジェクト直下で

```
vsce package
```
を実行。拡張子.visxファイルが生成されれば成功です。

### 公開する
いよいよ公開です。

```
vsce publish
```
を実行後、tokenを尋ねられるので、先ほど作成したTokenを入力してください。

もしくは、手動でのアップロードも可能です。
[こちら](https://marketplace.visualstudio.com/manage)より、New extensionのボタンからお試しください。

## おわりに
いかがだったでしょうか？皆さんも自分だけのテーマを作成して遊んでみてください。
え？だるいって？そしたら僕の[ThatDayTheme](https://marketplace.visualstudio.com/items?itemName=rui9109.thatdaytheme)でも使っておいてください。

## 参考
https://code.visualstudio.com/api/working-with-extensions/publishing-extensio