WSL2 + VS Code 環境下的 tmux 完整設定筆記:從踩坑到順暢使用

在 WSL2 + VS Code 環境下設定 tmux 的完整踩坑記錄。包含 Prefix 鍵衝突、Nerd Font 亂碼修復、快捷鍵與 VS Code 衝突解決方案,以及最終的 .tmux.conf 設定詳解。

為什麼需要 tmux?

開發時最常遇到的痛點:

  • 開了一個終端跑 server,又要開一個終端看 log,再開一個寫程式
  • SSH 連到遠端伺服器,斷線了工作就沒了
  • 桌面上一堆終端視窗,切換來切換去很混亂

tmux 就是終端機裡的「視窗管理器」。 在一個終端機裡面,你可以分割畫面、開多個工作區、還能中途離開稍後回來繼續——所有東西都還在。

tmux 的三個核心概念

用辦公室來類比最好理解:

概念 類比 說明
Session(工作階段) 一間辦公室 一個獨立的工作環境,關掉終端機它還在背景跑
Window(視窗) 辦公室裡的一張桌子 一個全螢幕的工作區,底部狀態列可以看到所有桌子
Pane(面板) 桌子上分成好幾個區域 把一個視窗切成上下或左右,同時看多個畫面

一個 Session 可以有很多 Window,一個 Window 可以有很多 Pane。

踩坑記錄

踩坑 1:Catppuccin 主題狀態列顯示亂碼

裝好 tmux 和 Catppuccin Mocha 主題後,底部狀態列出現一堆方塊和亂碼。

原因: Catppuccin 主題使用了 Nerd Font 的特殊圖示字元,終端機預設字型不支援。

解決方案:安裝 JetBrainsMono Nerd Font

  1. 下載 JetBrainsMono Nerd Font
  2. 解壓後全選 .ttf 檔案,右鍵「為所有使用者安裝」
  3. Windows Terminal: 設定 → 設定檔 → 外觀 → 字型改為 JetBrainsMono Nerd Font
  4. VS Code: 設定 → 搜尋 terminal.integrated.fontFamily → 填入 ‘JetBrainsMono Nerd Font’

重點:因為是 WSL2 環境,字型要裝在 **Windows 端**,不是 Linux 端。

踩坑 2:Prefix 鍵的選擇

tmux 預設的 Prefix 是 Ctrl + b,但這個組合不太順手。嘗試了幾個選項:

嘗試的 Prefix 結果
Ctrl + Space 跟輸入法衝突
Ctrl + x 跟剪下衝突
Ctrl + a 跟全選衝突
反引號 (`) 不衝突,最終採用

反引號在鍵盤左上角(Esc 下方),單手就能按到,而且在日常終端操作中幾乎不會用到。需要輸入真正的反引號時,連按兩下即可。

踩坑 3:快捷鍵與 VS Code 衝突

在 VS Code 終端機中,Alt 和 Ctrl 的組合鍵幾乎都被佔用了:

  • Alt + 方向鍵:VS Code 用來移動程式碼行
  • Ctrl + j:VS Code 切換面板
  • Ctrl + k:VS Code 組合鍵前綴
  • Ctrl + l:清除終端

解決方案:全部改用 Prefix 方式操作。 因為 Prefix(反引號)是 tmux 專用的啟動鍵,按下後 tmux 會攔截下一個按鍵,所以不管接什麼鍵都不會跟 VS Code 衝突。

最終的快捷鍵配置:

操作 按鍵 說明
切換 Pane Prefix → h/j/k/l Vim 風格,需要 Prefix
切換 Window Shift + 方向鍵 不需要 Prefix,不衝突

踩坑 4:tmux 裡面預設是 bash 不是 zsh

裝了 zsh 並設為系統預設 shell 後,開 tmux 裡面還是 bash。

解決方案: 在 ~/.tmux.conf 最上方加一行:

set-option -g default-shell /usr/bin/zsh
Code language: JavaScript (javascript)

最終的 .tmux.conf 設定詳解

以下是踩完所有坑之後的最終設定,逐行解說。

基礎設定

# 指定預設 shell 為 zsh
set-option -g default-shell /usr/bin/zsh

# 啟用 True Color(讓主題顏色正確顯示)
set-option -sa terminal-overrides ",xterm*:Tc"

# 啟用滑鼠支援(點擊切換面板、拖拉調整大小、滾輪捲動)
set -g mouse on
Code language: PHP (php)

Prefix 鍵設定

# 取消預設的 Ctrl+b
unbind C-b

# 改用反引號作為 Prefix
set -g prefix `
bind ` send-prefix
Code language: PHP (php)

Pane 切換(Vim 風格)

# 用 Prefix + h/j/k/l 切換面板方向
bind h select-pane -L    # 左
bind j select-pane -D    # 下
bind k select-pane -U    # 上
bind l select-pane -R    # 右
Code language: PHP (php)

視窗編號從 1 開始

set -g base-index 1
set -g pane-base-index 1
set-window-option -g pane-base-index 1

# 關閉視窗後自動重新編號(不會出現 1, 3, 4 跳號)
set-option -g renumber-windows on
Code language: JavaScript (javascript)

快捷鍵綁定

# Shift + 方向鍵切換 Window(不需要 Prefix,不跟 VS Code 衝突)
bind -n S-Left  previous-window
bind -n S-Right next-window

# Shift + Alt + H/L 切換 Window(Vim 風格)
bind -n M-H previous-window
bind -n M-L next-window
Code language: PHP (php)

主題與插件

# Catppuccin Mocha 主題(需搭配 Nerd Font)
set -g @catppuccin_flavour 'mocha'

# 插件列表(用 TPM 管理)
set -g @plugin 'tmux-plugins/tpm'           # 插件管理器
set -g @plugin 'tmux-plugins/tmux-sensible'  # 合理預設值
set -g @plugin 'dreamsofcode-io/catppuccin-tmux'  # Catppuccin 主題
set -g @plugin 'tmux-plugins/tmux-yank'      # 複製內容同步到系統剪貼簿

# 載入 TPM(這行必須放在插件列表之後)
run '~/.tmux/plugins/tpm/tpm'
Code language: PHP (php)

Vi 複製模式

# 啟用 vi 模式(在複製模式中用 Vim 按鍵操作)
set-window-option -g mode-keys vi

# v 開始選取、Ctrl+v 矩形選取、y 複製
bind-key -T copy-mode-vi v send-keys -X begin-selection
bind-key -T copy-mode-vi C-v send-keys -X rectangle-toggle
bind-key -T copy-mode-vi y send-keys -X copy-selection-and-cancel
Code language: PHP (php)

分割面板時保留路徑

# 分割時自動進入目前資料夾(不用再 cd)
bind '"' split-window -v -c "#{pane_current_path}"
bind % split-window -h -c "#{pane_current_path}"
Code language: PHP (php)

日常操作速查表

以下所有 Prefix 指的是反引號鍵(鍵盤左上角 Esc 下方)。

Session 操作

想做什麼 怎麼操作
開新工作階段 終端輸入 tmux new -s 名稱
暫時離開(背景繼續跑) Prefix → d
回到工作階段 終端輸入 tmux a
列出所有工作階段 終端輸入 tmux ls
切換工作階段 Prefix → s

Window 操作

想做什麼 怎麼操作
開新視窗 Prefix → c
切換視窗 Shift + 左/右方向鍵
切到指定視窗 Prefix → 1 / 2 / 3…
關閉視窗 Prefix → &
重新命名 Prefix → ,

Pane 操作

想做什麼 怎麼操作
水平分割(上下) Prefix → “
垂直分割(左右) Prefix → %
切換面板 Prefix → h/j/k/l 或滑鼠點擊
放大/還原面板 Prefix → z
關閉面板 Prefix → x

複製貼上

想做什麼 怎麼操作
複製 滑鼠選取文字,放開即複製到剪貼簿
貼上 Ctrl + Shift + V
精確選取(進階) Prefix → [ 進入複製模式,v 選取,y 複製

插件管理

想做什麼 怎麼操作
安裝插件 Prefix → I(大寫)
更新插件 Prefix → U(大寫)
重新載入設定 Prefix → : 然後輸入 source ~/.tmux.conf

總結

在 WSL2 + VS Code 環境下使用 tmux,最關鍵的四件事:

  1. 字型: 安裝 Nerd Font 並在 Windows Terminal 和 VS Code 都設定好
  2. Prefix 鍵: 選一個不跟任何東西衝突的按鍵(反引號是好選擇)
  3. 快捷鍵: 避免用 Alt 和 Ctrl 組合,統一走 Prefix 路線就不會跟 VS Code 衝突
  4. 預設 Shell: 記得在 tmux.conf 裡指定 default-shell

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *