Visual Studio Code用のExtention(Color theme)の作りかた

January 12, 2021

最近は、もっぱらVisual Studio Codeでコーディングすることが多いaimofです。せっかくなのでvscode extentionの中でも比較的簡単なColor Themeを作ってみました。名前は、Hinode。日の出をイメージしたデザインです。

Preview

(screenshot内で利用したソースコードの LICENSE )

githubリポジトリはこちら

color themeの作り方

color themeの作り方をまとめておきます。英語が読めれば公式ドキュメントに全部書いてあります。

プロジェクトを作ろう

npm install -g yo generator-code
yo code

yo codeと打つと（日本人からすると）不思議な顔文字が出てきて、初期設定を案内してくれます。 ? What type of extension do you want to create?という最初の質問は、 color theme と答えてください。

色を設定しよう！

自動生成されたディレクトリの中に入ると、必要なものが一式揃っています。 themes/xxx-color-theme.json が本体です。 colors が、vscodeの色設定。 token colors がソースコードハイライトの色設定です。

公式ドキュメントのThme color に設定すべき変数がすべて書いてあります。今回の記事では色の選び方は書きません。設定の量が多いので大変です。

公開しよう！

公開の準備をします。

package.jsonに追記
CHANGELOG.mdに最初のリリース情報を記載
アカウントの準備

package.jsonに追記

package.jsonに、公開に必要な情報を追記します。

{
  "publisher": "aimof",
  "icon": "./images/icon.png",
  "license": "https://github.com/aimof/hinode/blob/master/LICENSE",
  "homepage": "https://github.com/aimof/hinode",
  "bugs": {
    "url": "https://github.com/aimof/hinode/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/aimof/hinode.git"
  },
}

私の場合は、上記の情報を追記しました。 iconは自分で自作して、自分が指定した場所に配置してください。

CHANGELOG.mdに最初のリリース情報を記載

## [0.0.1] 2021-01-12
### Added
- Initial Release

私のはこんな感じ。シンプル。

アカウントの準備

vscode marketplaceとazureのアカウントが必要です。

それぞれ 同じMicrosoftアカウント で作成します。その後、 https://dev.azure.com/xxx/_usersSettings/tokensでpersonal access tokenを準備します。注意点は、 organization を All accessible organizations にすることです。

公開！

公式ドキュメント

npm install -g vsce
# personal access tokenを用意してから
# プロジェクト内で
vsce login username
# tokenを入力
vsce pacakge
vsce publish

これで公開されます。お疲れ様でした。

最後に自作テーマを宣伝

githubリポジトリはこちら