設定したい(settings.json

VS Codeでは 「ユーザー設定」 「フォルダー設定」 「ワークスペース設定」 のレベルで設定が変更できます。

コマンドパレットでsettings.jsonと検索すると、 次の候補がヒットするので、カスタムしたい項目を選択します。 それぞれのファイル名は以下のように対応しています。

設定レベル

コマンド名

ファイル名

デフォルト設定

Preferences: Open Default Settings

ユーザー設定

Preferences: Open User Settings

{$HOME}/Library/Application Support/Code/User/settings.json

フォルダー設定

Preferences: Open Workspace Settings

フォルダー名/.vscode/settings.json

「ユーザー設定」に記述した個人の設定は、Settings Sync機能により GitHub(もしくはMS)アカウントを介して、異なるパソコン間で同期できます。

ソースコードをリポジトリで管理している場合、 「フォルダー設定」のファイルを追加しておくと、 プロジェクトメンバーで設定を共通化できます。

フォントを変えたい

{
    "editor.fontSize": 20,
    "editor.fontFamily": "Monaspace Krypton, PlemolJP, HackGen, Menlo, Consolas, monospace",
}

フォントを日本語に対応したプログラミングフォントに変更しておくとよいです。 先頭に書いたフォントが優先されます。

上記のサンプルでは、 フォントサイズは少し大きめに設定してあります。

英文フォントにMonaspace Krypton、 和文フォントにPlemolJPを適用しています。 また、フォントが見つからなかった場合に備えて、 HackGenやOSごとのデフォルト等幅フォント(monospace)にフォールバックするようにしてあります。

参考

僕が使っている日本語に対応したプログラミングフォントの例です。 フォントはHomebrewで追加しました。

Monaspaceには5種類のフォントがあります。 Monaspace Kryptonはmechanical sansという形で、ロボットぽくてプログミング用にいいなと思いました。 リガチャ(合字)機能もありますが、有効にしていません。

テーマを変えたい

{
    "workbench.colorTheme": "Iceberg Light",
}

VS Code全体のテーマ(=色使い)は拡張パッケージを使って変更できます。 僕はIceberg Theme(のLight Theme)を使っています。 もともとVim用テーマとして開発されたプラグインですが、VS Codeとターミナルでも使えるようになっています。

編集タブの色を変えたい

{
    "workbench.colorCustomizations": {
        "tab.activeBackground": "#e2a478",
        "tab.activeForeground": "#161821",
        "tab.inactiveBackground": "#c6c8d1",
        "tab.inactiveForeground": "#161821",
    },
}

エディター領域に表示される色を変更できます。 上のサンプルでは、編集中のタブが目立つように背景色を変えています。

対応する括弧(ブラケット)したい

{
    "editor.barcketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
}

コード中の対応する括弧(ブラケット)を強調表示できます。 HTMLファイルを編集したり、JSONファイルを確認したりする場合に便利です。

コード補完したい

"editor.inlayHints.enabled": "offUnlessPressed",

関数のヒント表示の設定です。 デフォルトは"on"ですが、毎回表示されるのも 邪魔だったので"offUnlessPressed"にしました。

新しいウィンドウで開きたい

{
    "window.openFilesInNewWindow": "on",
}

ファイルやディレクトリを開くときのウィンドウの設定を変更できます。