概要
Visual Studio Code（VScode）の標準的な初期設定の手順です。
手順
日本語化の設定
初回起動時に画面右下に以下のメッセージが表示された場合は、『インストールして再起動』をクリックする。
表示されない場合は、右下にある小さなベルのマークをクリックすると表示される。
表示言語を日本語に変更するには言語パックをインストールします。
再起動が完了し、表示が日本語になっている事を確認する。
『Japanese Language Pack for Visual Studio Code』を検索して『インストール』をクリックすればOK
自動保存（auto save）の設定
以下の手順で設定を行うことで、編集が勝手に保存される。
- 『Command + , 』で『設定画面』を開き、『auto save』と検索
- 『Files: Auto Save』のドロップダウンから『onFocusChange』を選択
フォントの変更
以下の手順で設定を行うことで、VScodeで使用するフォントが変更される。
左側に入力されたフォントが優先して使用される。
- 『Command + , 』で『設定画面』を開き、『font family』と検索
- 『Editor: Font Family』のテキストボックスの先頭（左側）にフォント名を入力する
おすすめのフォントは『SF Mono Square』です。
SF Mono を使って最高のプログラミング用フォントを作った話
スペースが入るフォント名は『 ‘ 』でかこってください。
フォントサイズの変更
以下の手順で設定を行うことで、VScodeで使用するフォントのサイズが変更される。
- 『Command + , 』で『設定画面』を開き、『font size』と検索
- 『Editor: Font Size』のテキストボックスの中身を任意の値に変更する（16 – 20 あたりがオススメ）
行の高さの変更
以下の手順で設定を行うことで、VScodeで使用する行の高さが変更される。
- 『Command + , 』で『設定画面』を開き、『line height』と検索
- 『Editor: Line Height』のテキストボックスの中身を任意の値に変更する（1.5あたりがオススメ）
ターミナル フォントサイズの変更
- 『Command + , 』で『設定画面』を開き、『terminal font』と検索
- 『Terminal › Integrated: Font Size』のテキストボックスの中身を任意の値に変更する（16 – 20 あたりがオススメ）
カラーテーマを変更
以下の手順で設定を行うことで、VScodeで使用するカラーテーマが変更される。
- 『Command + , 』で『設定画面』を開き、『color theme』と検索
- 『Workbench: Color Theme』から任意のカラーテーマを選択する
拡張機能で好みのカラーテーマを追加することも可能です。
オススメのカスタマイズ設定（見た目）
個人的に以下のようにカスタマイズしています。
| カラーテーマ | Noctis Azureus |
| アイコンテーマ | Catppuccin Icons for VSCode |
カラーテーマの設定
『Command + Shift + x 』で『拡張機能』を開いて『Noctis』と検索する。
『インストール』をクリックすると配色テーマを選択できるので『Azureus』を選択する。
もし配色テーマの選択画面が出ない場合は、『配色テーマを設定』をクリックすると表示される。
アイコンテーマの設定
続けて『Catppuccin Icons for VSCode』と拡張機能を検索して『インストール』をクリックする。
『ファイルアイコンのテーマを設定』からお好みのテーマを選択する。（僕はLatteです）
同期設定（GitHubとの連携）
Setting Sync を使うと、ここまで行った設定を、他のPCと同期できます。
歯車マークをクリックして『設定の同期をオンにする』をクリックする。
画面中央上部にある『サインインしてオンにする』をクリックする。
GitHubアカウントかMicrosoftアカウントかを選択してクリックする。
もしどちらのアカウントもない場合は、どちらか作成してください。
GitHubアカウントはエンジニアにはほぼ必須なので、迷ったらGitHubにしましょう。
選択したサービス（画像はGitHub）の画面に遷移するので、サインインする。
認証画面が表示されるので、自身のアカウントである事を確認する。
間違いなければ『Authorize Visual-Studio-Code』をクリックする。
以下のようなダイアログが出たら『Visual Studio Code を開く』をクリックする。
『拡張機能がこのURIを開くことを許可しますか？』と表示されたら『開く』をクリックする。
以上で同期の設定は完了です。
今後VScodeに行った設定は自動でクラウド上にアップロードされて、PC間で同期ができるようになります。
