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: 現在の設定から配色テーマを生成する」というコマンドが表示されますので、それを実行します。