Visual Studio Code - テーマ - 自前のテーマを作る

 クラウディア
1. 概要
2. インストール
3. 準備
4. エクスポート
5. 設定

1. 概要

 前ページで、設定したテーマを「setting.json」で上書きするという方法を示しましたが、上書きした状態を含めて、自前のテーマとしてエクスポートできるということがわかりましたので、やってみようかと思います。  本ページは、下記のサイトを参考にさせていただきました。
Visual Studio Code用のExtention(Color theme)の作りかた」
「Visual Studio Codeの設定「虎の巻」:構文ハイライト/配色テーマ自作編:特集:Visual Studio Codeを使いこなそう
 これが、簡単にできるかと思っていたら、難しかった。

2. インストール

 まず、参考ページでふれてある、「yo code」なるものが必要なのです。  これをインストールするには、「npm」が必要になります。  ニワトリが先か卵が先かじゃなくて、「npm」がニワトリです。  わたしは、「Windows」の環境に「npm」をいれたくなかったので、「FreeBSD」の環境に用意しました。  「Linux」系を持っていたら、その環境でもいいかと思います。  「FreeBSD」の場合、「npm」をインストール。  「root」ユーザ権限で。

pkg install -y npm
 次に、「npm」で「yo code」をインストール。  これまた「root」ユーザ権限で。

npm install -g yo generator-code
 ここまでは、迷うことなくできました。

3. 準備

 前項でインストールした、「yo code」を利用して、拡張機能のひな型を作成します。  拡張機能名を「Mine」としときます(なんか以下、途中で拡張機能名だかなんだか、わからなくなっちゃってるところがありますが(笑))。  ログインユーザ権限で。

yo code
 こんなんでます。  本当は、もっとカラフルですが、面倒なので、勘弁してください。  要は、色が変わっている箇所を選択するものとして、キーで、選ぶことができます。  今回、カラーテーマを対象とするので、「New Color Theme」を選択して Enter

     _-----_     lqqqqqqqqqqqqqqqqqqqqqqqqqqk
    |       |    x   Welcome to the Visual  x
    |--(o)--|    x   Studio Code Extension  x
   `---------´   x        generator!        x
    ( _´U`_ )    mqqqqqqqqqqqqqqqqqqqqqqqqqqj
    /___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
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)
 ここでまた、選択をおこないます(面倒なので、色替えしませんが、察してくだされ)。  ようは、まったく新しく作成するか、既存のものをインポートして作成するかちゅうことですわな。  ここでは、以降の作業で作成したもので上書きする予定です野江、「No, start fresh」で Enter

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? (Use arrow keys)
? No, start fresh
  Yes, import an existing theme but keep it as tmTheme file.
  Yes, import an existing theme and inline it in the Visual Studio Code color theme file.
 名前ですな。  ここんとこが実は、ようわからんのですが「Mine」としておきます。

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? No, start fresh
? What's the name of your extension? ()
 「id」は「mine」でええか?といわれます。  いいということにしておきましょう。Enter

? What's the name of your extension? Mine
? What's the identifier of your extension? (mine)
 もう、いよいよ、ようわからん。Enter

? What's the identifier of your extension? mine
? What's the description of your extension? ()
 ここは、ユーザへ見せるときの、テーマ名とみました。  「Mine」にします。

? What's the description of your extension?
? What's the name of your theme shown to the user?
 なにをひな型にして作成しますか、ちゅうんですが、上書きなので、なんでもいいんですけど。Enter

? What's the name of your theme shown to the user? Mine
? Select a base theme: (Use arrow keys)
? Dark
  Light
  High Contrast Dark
  High Contrast Light
 「git」リポジトリを初期化してよいか?いうておるようです。Enter

? Select a base theme: Dark
? Initialize a git repository? (Y/n)
 以下は、一気に流れて、終わりになります。

? Initialize a git repository? Yes

Writing in /home/hogehoge/mine...
   create mine/themes/Mine-color-theme.json
   create mine/.vscode/launch.json
   create mine/package.json
   create mine/vsc-extension-quickstart.md
   create mine/README.md
   create mine/CHANGELOG.md
   create mine/.vscodeignore
   create mine/.gitignore
   create mine/.gitattributes

Changes to package.json were detected.
Skipping package manager install.


Your extension mine has been created!

To start editing with Visual Studio Code, use the following commands:

     code mine

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.
 これで、ホームディレクトリに以下のものが、できあがります。

mine
|-- .git
|   |-- branches
|   |-- config
|   |-- description
|   |-- HEAD
|   |-- hooks
|   |   |-- applypatch-msg.sample
|   |   |-- commit-msg.sample
|   |   |-- fsmonitor-watchman.sample
|   |   |-- post-update.sample
|   |   |-- pre-applypatch.sample
|   |   |-- pre-commit.sample
|   |   |-- pre-merge-commit.sample
|   |   |-- pre-push.sample
|   |   |-- pre-rebase.sample
|   |   |-- pre-receive.sample
|   |   |-- prepare-commit-msg.sample
|   |   |-- push-to-checkout.sample
|   |   `-- update.sample
|   |-- info
|   |   `-- exclude
|   |-- objects
|   |   |-- info
|   |   `-- pack
|   `-- refs
|       |-- heads
|       `-- tags
|-- .gitattributes
|-- .gitignore
|-- .vscode
|   `-- launch.json
|-- .vscodeignore
|-- CHANGELOG.md
|-- package.json
|-- README.md
|-- themes
|   `-- Mine-color-theme.json
`-- vsc-extension-quickstart.md
 これを「mine」ディレクトリごと持ってきて、「Windows」であれば

C:\Users\ユーザ名\.vscode\extensions
 へ置きます。  ここで、色設定は

mine/themes/Mine-color-theme.json
 になっております。

4. エクスポート

 まず、現在の設定状態を出力します。  Ctrl+Shift+P で、コマンド入力状態にして、「generate」と入力すれば、候補に  「Developer: 現在の設定から配色テーマを生成する」というコマンドが表示されますので、それを実行します。
「Visual Studio Code」-「コマンド」

 現在の状態で、「Untitled」という未保存のテーマファイルが作成されます。

「Visual Studio Code」-「配色テーマを生成」

 これを名前をつけて保存するのですが、前項の


C:\Users\ユーザ名\.vscode\extensions\mine/themes/Mine-color-theme.json
 で、上書きし、「Visual Studio Code」を再起動します。

5. 設定

 「Visual Studio Code」再起動後、Ctrl+KCtrl+T でテーマ選択すると
「Visual Studio Code」-「テーマ選択」

 自前で作成したものが、使えるようになっています。
 「setting.json」に書いてあるものがあれば、そちらが優先されますので、「setting.json」内の記述で、カラーテーマと被るものは、コメントアウトするなり、削除するなりします。

 「Mine-color-theme.json」をさわって、色を調整したりすることになりますが、ファイルを編集後、反映するには、「Visual Studio Code」を再読込する必要がありますので、ご注意ください。

ハイスピードプランマイニングベースJETBOYU-NEXT