One Tip a Week: Change VS Code's Title Bar

This week’s tip of the week is a fun one. If you’re a fan of VS Code, you’ll like this one. Not only that, this tip applies to VS Code, GitHub Codespaces, basically anywhere your VS Code settings get synched but also editors that use the core of VS Code, like Cursor.

Did you know you can change your window title’s appearance? Well the text at least, but that means emojis, whatever you want. Here’s my current window title.

So how to you tweak this setting? If you change your settings in JSON, you’ll need to add this property/value key pair in your settings.json, e.g.

"window.title": "🦙🐹⚡ – ${activeEditorShort}${separator}${rootName} – ⚡🐹🦙",

You can also edit it from the user settings UI. Just search for title.

This is straight from the settings for the window title, but here are all the template parameters you can use.

• ${activeEditorShort}: the file name (e.g. myFile.txt).

• ${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).

• ${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).

• ${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).

• ${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).

• ${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).

• ${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).

• ${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).

• ${rootName}: name of the workspace with optional remote name and workspace indicator if applicable (e.g. myFolder, myRemoteFolder [SSH] or myWorkspace (Workspace)).

• ${rootNameShort}: shortened name of the workspace without suffixes (e.g. myFolder, myRemoteFolder or myWorkspace).

• ${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).

• ${profileName}: name of the profile in which the workspace is opened (e.g. Data Science (Profile)). Ignored if default profile is used.

• ${appName}: e.g. VS Code.

• ${remoteName}: e.g. SSH

• ${dirty}: an indicator for when the active editor has unsaved changes.

• ${focusedView}: the name of the view that is currently focused.

• ${activeRepositoryName}: the name of the active repository (e.g. vscode).

• ${activeRepositoryBranchName}: the name of the active branch in the active repository (e.g. main).

• ${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.

Now I use it for just having some fun tweaking my editor, but you can also configure this in workspace settings if you want different projects to have a different window title look as well. I leave that up to you.

That’s it! Short and sweet. Until the next one!