VS コードのカスタマイズ

Visual Studio コード、カスタマイズ、コード エディターのテーマ
VS コードのカスタマイズ cover image

## 導入

Visual Studio Code (VS Code) は、テクノロジー業界で最も人気のあるコード エディターの 1 つであり、堅牢な機能と軽量な設計を備えているため、世界中の開発者に選ばれているコード エディターとなっています。その人気の理由の 1 つは、そのカスタマイズ可能な外観にあり、これにより派手で人目を引くコーディング スペースを作成できます。この記事では、コード エディターのテーマ、アイコン テーマ、ツールバーの色の変更など、vs code の外観を好みに合わせてカスタマイズする方法を説明します。

アイコンのテーマ

Visual Studio Code のデフォルトのアイコンは問題ありませんが、視覚的に楽しむことができるのに、なぜそれらに限定する必要があるのでしょうか。アイコン テーマを使用してファイル エクスプローラーの外観を変更すると、見た目の魅力と使いやすさの両方が向上します。

開発者の間で最も人気のある選択肢の 1 つは、マテリアル アイコン テーマ拡張機能です。この拡張機能を使用すると、ファイル エクスプローラーには、Google のマテリアル デザインをモデルにした、カラフルでよく整理されたアイコンのコレクションが表示されます。すべての種類のファイルには、すぐに識別できる独特のアイコンがあり、ワークスペース全体の見栄えが良くなります。

マテリアル アイコン テーマ拡張機能をインストールするには、次の手順に従います。

  1. Visual Studio コードを開きます。

  2. ウィンドウの左側にあるツールバーの「拡張機能」アイコンをクリックして、「拡張機能」ビューに移動します。

3.「マテリアルアイコンテーマ」を検索し、「インストール」をクリックします。

インストール後、左下隅にある歯車アイコンをクリックし、「ファイルアイコンテーマ」を選択してマテリアルアイコンテーマを選択します。

コードエディターのテーマ

ファイル エクスプローラーが適切に表示されたので、コード エディター自体に注目してみましょう。 VS Code のデフォルトの明るいテーマと暗いテーマは素晴らしいですが、もう少しパーソナライズされたスタイリッシュなテーマが必要な場合もあります。

特に暗闇の中でコードを書きたい人にとって、テーマとして適したオプションの 1 つは、Night Owl テーマ拡張機能です。 Night Owl は、コントラストと読みやすさを念頭に置いて作成されており、長時間のコーディング セッション中の目の疲れを軽減するのに役立つ、落ち着いた配色になっています。

Night Owl テーマ拡張機能をインストールするには:

「拡張機能」ビューに移動します。

「Night Owl」を検索し、「インストール」をクリックします。

インストール後、コマンド パレット (Windows/Linux では Ctrl+Shift+P、macOS では Cmd+Shift+P) を開き、「カラー テーマ」を選択し、インストールされているテーマのリストから Night Owl を選択して、テーマとして Night Owl を選択します。コードエディターで。

ツールバーの色

コード エディターの外観と操作感が完璧になったので、ツールバーの色をカスタマイズして最上部に置きましょう。ここで、peacock 拡張機能が登場します。

Peacock 拡張機能を使用すると、コード エディターの横にあるツールバーの色を変更してワークスペースをカスタマイズできます。これは見た目が美しいだけでなく、VS Code の複数のインスタンスを開いている場合、それらを区別するのにも役立ちます。

Peacock 拡張機能をインストールするには:

  1. [拡張機能] ビューに移動します。

  2. 「Peacock」を検索し、「インストール」をクリックします。

インストール後、コマンド パレットを開いて「Peacock: Enter a color」を検索し、vs code ツールバーに設定したい色の 16 進値を入力することで、ツールバーの色をカスタマイズできます。

## 結論

Visual Studio コードのカスタマイズは、単に色を変更するだけではありません。また、自分のスタイルに合った、生産性を向上させるコーディング環境を作成する必要もあります。したがって、自由に遊んで、外観の点で想像力を刺激するコーディング領域を作成したり、驚くべき VS Code の他の派手な機能を探索したりしてください。コーディングを楽しんでください!


Career Services background pattern

キャリアサービス

Contact Section background image

連絡を取り合いましょう

Code Labs Academy © 2024 無断転載を禁じます.