[VS Code] VS Codeのターミナルが便利になったのでカスタマイズ方法を紹介する

2021年7月12日2021年7月14日

VS Code の バージョン: 1.58.0 のアップデートにより、エディタ領域に統合ターミナルを設置できるようになった。

コマンドパレットを起動（Win/Linux: Ctrl + Shift + p, Mac: command + shift + p）して、「Create Terminal in Editor Area」を選択すると、ターミナルが起動する。

また、ターミナルを分割もできる。

• 右に分割

Win/Linux: Ctrl + ¥ か VS Code のエディタの分割マーク
Mac: option + command + 2

• 縦に分割

Win/Linux: Alt を押しながら分割マーク
Mac: option を押しながら分割マーク

これにより VS Code をターミナル用途に使う人が増えそうなので、ターミナルのカスタマイズをまとめる。

フォントと文字サイズの変更

フォントについては好みがあるが、プログラミング用等幅フォントの「Cica」がおすすめ。日本語もきれい。

https://github.com/miiton/Cica

設定を開き（Win/Linux: Ctrl + , Mac: Command + ,）、「terminal font family」で検索して、
「Terminal › Integrated: Font Family」の項目にフォント名を指定する。

フォントを変更後、ターミナルを開きながら設定で「terminal font size」と検索し、良いフォントサイズになるように調整する。

文字カラー

文字カラーは settings.py に以下のように記載する。（, 等の記述を忘れずに。）。以下の設定は好みのdracula を参考にした。

"workbench.colorCustomizations": {
    "terminal.background": "#282A36",
    "terminal.foreground": "#F8F8F2",
    "terminal.ansiBlack": "#21222C",
    "terminal.ansiBrightBlack": "#6272A4",
    "terminal.ansiBlue": "#BD93F9",
    "terminal.ansiBrightBlue": "#D6ACFF",
    "terminal.ansiCyan": "#8BE9FD",
    "terminal.ansiBrightCyan": "#A4FFFF",
    "terminal.ansiGreen": "#50FA7B",
    "terminal.ansiBrightGreen": "#69FF94",
    "terminal.ansiMagenta": "#FF79C6",
    "terminal.ansiBrightMagenta": "#FF92DF",
    "terminal.ansiRed": "#FF5555",
    "terminal.ansiBrightRed": "#FF6E6E",
    "terminal.ansiWhite": "#F8F8F2",
    "terminal.ansiBrightWhite": "#FFFFFF",
    "terminal.ansiYellow": "#F1FA8C",
    "terminal.ansiBrightYellow": "#FFFFA5",
}

あとは

上記の設定でこのようになる。

あとは各シェルの設定ファイルの設定が反映される。僕の場合は以下のようにしている。

ぼくのかんがえたさいきょうのたーみなるかんきょう

最強のFish Shell環境 – Fisher + ghq + peco で最強のgit環境

Microsoft 製品に依存するのは好きではないけど、VS Codeは便利だ。

おまけ