Tmux and VSCode - Persist Terminals for Productivity and Profit

Originally published at techspresso.dev

Tired of reopening terminal windows every time you come back to a VSCode project? You can pick up right where you left off without having to re-run setup commands and reopen programs by using Tmux sessions. Read on to find out how.

We'll cover:

• What is Tmux
• Step-by-step setup for using Tmux in VSCode

Introducing Tmux

Tmux (Terminal Multiplexer) is basically a window manager for your terminal. It has two main functionalities:

• Splitting the terminal into multiple windows and panes.
• Storing your terminal sessions in a server process, allowing you to reattach to the session even after closing your terminal instance.

Tmux is super powerful and has many use cases. For example, you can protecting your remote ssh terminal sessions from being nuked when dealing with a flaky connection.

If you're not already familiar with this tool, I recommend Ham Vocke's "Quick and Easy Guide to tmux" to get started.

Instructions for setting up Tmux in VSCode

To start persisting your terminal sessions using Tmux in VSCode:

Step 1: Make sure you have Tmux installed

• If you're using macOS, you can use Homebrew by running the following command in your terminal:

  brew install tmux

• For Ubuntu or WSL users, you can install it by executing:

  sudo apt-get install tmux

• If you're using any other linux distro I'm sure you probably already know what you're doing

Step 2: Add a new terminal profile

1. Open VSCode settings with Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
2. Search for Open User Settings (JSON). This will open the settings.json file.
3. Under terminal.integrated.profiles.osx or terminal.integrated.profiles.linux, add:

"terminal.integrated.profiles.osx": {
  //...existing profiles...
  "tmux-shell": {
    "path": "tmux",
    "args": ["new-session", "-A", "-s", "vscode:${workspaceFolder}"]
  }
}

This runs tmux new-session on terminal startup, connecting to existing sessions named after the workspace folder. This way, if you've already created a terminal for this project, you'll connect back to it automatically!

Step 3: Set Tmux as the Default Terminal Profile

Finally, to make the newly created Tmux profile the default for your system, add or modify the following line in the settings.json file:

"terminal.integrated.defaultProfile.osx": "tmux-shell"

Now, every time you open VSCode terminal, Tmux will startup automatically, allowing you to pick up exactly where you left off last time.

Conclusion

We've gone over how to integrate Tmux into VSCode's integrated terminal. You can now use Tmux's powerful session and window management easily inside VSCode!

Comments

[Ashish Khare😎]

First person I see using astropaper for portfolio. I was doubtful if OG images were working but here we are.

[Dmytro Naboka]

"new-session", "-A" seems to be partially working, after I close/open a project terminal session is attached to both an existing one and a newly created one (with default name )

[Munaf Sheikh]

Good article.
Did you encounter a copy-paste issue when running tmux in vscode?

[Jens Daseking]

One issue in tmux: the code command is not working

"Command is only available in WSL or inside a Visual Studio Code terminal."

[Dmytro Naboka]

thanks, wondering if you know whether it's possible to disable scrolling by default, it'd like to scroll terminal window instead of command history

tmux hotkey: Ctrl+B [