VS Code – フォントを変更する方法

開発者は作業環境の重要性を過小評価しがちです。いいえ、椅子、机、壁の色のことを話しているのではありません。私たちは仮想作業環境について話しています。

Visual Studio コード エディターを自宅のように感じることは、作業効率を高めるために不可欠です。このフォントは、VS 全体の雰囲気の大部分を占めています。この記事では、VS Code エディターのさまざまな部分でフォントを編集する方法を説明します。

VS Code でフォントを変更する理由

たとえあなたが VS を長く使っている開発者であっても、VS にフォント変更オプションがあることを知らないかもしれません。

フォントの選択がなぜ重要なのかを気にしない場合は、数段落後のチュートリアルに直接進んでください。ただし、フォントを変更する理由 (以下に概説) が決定に役立つ可能性があることを覚えておいてください。

VS においてフォントがそれほど重要なのはなぜですか?美しさだけでは十分ではない場合 (そして信じてください、コード エディターで何時間も費やした後では、美しさが重要になり始めます)、機能性も重要です。では、フォントが VS に「適している」のはなぜでしょうか?

まず、類似した文字間の区別を目立つようにする必要があります。たとえば、数字の「1」と「l」（小文字の L）を区別すると、コーディングの速度が大幅に向上し、時間を節約できます。

さらに、一部の開発者は合字を使用することを好むという事実もあります。合字は、通常「グリフ」と呼ばれるいくつかの記号を結合したものです。これらはコーディング時に多くの意味を持ちます。

VS Code でフォント ファミリーを変更する方法

さっそく、VS でフォ​​ント ファミリーを変更する方法を説明します。

1. VS エディターを開きます。
   
2. 画面上部に移動し、「ファイル」を選択します。
   
3. 次に、ドロップダウン メニューで、「設定 > 設定」に移動します。
   
4. 画面の右側にメニューのある「一般的に使用される」セクションが表示されます。表示された場合は、このページから「フォント ファミリー」にアクセスして変更するか、以下の手順に進むことができます。
   
5. 「テキスト エディター > フォント」をクリックし、デフォルトのエントリー「Consolas, 'Courier New', monospace」を探します。
   
6. 次に、「Consolas…」の代わりに、好みのフォントの名前を入力します。
   

これにより、フォント ファミリーが自動的に変更されるはずです。

VS Codeでフォントサイズを変更する方法

たとえ視力が完璧であっても、コード行を書くときは目をできるだけ快適に保ちたいと思うでしょう。フォント ファミリを選択する際には、類似した文字間の不一致が重要です。ただし、コーディングに適切なフォント サイズを使用すると、目が見やすくなり、作業の効率が向上します。

コーディングに最適なフォント サイズを特定する魔法の公式はありません。理想的には、文字をできるだけはっきりと見ることができますが、VS ウィンドウに合わせて線も必要になります。したがって、さまざまなフォント サイズを試して、コーディングのニーズに合った最適なフォント サイズを見つけてください。

VS Code でフォント サイズを変更する方法は次のとおりです。

1. 「ファイル -> 環境設定 -> 設定」に移動します。
   
2. 「フォント サイズ」セクションを探して、希望のフォント サイズを入力します。
   

VS Codeでエクスプローラーのフォントを変更する方法

VS Code のエクスプローラー機能は、他のほとんどのアプリの他のファイル ブラウザーと同様に機能します。これは、プロジェクトで作業するファイルやフォルダーを管理、参照、開くために使用されます。 VS コーディングはフォルダーとファイルに基づいているため、VS Code Explorer を使用するとプロジェクトを簡単に開始できます。 VS Code を使用してファイル/フォルダーを開くだけです。それはとても簡単です。

VS Code Explorer をかなり使用していることが予想されます。 Explorer のフォント サイズが合わない場合は、変更できることを知っておいてください。

1. 「ファイル -> 環境設定 -> 設定」に移動します。
   
2. 「フォント サイズ」セクションを見つけて、ニーズに合わせてサイズを変更します。
   

VS Codeでターミナルのフォントスタイルを変更する方法

VS Code では、ウィンドウを切り替えたり、既存のターミナルの状態を変更したりする代わりに、プロジェクト/ワークスペースのルートにある統合ターミナルを使用できます。もちろん、使いやすくするためにフォントを変更することもできます。 VS Code ターミナルのフォントを変更する方法は次のとおりです。

1. プロジェクト/ワークスペースの「ルート フォルダー」に移動します。
2. VS Code を使用して「settings.json」ファイルを開きます。または、VS Code で、Windows の場合は「Ctrl + Shift + P」 、Mac の場合は「Command + Shift + P」を押して、「settings.json」ファイルを見つけます。
   
3. 対応する 3 行を次のように変更します。D2Coding は例である
   “terminal.external.osxExec”: “iTerm.app”,
“terminal.integrated.shell.osx”: “/bin/zsh”,
“terminal.integrated.fontFamily”: “D2Coding”,
   ことに注意してください。他のフォントを選択することもできます。
4. 完了したら設定を保存します。

スタイルを変更した後に VS Terminal のフォント サイズを変更するには、「terminal.integrated.fontSize」:エントリに移動し、好みに合わせて設定します。

VS Code のコメントのフォントを変更する方法

コード コメント エントリは、デフォルトでは、コードの残りの部分と同じフォントで表示されます。これを変更すると目立つようになり、多くの場合、無駄な作業時間を防ぐことができます。 VS 内の他のすべてのコメントと同じフォントが使用されていると、コメントを見落としやすくなります。これは単純に見えるかもしれませんが、この解決策は予想よりも少し複雑です。また、位置合わせの問題が発生する可能性があるため、結果が理想的ではない可能性があります。それでも、試してみるのは悪いことではありません。

1. VS Code のデバイスの「ルート インストール」フォルダーに移動します。
2. ターミナルで「touch style.css」エントリに移動します。これによりスタイルシートが作成されます。
3. 次に、フォント ルールを追加します。スタイルの例を次に示します。
   .mtk3 {

font-family: "iosevka";

font-size: 1em;

font-style: italic;

}
4. 「settings.json」を開き、次のエントリを追加します。
   "vscode_custom_css.imports":
"file:///Users/username/.vscode/style.css"],
5. 次に、「Custom CSS and JS Loader」プラグインをダウンロードします。
6. インストールしたら、「Ctrl + Shift + P」を押してプラグインが有効になっていることを確認します。
7. VS コードを再起動します。
8. コメントには新しいフォントが適用されるはずです。

VS Codeでサイドバーのフォントサイズを変更する方法

VS Code には、ユーザーが端末のフォント サイズを変更できる設定はありません。ただし、回避策は存在します。これには、前述のカスタム CSS および JS Loader プラグインが必要です。

1. プラグインで、拡張機能の詳細に注意深く移動し、チュートリアルのセクションに従います。
2. 次のロジックを使用します。
   "vscode_custom_css.imports": ["[insert custom file URL]"]
3. これをカスタム ファイルごとに実行します。

その結果、より優れた、見た目の美しい VS Code サイドバーが作成されるはずです。

異なるオペレーティング システムを使用してフォントを変更する方法

VS でコーディングしている場合は、Windows コンピューター、Mac、または Linux システムを使用します。これら 3 つは VS に関しては同一ではありませんが、違いは主にCtrl / Cmdキー オプションと VS Code ファイルのデフォルトの場所に集約されます。したがって、VS Code でのフォント変更の原則は、すべてのデバイスでほぼ同じです。

FAQ: Visual Studio フォントの変更

VS Code でフォントを変更できないのはなぜですか?

VS Code では多くの間違いを犯す可能性があります。フォントの変更は、MS Word で行うほど簡単ではありません。実際の VS Code フォントを変更するには多くのコーディングを使用することになるため、よくある見落としについて知っておく必要があります。各エントリを引用符で囲んでください。たとえば、“vscode_custom_css.imports”: [“file:///Users/username/.vscode/style.css”] は、引用符を使用しないと機能しません。さらに、コマンドの間には必ずスペースを使用してください。

VS Code のコードにはどのフォントが使用されますか?

デフォルトでは、VS Code でのコーディングに使用されるフォントは Consolas です。このガイドに従えば、コード自体、ターミナル、コメント、エクスプローラー機能など、VS Code のほとんどのフォントを変更できます。

ただし、VS Code の公式 Web サイトの画像にあるフォントについて話している場合、どれが使用されているかは誰も教えてくれません。 VS Code 開発者がどのフォントが使用されたかを明示的に明らかにしない限り、それを知る方法はありません。

VS Code フォントをハッキングするにはどうすればよいですか?

当初、ハッキングとは変更することを意味していましたが、これが Hack フォントを VS に追加することを意味する場合は、 Hack の Web サイト経由で追加できます。 Hack から TrueType フォントをダウンロードします。ダウンロードしたzipファイルを解凍します。抽出したファイルをインストールします。次に、[ツール]、[オプション]の順に移動します。 [オプション] メニューで、[環境] を選択し、[フォントと色] に移動します。 [フォント] ドロップダウン メニューを開き、[ハック] エントリを選択します。

ハッカーはどのようなフォントを使用しますか?

経験則として、ハッカーを含むすべてのプログラマーは好みのフォントを使用します。 「ハッカーが選んだ」とされる人気フォントの好例は、ローン ダート フォントとしても知られる Ray Bluetens です。

VS Code でのフォント オプションの変更

VS Code でフォント オプションを扱うのは、テキスト エディター プログラムでフォントを変更するほど簡単ではありません。ただし、ここでコーディング ソフトウェアについて話していることを考えると、VS は競合他社に比べてさまざまなオプションを提供しています。この記事の手順に従って、コーディング エクスペリエンスをできるだけパーソナライズされ、ユーザー フレンドリーでスムーズなものにしてください。