🤖

wezterm cliでコマンド一発でプロジェクトごとにタブを用意する

2024/03/17に公開

shell

tech

概要

先日、wezterm, tmux, Neovimの環境を紹介する記事を見かけました。ターミナルから離れずにバシバシと開発を進めれる環境はテンション上がりますよね。

私も同じノリでweztermを使っていますが、tmuxではなくweztermの機能を使ってペインの分割、windowの立ち上げをしています。この記事ではどのようにweztermの機能を活用して開発環境を整えているかを紹介します。

キャプチャ

どんな感じの環境か、先にキャプチャを貼っておきます。

コマンドを実行すると、プロジェクトの数だけタブを作成する
各プロジェクトではpaneが分割されていて、下のpaneで開発コマンド(e.g. npm run start:dev)が実行されている

ide command capture

スクリプトはこんな感じです。プロジェクトはサンプルに置き換えています。

function setTitle(){
  name="$1"
  tab_id=$(wezterm cli list --format json | jq "[.[] | select(.cwd | contains(\"${name}\"))] | first | .tab_id")
  wezterm cli set-tab-title --tab-id $tab_id $name
}

function getPaneId() {
  wezterm cli list --format json | jq "[.[] | select(.tab_title | contains(\"$1\"))] | first | .pane_id"
}

open /Applications/WezTerm.app

wezterm cli spawn --cwd /tmp/sample1
setTitle sample1
PORT=3001 wezterm cli split-pane --bottom --percent 25 --pane-id $(getPaneId sample1) -- npm run start:dev

wezterm cli spawn --cwd /tmp/sample2
setTitle sample2
PORT=3002 wezterm cli split-pane --bottom --percent 25 --pane-id $(getPaneId sample2) -- npm run start:dev

# 以下同じノリでプロジェクトのディレクトリを開き、やりたいpane分割を記述する

CLIで行っていること

CLIを利用して、以下を実現しています。

command	内容
`wezterm cli list`	window, tab, paneの一覧を取得。`--format json` でjson形式で取得できるため `jq` で適宜フィルタできる
`wezterm cli set-tab-title`	tabのタイトルを設定
`wezterm cli spawn --cwd <ディレクトリ>`	作業ディレクトリを指定してタブを新規作成
`wezterm cli split-pane`	paneを分割

大きな流れは以下の通りです。

プロジェクトごとに1つtabを作成する
tabのタイトルを設定する
tabのタイトルをもとにpane-idを得る
pane-idを指定してpaneを分割、コマンド実行

ドキュメントが整備されていてありがたいですね。各コマンドについての詳細はドキュメントを参照してください。

この状態で上のpaneでNeovimを立ち上げて開発を進めています。

常時立ち上げておきたいサーバーはworkspaceを使う

storybookやprisma studioなど裏側で常時立ち上げておきたいサーバー群は、それらサーバー起動をまとめたworkspaceに放り投げて使っています。

wezterm cli spawn --cwd <projectのパス> --new-window --workspace dev-server -- npm run storybook
wezterm cli spawn --cwd <projectのパス> --new-window --workspace dev-server -- npx prisma studio

workspaceについてはこちらの記事がとても参考になります。まだまだworkspaceを使いこなせていない感じがあるので、模索中です。

快適なポイント

タブの切り替えは⌘ + 数字キーで出来るようにしているため、ショートカットでバシバシと切り替えることができています。

-- weztermの設定でkey設定している
    -- Tab
    { key = "1", mods = "SUPER", action = wezterm.action({ ActivateTab = 0 }) },
    { key = "2", mods = "SUPER", action = wezterm.action({ ActivateTab = 1 }) },
    { key = "3", mods = "SUPER", action = wezterm.action({ ActivateTab = 2 }) },
    { key = "4", mods = "SUPER", action = wezterm.action({ ActivateTab = 3 }) },
    { key = "5", mods = "SUPER", action = wezterm.action({ ActivateTab = 4 }) },
    { key = "6", mods = "SUPER", action = wezterm.action({ ActivateTab = 5 }) },
    { key = "7", mods = "SUPER", action = wezterm.action({ ActivateTab = 6 }) },
    { key = "8", mods = "SUPER", action = wezterm.action({ ActivateTab = 7 }) },
    { key = "9", mods = "SUPER", action = wezterm.action({ ActivateTab = 8 }) },

色々調査をしてタブが増えたりした後も、weztermの再起動は軽いため、一度落としてまたスクリプトを流して環境をリセットするみたいなことをよくしています。

おわりに

wezterm CLIでのタブ作成、pane分割について紹介しました。どのタブでどのプロジェクトを開いているというのが固定されるのでシュッと移動できて快適です。興味がある方は是非お試しください！