Making VS Code and Tmux awesome

I’ve recently fallen in love with VS Code. It’s a tumultuous relationship though. Lots of ups and downs, mainly inspired by memories of the sleeker and faster Sublime Text. VS Code’s feature set started growing way too fast for me to ignore it though. Every month there are tweaks and sweets. Ohh… Sublime.

Anyway… one of the features I absolutely love in VS Code is the ability to bring up a terminal in VS Code. However, something I also royally hate about VS Code is that when you switch projects, that terminal gets killed. So, to solve that problem, I started using Tmux. Tmux is a terminal multiplexer that allows you to create different sessions and each session can have several windows or panes in it.

Tmux can be installed simply using:

brew install tmux

Tmux sure has it’s quirks though, and it needs some good configuration if you’re not solely a keyboard user. For instance, by default if you try to scroll with the mouse it will scroll using a cursor line by line. This can be particularly frustrating if you’re used to using your mouse to scroll a regular terminal window (like iTerm), which scrolls much more naturally like any other app.

So I started with this repo to make my Tmux more awesome.

$ git clone https://github.com/samoshkin/tmux-config.git
$ ./tmux-config/install.sh

It backs up your default ~/.tmux.conf and adds lots of cool features. To name a few:

• The session name is displayed at the top always, and it shows a list of tabs you have in that session
• Displays a status bar with CPU, Memory, Load, Date and Time
• It also introduces some great shortcuts for reloading your .tmux.conf, renaming sessions, windows and renaming tabs immediately as they are opened.

See the full list of features here.

I made a few edits myself to tmux.conf.

# Change the prefix to C-x
set -g prefix C-x
unbind-key C-b
bind-key C-x send-prefix
# Change windows
bind -r p previous-window
bind -r n next-window

I needed to make one more addition though. At work, I use several projects simultaneously and each of those projects requires several windows generally. So, I found this Medium post that described how to instruct VS Code to create or attach to a Tmux Session based on the folder name.

Basically, all we need to do is create a shell script and tell VS Code to run that when bringing up the terminal.

I took it a step further. Since I’m using several projects, maybe 10–12… unfortunately, it becomes difficult to look through the list of tabs in Tmux. Since we can now use emoji’s as regular Unicode characters, I came up with the idea of using emojis as part of the Tmux session titles so it’s easier to look through the list of sessions.

This is done by having the shell script look for a .icon in the folder. It it finds the .icon file, it concatenates the content with the folder name to make the name of the Tmux session.

So, for example, let’s say I had an .icon in a directory called secret-project with the following contents:

👨‍💻

My Tmux session title would be “👨‍💻 secret-project”. So let’s create a shell script at /usr/local/bin/code-shell. Here are the contents.

I tried to write a few comments so it’s clear what the script is doing. As described earlier, it simply looks in the current folder for a .icon file and uses that to form the Tmux session name. It does a bit of extra work to check if we’re inside Tmux or not so it can still reliably create the Tmux session.

After creating the file, modify the VS Code setting below to point to the file. Bring up your terminal and enjoy!!!

"terminal.integrated.shell.osx": "/usr/local/bin/code-shell"

Here’s a screenshot of what my terminal looks like:

As you can see in the screenshot above, I’ve got a few sessions with icons beside them. At work I usually have lots more, but you get the picture.

Hope this helps!