WebDesigner's Memorandumウェブデザイナーの備忘録

Visual Studio Codeでウインドウタイトルバーをカスタマイズする方法

Visual Studio Codeでウインドウタイトルバーをカスタマイズする方法

Visual Studio Codeでファイルを開くと、デフォルトではファイル名がウインドウタイトルバーに表示されます。

「sample.html」ファイルを開くと、ウインドウタイトルには「sample.html」と表示されます。

ウインドウタイトルの表示

ただ、タブにもファイル名は表示されているのでウインドウタイトルにはパスを表示させたりして、もう少し情報を表示させた方が便利です。
今回はそのカスタマイズ方法をまとめておきます。

ウインドウタイトルのカスタマイズ方法

ウインドウタイトルをカスタマイズするには、メニューバーの[Code]→[基本設定]→[設定(command + ,)]を選択して設定画面を開きます。

検索バーに「title」と入力すると「Window: Title」の設定が表示されます。
ここでウインドウタイトルに表示する内容を設定します。

「Window: Title」

ちなみにデフォルトの設定は下記の通りです。

${activeEditorShort}${separator}${rootName}

これだと「ファイル名 — 開いているフォルダ名」のような表示になります。

ウインドウタイトルにパスを表示する

「${activeEditorShort}」から「${activeEditorMedium}」に変更すると、パスが表示されます。

${dirty} ${activeEditorMedium}${separator}${rootName}

ついでに「${dirty}」も追加しています。
これは編集中の状態に「●」が表示されるようになります。

ウインドウタイトルにパスを表示した状態

タブにも表示されるのであってもなくてもどちらでもいいのですが、とりあえず表示させました。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね