【2019年版】僕がおすすめするVisual Studio Codeの設定

Tips

こんにちは、うりょ(@uryonet)です。

エンジニアの僕が好んで使用するエディタソフト「Visual Studio Code」のおすすめ設定を紹介します。
このソフトはプラグイン次第でいくらでも自由にカスタマイズできるので、自分の好みの仕様にできます。
一例として紹介するので参考にしていただければと思います。

なお、僕も試行錯誤しながら環境を構築していっているので、逐一この記事は更新していきます。

フォントの設定

プログラマとしておすすめのフォントはMyricaです。h

このフォントはもともとプログラミング用として開発されており、人気のAscii文字フォントと日本語フォントを掛け合わせた上でさらに一部調整されているフォントなので、とても見やすいです。

ちなみに僕はMyricaフォントの中でも全角フォントがMgen+ベースになっているMyricaMを愛用しています。

フォントのダウンロードはこちらから。

https://myrica.estable.jp/

Visual Studio Codeでこちらのフォントを設定するには以下の手順で実施します。

  1. ⌘(Command)+ ,(カンマ)を押してSettings画面を表示させます。
  2. Search Settings欄に「font」と入力します。
  3. Editor: Font Familyで入力欄に一番最初に「’MyricaM M’, 」と入力します。

ちなみに、フォントサイズは大体の場合「16px」あたりがおすすめで一番見やすいです。(環境と好みによりますが、、、)
フォントサイズを変更する場合は、上記Settings画面のEditor: Font Sizeで設定します。

テーマの設定

テーマを設定すると、エディタの各カラーが変更されます。
デフォルトでもそれなりに見やすいですが、僕がおすすめする愛用しているテーマはDraculaです。

このDraculaテーマは様々なエディタやサービス用のものが公開されており、パッと見、派手な色合いに見えますが、抑えるべき箇所は優しい配色になっていて、メリハリがありとても見やすいです。

このDraculaテーマをVisual Studio Codeで使用する際の手順は下記になります。

  1. Shift + ⌘(Command)+ XキーでExtensionsサイドバーに切り替え
  2. Search Extensions in Markeplace入力欄に「Dracula」と入力
  3. Dracula Officialを選択して、「install」をクリック
  4. インストール完了後、VSCodeを再起動
  5. もう一度、Extensionsウィンドウから「Dracula Official」を選択
  6. 「Set Color Themes」をクリック
  7. 表示されたウィンフォウから「Dracula」を選択 ※好みで「Dracula Soft」も選択可

ファイルを開いた際にタブが上書きされる問題を回避

ファイルツリーからファイルを開いた際、新しいタブが開かれずに既存のタブが上書きされて開かれる場合があります。
これは既存のタブがPreviewModeで開かれている場合に発生します。

そのためこの問題を回避するには、PreviewModeを無効にする必要があります。
その手順は下記の通りです。

  1. ⌘(Command)+ ,(カンマ)を押してSettings画面を表示させます。
  2. Search Settings欄に「preview」と入力します。
  3. Workbench > Editor: Enable Previewのチェックボックスをオフにします。