loading...
Cover image for Working on multiple windows in VS Code? Simple trick to increase productivity!

Working on multiple windows in VS Code? Simple trick to increase productivity!

iamarek profile image Arkadiusz Chatys Updated on ・2 min read

VS Code — Tips & Tricks (2 Part Series)

1) Working on multiple windows in VS Code? Simple trick to increase productivity! 2) Use snippets in VS Code, to boost your productivity and simplify your work!

If you've ever struggled with working in multiple VS Code windows, there's a really neat solution that can help you distinguish, which window are you currently working on. You've might have seen this solution on some of Wes Bos tutorials (React+Node).

Let's say, you work on both React and Node repository at the same time, and you want to make it easier for your eyes to understand which window is currently active.

With a few lines of code, you can change the color of the Title Bar and attach this setting to the project. You can even push it to a repository, so other developers can use it too (you don't have to do it though).

Let's get to work!

Creating a file with settings

Manual

Create .vscode folder and settings.json file inside of the folder in your repository.

New folder in the repository


Automated

1) Open VS Code with the project that you want to style.
2) Click ⌘ + ⇧ + P, which opens commands list (ctrl+shift+p on Windows).

Click ⌘⇧P, which opens commands list

3) Search for Preferences: Open Workspace Settings. This will open a new Settings tab in your VS Code.

Search for Preferences: Open Workspace Settings

4) In the sidebar choose Workbench > Appearance.

In the sidebar choose Workbench > Appearance

5) Under Color Customizations click Edit in settings.json. This will create a new .vscode folder with settings.json file, inside of the repository.

New folder in the repository

Setting color of your window

Inside of your settings.json file, you have a few different options that you can set.

titleBar.activeBackground - color window Title Bar when the window is active.

titleBar.inactiveBackground - color window Title Bar when another window is active.

titleBar.activeForeground - color text of Title Bar.

Protip: set inactiveBackground to just slightly darker color from activeBackground to identify which window are you currently using.


There's a lot of different options that you can set to customize the whole window: https://code.visualstudio.com/api/references/theme-color

{
  // rest of your settings,
  "workbench.colorCustomizations": {
    "titleBar.activeBackground" : "#f2c216",
    "titleBar.inactiveBackground": "#ac8b12",
    "titleBar.activeForeground":"#000",
  }
} 

Result

Alt Text

Other VS Code Tips & Tricks

VS Code — Tips & Tricks (2 Part Series)

1) Working on multiple windows in VS Code? Simple trick to increase productivity! 2) Use snippets in VS Code, to boost your productivity and simplify your work!

Posted on Aug 13 '19 by:

iamarek profile

Arkadiusz Chatys

@iamarek

Front end dev from Poland based in London, UK.

Discussion

markdown guide
 

There is also a great extension that could serve the same purpose!

 
 

That looks great! Personally, I don't need an extension for this little trick, but it looks really good. Thanks for sharing Andrei!

 

There's also a nice extension that uses similar properties to change the colors >within< a workspace, depending on the directory you're in.
Very useful for monorepos (but it uses regex, so it's flexible):
marketplace.visualstudio.com/items...

 

Note that this color is currently only supported on macOS.

 

It works on Windows just fine; tested it today. Only issue I had say the settings.json file didn't populate any code. I just had to manually type it in and it works right away. Visual studio was created with electron, so I don't see why this wouldn't work on Windows.

 

Fair point. I had no chance to play with those settings on Windows. But thinking about how Windows's windows 😂 are built it might be impossible there. Thanks for that!