Custom VS Code Title Bar, for Front-End and Back-End Projects (macOS Guide)
This guide will give you some basic exposure to Bash scripting. If you want to have more of a deep dive then you can check out a cheat sheet or tutorial which is beyond the scope of this guide https://devhints.io/bash
Two great VS Code extensions for changing your workspace are Peacock(my preference) and ColorTabs.
Creating Bash scripts gives you a manual way to do this and you will also learn how to create Bash scripts. This guide is for macOS however, you should be able to adapt it to any operating system. Just do your research (google), and use the appropriate commands and files for your operating system.
The VS Code theme I have installed is, Night Owl — Sarah Drasner.
You can probably use any theme you want just be aware that you will be changing the title bar color. This is completely optional however, i believe its both visually appealing and it makes it easier for anyone, to distinguish between a front-end and back-end project.
So for example you can have two VS Code windows open, one for front-end and the other for back-end. Great for when you are working on full-stack applications, or even just one of the two. And you will know which one is which, by just looking at the title bar.
You can get his theme Cobalt2 Theme Official, for VS Code here https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2
And you can get Sarah Drasner Night Owl here https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
First make sure that your Visual Studio Code editor, is set up for custom title bars.
Code > Preferences > Settings
In the search box type “title”.
- Uncheck the box for Window: Native Tabs
- Set Window Titlebar Style to: Custom (You might need to restart the code editor to get it working)
- Click on the hamburger menu and select Open settings.json. Go to the Workspace Settings tab.
- Create a bin directory
The first thing that you need to do is, create a bin directory. Because bin, is the normal naming convention for executable programs, which are held in a subdirectory.
Also make sure that you are in the main directory for users. It is always the default directory that the Terminal App will open in. Using the code pwd will give you the current location too. Replace YOURNAME with your actual username for your computer home directory.
Create a bin folder, in that directory.
cd ~ # this takes us to /Users/YOURNAME
mkdir bin # this creates /Users/YOURNAME/bin
2. Export your bin directory to the PATH
If you don’t see hidden files and directories, or those that begin with a full stop/dot. Press Command + SHIFT + . on your keyboard.
Make sure that you are in /Users/YOURNAME/ and open the .bash_profile file, in your code editor. Create .bash_profile if it does not exist. Add the code below and save the file.
If you have Oh My Zsh installed, open .zshrc, which will be located at /Users/YOURNAME/.zshrc, and add this line to the file.
3. Create a script file and make it an executable
Navigate to the bin folder located in /Users/YOURNAME
Create a file called dev-back-end (with no extension) in this folder.
Open the file in your text editor of choice and add the following.
bash scripts need to start with #!/bin/bash so that the OS knows that it must use bash and not a different shell. It is a term referred to as “shebang”. Using the command which bash will show you where it’s located.
The file needs to be an executable to work so, change its file permissions using the code below in the terminal.
chmod u+x dev-back-end
Add the code below to the file dev-back-end
cat <<END >settings.json
Duplicate dev-back-end and rename the copied file to dev-front-end. Add the code below.
cat <<END >settings.json
Your folder tree should look like below.
4. Working on Visual Studio Code Projects
Now when you are starting a project, the first thing you should do is, cd into that folder and run the front end or back end command from your terminal app. This should create a .vscode/settings.json folder and file structure, that will have your custom workspace settings.
You can easily customise the colour scheme to match your theme or brand, by changing the json settings in the bash files. You can get these from workspace settings in VS Code. Obviously add your own custom settings to the file as well.
The name that you give the file will be the name that you must run in your terminal app, it can be anything you want.
Back-end Developer Project
Front-end Developer Project
VS Code Workspace Settings