Perspective Unspoken

My perspective on Git, Docker, Python, Django, PHP and other stuff

Making Tmux and VS Code 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. I eventually switched to VS Code just because it’s feature set started growing way too fast for me to ignore. Too many new cool features in the core editor for me to ignore.

Anyway… one of the features I absolutely love in VS Code is the ability to bring up a terminal with a quick keystroke. 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 in it. You can attach or detach from a Tmux session and Tmux will keep all your windows and sessions intact until you come back.

Tmux can be installed simply using:

Tmux does have a little bit of a learning curve. For starters, the first thing you need to understand Tmux is the idea of what is called a prefix. The prefix is used to prefix all commands that you will execute in Tmux. I think the default prefix is Control-a (written as C-a). For example, to create a new window in Tmux, the command is

1
prefix a
. So you would use the key combination
1
C-a c
(Control-a then c) in quick succession to create a new tab.

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.

It backs up your default

1
~/.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 handy shortcuts
    • prefix r – rename tab
    • prefix R – rename session
    • prefix c – open a new tab (and give it a name immediately)
    • prefix C-r – reload tmux conf

See the full list of features here.

I made a few edits myself to

1
tmux.conf
.

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.

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.

Now my list of tabs in Tmux have icons beside them!

So, I added icons for the folders. Here’s the full script that VS Code executes to create the terminal:

In the process, I had to upgrade my bash on my Mac. Bash 3.x doesn’t support dictionaries, so I installed a new one and pointed my script to it.

One caveat to bear in mind is that since folder names aren’t unique if you need two different folders with the same name to have different icons, this won’t work for you.

IDEtmuxvscode

jaywhy13 • August 9, 2019


Previous Post

www.000webhost.com