VSCodeをインストールしたらやること

develop

Mac VSCode Windows フォント

2024/12/28

こんにちは。dai です。

プログラミングで大切なのは、快適な開発環境を整えることです。VSCodeは非常に優れたエディタですが、デフォルトの設定のままでは物足りない部分もあります。この記事では、VSCodeをインストールした後に行っておきたい設定をまとめました。

これらの設定を行うことで、より効率的で快適な開発環境を手に入れることができます。それでは、具体的な設定項目を見ていきましょう。

フォント【Bizin Gothic】

Bizin Gothicは、最近好きなBIZ UD ゴシックと、過去に愛用していたRictyというフォントでも採用されていたInconsolataを組み合わして微調整された、プログラミングなどに最適なフォントです。

Bizin Gothicのようなプログラミングフォントを入れるメリットとして、見間違いを防げる、みたいなこともありますが、何より大事だと思うのが、フォントがキレイだとやる気が出る（汚いとやる気が起きない）ということだと思っています。モチベーション大事。

そんなプログラミングフォントですが、探してみると日本語に対応しているフォントが少ないのが難点です。数少ない日本語に対応したプログラミングフォントの中で、特に満足度・完成度が高いのが「Bizin Gothic」です。

それでは、VSCodeにBizin Gothicを設定する方法を紹介します。

GithubにあるBizin Gothicのリリースページからダウンロードする
- 通常版である BizinGothic_(バージョン番号).zip をダウンロードします
ダウンロードしたzipファイルを解凍し、中にある各ファイルをインストールする
- Windowsの場合、右クリックから「インストール」を選択します
- Macの場合、ダブルクリックでFontBookを開き、「インストール」をクリックします
VSCodeを開き、 Ctrl + , で設定画面を表示してから検索窓に「font famiily」と入力します
Editor: Font Family の先頭に "Bizin Gothic" を追記します
VSCodeを再起動します

特殊文字などバグの原因になりそうな文字をハイライトしてくれる機能ですが、全角記号などもハイライトされてしまうことがあり、ブログなど日本語の文章を入力する際には邪魔なのでごそっとOFFにしてます。

逆にプログラミングにしか使わないって方は安全装置でもあるのでデフォルトのまま使ったほうがいいかもです。

VSCodeを開き、 Ctrl + , で設定画面を表示してから検索窓に「Unicode Highlight」と入する
以下の項目のチェックを外す
- Unicode Highlight: Ambiguous Characters
- Unicode Highlight: Invisible Characters
以下の項目を False にする
- Unicode Highlight: Non Basic ASCII

例えば { } の中が長いときに、「あれ？これはどこの中身だ？」っていうのが分かりやすくなるように、現在のスコープの開始行がスクロールしても上部に張り付くようになる設定ですが、鬱陶しいのでOFFにしてます。

慣れればいいんだろうけど… 上部にパンくずリストもあるし不要かなと思っています。

VSCodeを開き、 Ctrl + , で設定画面を表示してから検索窓に「sticky scroll scope」と入する
Editor › Sticky Scroll のチェックを外す
- Editor › Sticky Scroll の項目が複数あるので、説明文が「Shows the nested current scopes during the scroll at the top of the editor.」の方ね。

Macで慣れちゃった部分があるので、WindowsでもMacに近いキーボードショートカットが使えるように変更しています。これは完全に慣れと好みの問題なので、必要だと思ったら試してみてください。

VSCodeを開き、 Ctrl + Shift + P でコマンドパレットを表示させてから入力欄に「keybord shortcut」と入力します
候補に表示される「Preferences: Open Keybord Shortcuts」を選択します
変更したいショートカットの右側の✏️をクリックして、変更後のキーを押下します
- Type to search in keybindings 欄に入力して絞り込むこともできます

僕が変更した項目は次の通りです：

以上、VSCodeをインストールしたらやっておきたい設定を紹介しました。

フォントの変更やハイライトの調整、キーボードショートカットのカスタマイズなど、やらなくても使える設定ばかりですが、一度設定してしまえば、より快適な開発環境が手に入ります。

各設定はみなさんの好みによって変更できますので、自分に合った使いやすい環境を見つけてください。快適な開発環境は、プログラミングの効率と楽しさを大きく向上させるだけでなく、愛着も湧く！はず！