本記事では、VS Code(Visual Studio Code)をインストールした後の設定について解説しています。
本記事の設定は、筆者の設定を例にしています。エディタの設定は人それぞれで好みがあるので、これが絶対ということではなく、ひとつの例としてご参考いただけますと幸いです。
なお、VS Codeは公式サイトからダウンロードが可能です。
注意事項
以下の内容は、本記事執筆時点でのVS Codeのバージョンv1.99.2で解説しています。
VS CodeのUIを日本語化する
VS Codeは基本的にメニューなどUIがすべて英語です。言語による機能に違いはないのでこのままでも問題ないですが、パッと見てわかりづらいので、以下の拡張機能をインストールしてUIを日本語化します。
拡張機能のインストール後いったんVS Codeを再起動させると、UIが日本語対応のものに切り替わります（設定の説明文など、一部英語のままのものもあります）
VS Codeの設定例
VS Codeの左サイドバー下部の歯車アイコンをクリック（画像参照）またはメニューバーから「設定」をクリックし、VS Codeの設定画面を開きます。
設定には2種類のタブが存在し、それぞれ以下の違いがあります。
- ユーザー：VS Code全体で適用される（サインインしているアカウントがあれば、アカウントのVS Code単位）
- ワークスペース：現在開いているファイルやフォルダ（ワークスペース）でのみ適用される
ここではVS Codeでの作業時に常に適用させたいものを設定するので、「ユーザー」タブを選択します。
補足
VS Codeのアカウントは必須ではありません（筆者はサインインせず利用しています）
サインインしていれば、異なるデバイス間で設定を同期できたり、バックアップが可能になります。VS Codeのアカウントサインインでは、MicrosoftまたはGitHubのアカウントを利用（連携）します。
以下、とくに設定確認しておくとよいと思うものを抜粋して解説します。
設定変更のプルダウンメニューの説明など、先述の拡張機能をインストールしていればおおむね日本語化されています。
VS Codeの設定はファイルなので、保存することで設定を適用します。設定ファイルを変更・保存後は、いったんVS Codeを再起動して設定を適用させます。
よく使用するもの
Files: Auto Save
ファイルの自動保存に関する設定です。初期値はoffなので、必要に応じて変更します。
Editor: Font Size
エディタのフォントサイズを変更できます。あまり小さいと目に悪いので、そこそこの大きさにすることをおすすめします。
「テキストエディター」フォントにあるものと設定は同じです。
Editor: Font Family
エディタに使用するフォントを変更できます。使用するフォントはPC上にインストールされているものを指定します。
「テキストエディター」フォントにあるものと設定は同じです。
本記事後半で解説しているので、ご参考ください。
Editor: Tab Size
エディタで挿入されるインデント（半角スペース）の数を調整します。一般的に、2あるいは4で指定されることが多いです。
Editor: Word Wrap
エディタの行の折り返しを指定します。初期値はoffなので、長い文章は改行されるまでそのままで、エディタ画面に横スクロールバーが表示されます。見づらいので、エディタの幅で折り返されるonにすることをおすすめします。
アプリケーション：テレメトリ
VS Codeがなんらかのの不具合でクラッシュした際など、自動で送信されるレポートの設定をします。送らないようにすることも可能です。
拡張機能：HTML
HTML: Auto Closing Tags
チェクを入れておくと、HTMLタグを書いたときに自動で閉じタグを追加してくれます。閉じタグの書き漏れを防ぐことができるので、チェックを入れておくことをおすすめします。
HTML: Auto Create Quotes
チェックを入れておくと、HTMLタグを記述する際、class=などと入れたで、自動的に""が導入されます（カーソルポインタは""の中に移動）
エディタで利用するフォントを変更する
VS Codeのフォントの初期設定値はConsolas, 'Courier New', monospaceになっています。日本語を表示する際は、monospace（等幅フォント）の部分が割り当てられ、PCにインストールされている等幅フォントが適用されます。
先述のとおり、VS Codeでは設定でフォントも好みのものに変更可能です。設定のEditor: Font Familyで、使用するフォントを初期値のConsolas, 'Courier New', monospaceから変更します。複数指定する場合は,（カンマ）区切り（左のものほど優先される）、フォント名に半角スペースが入る場合は、フォント名をシングルクオーテーションやダブルクオーテーションで囲みます。
なお、指定するフォントはVS Codeを利用しているPC上にインストールされている必要があります。また、指定するのはフォントのファイル名ではなくフォント名です。
補足
インターネット上では可読性を考慮したプログラミング用フォントが多数配布されており、とくに日本語の可読性を考慮したものも多数配布されています。「プログラミング 日本語フォント」で検索するとこれらのフォントを紹介しているサイトなどいろいろ出てくるので、ご参考ください。
余談ですが、筆者は「白源（HackGen）」というフォントを利用しています（このフォントの作者の方は他にもフォントを制作、配布しておられます）
VS Codeのテーマ（外観・スキン）を変更する
こちらの記事でも触れたので内容が重複しますが、VS Codeではデフォルトで利用できるテーマ（外観・スキン）以外にもいくつかテーマが用意されており、また個人など有志の方々がたくさんのテーマを作成・配布されています。
下記サイトではVS Codeで利用できるテーマが常時多数公開されているので、自分好みのテーマを探してみるのもよいかと思います。
本記事の解説は以上です。