自分の好みに合わせて開発環境をカスタマイズ
VSCode(Visual Studio Code)で、自作のテーマを作成することで、色や文字の見え方を自分好みにカスタマイズでき、作業がしやすくなります。
本記事では、VSCodeで自作テーマを作る方法について作成からテスト、公開まで詳しく解説します。
VSCodeの自作テーマ作成方法
STEP1：Node.jsのインストール
「Node.js」は、VSCodeのテーマを作る時に使うツールを動かすために必要なプログラムです。以下の手順でインストールしましょう。
STEP1-1：Node.jsをダウンロード
Node.jsの公式サイトにアクセスし、「Download Node.js(LTS)」をクリックしてインストーラーをダウンロードします。
STEP1-2：Node.jsをインストール
ダウンロードしたインストーラーを実行し、指示に従ってインストールを完了させます。
Windows
ダウンロードしたファイルをクリックして、インストールを開始します。インストールが開始されたら、「Next」をクリックします。
ライセンス契約書のページが表示されるので、「I accept the terms in the License Agreement」を選択し、「Next」をクリックします。
インストール先のフォルダを指定します（デフォルトの場所で問題ありません）。そのまま「Next」をクリックします。
必要なコンポーネントを確認し、「Next」をクリックします。デフォルトままで問題ありません。
「Tools for Native Modules」オプションが表示されるので、そのまま「Next」をクリックして進みます。
「Install」をクリックしてインストールを実行します。
「Finish」をクリックしてインストールは完了です。
STEP2：YeomanとVSCodeテーマジェネレータのインストール
STEP2-1：コマンドプロンプトまたはターミナルを開く
Windowsでは「スタートメニュー」から「コマンドプロンプト」、Macなら「Launchpad」から「ターミナル」を開きます。
STEP2-2：YeomanとVSCodeテーマジェネレータをインストール
開いたコマンドプロンプトまたはターミナルに以下のコマンドを入力し、実行します。
npm install -g yo generator-codeSTEP3：テーマプロジェクトの作成
STEP3-1：コマンドプロンプトまたはターミナルを開く
- Windowsの場合: スタートメニューから「コマンドプロンプト」を検索して開きます。
- Macの場合: 「Launchpad」を開き、「ターミナル」を検索してアプリケーションを開きます。
STEP3-2：新しいフォルダを作成して移動する
新しいフォルダを作成
デスクトップなど、分かりやすい場所に新しいフォルダを作ります。例えば、「MyVSCodeTheme」という名前でフォルダを作成する場合は、以下のコマンドを入力します。
# Windows
mkdir C:\Users\ユーザー名\Desktop\MyVSCodeTheme
# Mac
mkdir /Users/ユーザー名/Desktop/MyVSCodeTheme※「ユーザー名」は自分のPCのユーザー名に置き換えてください。(例：user)
実行すると、デスクトップ上に新しいフォルダが作成されます。
移動したいディレクトリへのコマンドを入力
次に、新しく作成したフォルダに移動します。
# Windows
cd C:\Users\ユーザー名\Desktop\MyVSCodeTheme
# Mac
Mac: cd /Users/ユーザー名/Desktop/MyVSCodeTheme※「ユーザー名」は自分のPCのユーザー名に置き換えてください。
STEP3-3：テーマジェネレータの実行
フォルダに移動した後、以下のコマンドを入力して、Yeomanジェネレータを起動します。
yo codeSTEP4：自作テーマの名前や詳細を入力
対話式のプロンプトが表示されるので、以下の手順でテーマの名前や詳細を入力していきます。
STEP4-1：「New Color Theme」を選択
矢印キーを使用して「New Color Theme」を選択します。
STEP4-2：「NO, start fresh」を選択
次の質問では、既に存在するTextMate (.tmTheme) ファイルからカラーテーマをインポートするか、新しいテーマをゼロから作成するかを選択します。
今回は完全オリジナルのテーマを作成するので「NO, start fresh」を選択します。
STEP4-3：自作テーマの名前を入力
今回は、私の地元宮古島の星空をイメージしたテーマを作成したいので、「Miyako Island Starry Sky」と入力しました。
STEP4-4：自作テーマの識別子を入力
自動生成されるものをそのまま使用しても問題ありません。
STEP4-5：自作テーマの説明を入力
テーマのデザインの特徴や使用する色、イメージなどを入力します。
STEP4-6：自作テーマの表示名を入力
作成しているテーマを他のユーザーにどのような名前で表示するか決めます。テーマの特徴や雰囲気などでOKです。
STEP4-7：自作テーマのベースカラーを選択
次の質問では、作成しているテーマのベースとなる色を選択します。今回のイメージは星空なので「Dark」を選択しました。
STEP4-8：Gitリポジトリを初期化
Gitリポジトリを初期化すると、ファイルの変更履歴を管理し、過去のバージョンに簡単に戻ることができます。これはプロジェクトの変更点を追跡し、後で見返すのに役立ちます。
今回は、テストのためGitリポジトリを初期化しないように設定しますが、正式に公開するテーマを作成する場合は「Y」を選びましょう。
STEP4-9：VSCodeを開く
「Open with code」を選択してVSCodeを開きます。
STEP5：テーマのカラーをカスタマイズ
テーマファイルの編集
Yeomanジェネレータによって作成されたプロジェクトフォルダ内の「themes」フォルダに移動し、テーマファイル（例えば starry-sky-color-theme.json）を開きます。
開いたテーマファイルの「colors」セクションで色を指定します。
| editor.background | 背景色 |
|---|---|
| editor.foreground | テキストの色 |
| activityBarBadge.background | アクティビティバーのバッジの背景色 |
| sideBarTitle.foreground | サイドバーのタイトルの色 |
星空というイメージで作成するので、画像のように変更しました。
STEP6：テーマのローカルテスト
テーマを実際に使ってみて、意図した通りに表示されるかを確認するために、ローカル環境でテストを行います。
STEP6-1：テーマファイルのコピー
自作テーマのフォルダーを右クリックでコピーします。
STEP6-2：「extensions」フォルダーにペースト
「.vscoe」→「extensions」フォルダにペーストします。
STEP6-3：VSCodeの再起動
ファイルのコピーが完了したら、Visual Studio Codeを完全に閉じてから再度開きます。新しいテーマが読み込まれ、適用準備が整います。
STEP6-4：「配色テーマ」をクリック
メイン画面左下にある「歯車」アイコンから、「テーマ」を選択し、「配色テーマ」をクリックします。
STEP6-5：追加した自作テーマを選択
表示されたテーマ一覧から追加した自作テーマを選択します。
テーマが選択されると、エディタの外観が即座に変更され、新しいテーマでコーディング環境が表示されます。
STEP7：VSCEで自作テーマをパッケージ化
Visual Studio Codeの拡張機能を管理するコマンドラインツールであるvsceをインストールします。
コマンドプロンプトまたはターミナルを開き以下のコマンドを入力します。
npm install -g @vscode/vsce次にテーマが格納されているディレクトリに移動します。
私の場合は、デスクトップの「MyVSCodeTheme」フォルダに自作テーマを作成しているので、コマンドプロンプト/ターミナルに以下のように入力します。
cd Desktop\MyVSCodeTheme\miyakoisland-starry-sky以下のコマンドを実行してテーマをパッケージ化します。
vsce packageパッケージ化が完了すると、テーマのフォルダ内に「VSIX」ファイルが生成されます。
「vsce package」を実行するとWARNINGメッセージが表示されることがあります。以下で対処法を解説しています。
STEP8：自作テーマを公開
STEP8-1：Visual Studio Code Marketplaceにログイン
Visual Studio Code Marketplaceのウェブサイトにアクセスし、右上の「Sign in」ボタンからMicrosoftアカウントでログインします。アカウントがない場合は新規作成が必要です。
STEP8-2：パブリッシャープロファイルを作成
初めてテーマを公開する場合は、ログイン後に画面右上の「Publish extensions」をクリックし、パブリッシャープロファイルを作成します。
パブリッシャープロファイルは、Visual Studio Code Marketplaceで拡張機能やテーマを公開する際に必要となる、開発者や組織の識別情報を登録するためのプロファイルです。
Nameを入力するとIDが自動作成されます。
STEP8-3：package.jsonファイルにpublisher フィールドを追加
VSCodeでテーマのpackage.jsonファイルを開きます。publisher フィールドを追加し、パブリッシャープロファイルで自動作成されたIDを記載します。
保存した後に、再度vsce packageコマンドを使用してVSIXファイルを生成します。
STEP8-4：VSIXファイルのアップロード
「＋ New Extension」をクリックし、「Visual Studio Code」を選択後、事前に vsce package コマンドで作成したVSIXファイルをアップロードします。
STEP8-5: 公開の確認
アップロードが完了すると自作テーマがVisual Studio Marketplacで公開されます。
名前の横の3点マークから非公開や削除、アップデートなど行えます。
WARNINGメッセージの対処法
「A ‘repository’ field is missing…」メッセージ
このメッセージは、package.json ファイルにリポジトリの情報（ソースコードを管理している場所）がない場合に表示されます。
「y」を選択すると、リポジトリ情報なしでテーマをパッケージ化して進めます。
テストや非公開の場合は問題ありませんが、公開する場合はリポジトリ情報を追加することが推奨されています。
リポジトリ情報の追加手順
STEP1：GitHubでリポジトリを作成
- GitHub.comにログインします（アカウントがない場合は新規作成が必要です）。
- プロフィールアイコンの隣にある「＋」ボタンをクリックし、「New repository」を選択します。
- リポジトリ名やディスクリプションなどを設定し「Create repository」ボタンをクリックします。
STEP2：リポジトリ設定
| Repository name | リポジトリ名を入力（例：miyakoisland-starry-sky-theme） |
|---|---|
| Description | テーマの概要を簡潔に記述 |
| Public/Private | Public(公開)：誰でもリポジトリを閲覧可能 Private(非公開)：アクセス権のあるユーザーのみ |
| Add a README file | プロジェクトの説明、インストール方法、使用方法を説明するために、リポジトリ作成時に自動的に生成されるドキュメント |
| Add .gitignore | Gitの追跡から特定のファイルやディレクトリを除外するために使用されるファイル(例: Node.jsプロジェクトのnode_modulesフォルダを除外) |
| Choose a license | プロジェクトの使用、共有、変更の法的な条件を定義 |
STEP3：リポジトリのURLをコピーする
ポジトリが作成されたら、リポジトリページのURLをブラウザのアドレスバーからコピーします。URLは通常、https://github.com/ユーザー名/リポジトリ名 の形式です。
STEP4：package.jsonファイルにリポジトリ情報を追加
package.json ファイルを開き、次のように repository セクションをファイルに追加します。
url の部分には、先ほどコピーしたGitHubのリポジトリURLを貼り付けます
STEP5：変更を保存
変更を保存した後、package.jsonファイルを閉じます。
「LICENSE.md, LICENSE.txt …」メッセージ
「LICENSE.md」、「LICENSE.txt」または「LICENSE」という名前のライセンスファイルが見つからないことを示しています。
ライセンスファイルを含めないでパッケージ化を進めることは可能ですが、一般的には推奨されていません。
ライセンスファイルの追加手順
STEP1：ライセンスの選択
どのライセンスを使用するか決めます。オープンソースプロジェクトの場合、一般的な選択肢にはMIT、GPL、Apacheなどがあります。
各ライセンスの特徴を調べ、プロジェクトのニーズに最も合うものを選びます。例えば、MITライセンスは非常に柔軟性が高く、使用が簡単です。
STEP2：ライセンスの作成
テキストエディタ（メモ帳やVSCode）を使用して新しいテキストファイルを作成します。
ライセンスの全文をコピーして、テキストエディタに貼り付けます。
MITライセンスの場合、<copyright holders>の部分を自分や組織の名前に変更します。
STEP3：ライセンスファイルの保存
プロジェクトのルートディレクトリに「LICENSE.txt」という名前で保存します。
ルートディレクトリに「LICENSE.txt」が追加されます。
STEP4：Gitに追加
自作テーマを一般公開する場合は、保存したライセンスファイルをGitに追加し、リモートリポジトリ（GitHubなど）にプッシュする必要があります。
STEP4-1：プロジェクトのフォルダに移動
コマンドプロンプト（Windows）またはターミナル（Mac）を開き、プロジェクトのディレクトリに移動します。
たとえば、デスクトップにある「MyProject」フォルダに移動する場合は、次のように入力します。
cd デスクトップ/MyProjectSTEP4-2：ライセンスファイルをGitに追加
次に、以下のコマンドをライセンスファイルをGitの追跡対象にします。
git add LICENSE.txtSTEP4-3：変更を記録
変更を記録するために、以下のコマンドを入力して実行します。この操作を「コミット」と言い、変更を保存するためのスナップショットを作成します。
git commit -m "Add license file"STEP4-4：変更をリモートリポジトリに送る
コミットした変更をリモートリポジトリ（例えばGitHub上のプロジェクト）に送るために、「プッシュ」という操作を行います。以下のコマンドを入力して実行します。
git push以上の手順で、作成したライセンスファイルがGitに追加され、テーマのライセンス情報を他の人も確認することができます。
自作テーマを作ってコーディングを楽しもう！
今回は、VSCodeでの自作テーマについて作り方から公開まで解説しました。はじめてテーマを作成する場合、公開までにわからないことが多く大変だと思います。それを乗り越えてテーマを作ることで達成感だけでなく、コーディングがより楽しいものに変わります。迷っている方はぜひチャレンジしてみてください。
