Visual Studioコードをカスタマイズする方法
Microsoftの新しいオープンソースコードエディタであるVisual Studio Codeは、開発者に多くの素晴らしい機能を提供します。 ソースコード編集のプロセスを容易にする. それに加えて、Visual Studio Codeでは、ユーザーが作業をするときに飽きないようにしています。 その外観のいくつかの部分をカスタマイズする, 色、フォント、スペース、テキストの書式設定など、多くの機能と同様に、 リンティング そして 検証ルール.
この記事では、最初に見てみましょう Visual Studioコードワークスペースの外観を変更する方法, それから私は2つの助けを借りてデフォルト設定をカスタマイズする方法を紹介します JSON-フォーマット設定ファイル.
VSコードにカラーテーマを設定する方法
Visual Studio Codeでは、次のことが可能です。 カスタムカラーテーマを設定する あなたの編集者のために.
作成済みのテーマを使用するには、をクリックしてください。 ファイル>設定>カラーテーマ トップメニューバーのメニュー。当たったとき “入る”, コマンドパレットがポップアップ表示され、選択可能なテーマのドロップダウンリストが表示されます。.
を押しても同じ効果が得られます。 F1 コマンドパレットを開き、 設定：カラーテーマ 入力フィールドに入力する.
ドロップダウンリストのオプションをロールオーバーしたとき, ワークスペースの外観がリアルタイムに変わる, ですから、どのテーマが自分のニーズに最も適しているかをすぐに確認できます.
私は選ぶ “ハイコントラスト” 色のテーマ、私の目は最高ではないので。これが私の見解はこんな感じです.
VS Code Marketplaceからテーマをインストールする方法
あなたがVS Codeがデフォルトで提供する色テーマのどれも好きでないならば、あなたはVS Code Marketplaceから他の多くをダウンロードすることができます.
ここでは、マーケットプレイスが現在持っているテーマを見ることができます。マーケットプレイスからテーマをインストールしたい場合は、 F1 コマンドパレットを開くには、VS Codeエディタのすぐ内側に、 extインストール 入力フィールドにコマンドを入力し、最後に 拡張機能：拡張機能をインストールする ポップアップリストからのオプション.
このオプションをクリックすると、Command Paletteの新しいインスタンスがポップアップします。を入力 「extインストールテーマ」 新しい入力フィールドにコマンドを入力すると、 すべてのテーマのリストを入手する VS Code Marketplaceから入手可能なもの.
というテーマを選びます “材料テーマキット”, それをクリックしてインストールしてください。他のデフォルトテーマと同じ場所で、カラーテーマリストに新しいテーマを追加するには、次の手順を実行する必要があります。 VSコードを再起動. 再起動すると、新しいテーマがテーマリストに表示され、コマンドパレットから設定できます。.
新しいMaterialテーマを使うと、私の編集者は次のようになります。
あなたは以前のテーマに戻ることができます（私はまだそのテーマを好むので私がしたように）、あるいはあなたはどれがあなたにとって最も適しているかを見るために他のテーマでもう少し遊んでみることができます.
あなたが望むなら、あなたもすることができます カスタムテーマを作成する, vsce拡張マネージャーツールを使用して、VS Code Marketplaceで公開します。.
ユーザーとワークスペースの設定を変更する
VS Codeでは、カスタムテーマを設定できるだけではありませんが、 他の多くの設定を構成する, フォーマット規則、さまざまな機能の使用方法、クラッシュレポート、HTTP設定、ファイルの関連付け、リンティング規則など.
これを行うには、両方ともJSON形式の2つの設定ファイルを編集します。心配しないでください、あなたはプロである必要はありません、VS Codeがあなたのカスタマイズをすぐに加えるためのかなり簡単で直感的な方法を提供するので.
はじめに、2つの設定ファイルの違いを見てみましょう。 VS Codeには2つの範囲があります（グローバル そして 地元）設定のため、2つの別々のファイル
- グローバル
settings.json, 構成ルールが各ワークスペースに対して有効である - ワークスペース関連
.vscode / settings.json, それは個々のワークスペースに関連しているだけです
の グローバル settings.json ファイルは、お使いのオペレーティングシステムが他のすべてのアプリ関連の設定ファイルをそれぞれ保存するフォルダにあります。
- Windowsの場合
％APPDATA％\ Code \ User \ settings.json - Linuxの場合
$ HOME / .config / Code / User / settings.json - Macの場合：
$ HOME /ライブラリ/アプリケーションサポート/コード/ユーザー/ settings.json
の ワークスペース関連 settings.json ファイルは現在のプロジェクトのフォルダに保存されます。デフォルトでは、このファイルは存在しませんが、カスタムのワークスペース設定を追加するとすぐに、VS Codeが作成します。 .vscode / settings.json 一度にファイルを作成し、そこにカスタムワークスペース固有の設定を配置します。.
だからあなたはいつ使うの？ settings.json ファイル?
VS Codeにカスタム設定ルールを使用させたい場合は すべて あなたのプロジェクトは、グローバルにそれらを入れて settings.json ファイル.
あなたの設定をあなたの中でのみ有効にしたい場合 現行の企画, ワークスペース関連に配置する settings.json ファイル.
ワークスペース設定はグローバル設定を上書きします, ので注意してください.
グローバル設定が呼び出されます “ユーザー設定” VSコードで。をクリックして開きます。 ファイル>設定>ユーザー設定 メニューを使うか、式を入力してください。 “ユーザー設定” コマンドパレットに（F1で開く）.
VS Codeは2つのペインを並べて開きます。左側には設定可能なすべてのオプションが表示され、右側にはグローバル設定が表示されます。 settings.json ファイル。このファイルにカスタム設定ルールを配置する必要があります。.
ご覧のとおり、他には何もする必要はありません。変更する設定を左側から右側にコピーアンドペーストして、変更した値を追加するだけです。.
簡単な例を見てみましょう（ただし、個々のニーズに応じて他の変更を加えることができます）。フォントファミリを変更して、 タブ デフォルトの4スペースから2スペースに変更し、作業ファイルの最大数を9から5に減らし、重複スタイルに関するCSSリンティング規則の1つを 「無視する」 に "警告".
コピーペーストした後、私のグローバル settings.json ファイルは次のようになります。
//デフォルト設定を上書きするには、このファイルに設定を配置します。"editor.fontFamily"： "Courier New"、 "editor.tabSize"：2、 "explorer.workingFiles.maxVisible"：5、 "css.lint.duplicateProperties" ： "警告"
変更を保存した後 settings.json ファイル、私のエディタの外観は一度に変更されます（下のスクリーンショットではフォントファミリの変更のみが表示されています）。
ワークスペース設定も同様に変更できます。今、あなたはクリックする必要があります ファイル>設定>ワークスペース設定 上部のメニューバーで、ワークスペース関連にアクセスする .vscode / settings.json ファイル.
ワークスペース設定には、ユーザー設定とまったく同じ設定オプションがあり、同じコピー＆ペーストテクニックを使用できます。違いは2つだけです。スコープ（グローバルではなくローカル）と settings.json カスタム設定が保存されるファイル.
