打造高效前端工作環境 tmuxinator

2021-09-07 07:31:02 字數 4054 閱讀 4419

雖然tmux能讓我們方便組織工作環境,但每次重新開啟會話時都需要手動重新建立視窗、窗格和執行各種程式,能不能像vs那樣以工程為單位儲存視窗、窗格和各種所需執行的程式的資訊呢?tmuxinator恰恰能解決我們這個需求!

安裝gem

$ sudo apt install gem

$ gem sources --remove --add

確保gem的源有且僅有

$ gem sources -l
安裝tmuxinator

$ gem install tmuxinator
$ if [[ $shell == *fish* ]];then pushd ~/.config/fish/completions/; else pushd ~/.tmuxinator/; fi &&

curl -o " $shell)" &&

popd &&

if [[ $shell != *fish* ]];then echo "source ~/.tmuxinator/tmuxinator.$(basename $shell)" >> ~/.$(basename $shell)rc; fi &&

if [ -z $editor ];then echo "export editor='vim'" >> ~/.$(basename $shell)rc; fi &&

source ~/.$(basename $shell)rc

1.建立並編輯專案配置,mux n

示例:

$ mux n demo
然後進入專案配置編輯介面

# ~/.tmuxinator/demo.yml

# 預設配置

name: demo #專案(配置)名稱,不要包含句號

root: ~/ #專案的根目錄,活動pane會首先cd到此目錄

windows:

- editor: # 配置名稱為editor的視窗

layout: main-vertical # 由於editor下存在多個窗格,因此需要layout可以設定布局(5個預設值even-horizontal,even-vertical,main-horizontal,main-vertical,tiled)

panes:

- vim # 配置乙個窗格執行vim

- guard # 配置另乙個窗格執行guard

- server: bundle exec rails s # 配置名稱為server的視窗, 且僅有乙個執行bundle exec rail s的窗格

- logs: tail -f log/development.log # 配置名稱為logs的視窗, 且僅有乙個執行tail -f log/development.lgo的窗格

根據修改配置得到如下

# ~/.tmuxinator/demo.yml

name: demo

root: ~/repos/demo/

pre_window: nvm use 4

# runs before everything. use it to start daemons etc.

# pre: nvm use 4

# specifies (by name or index) which window will be selected on project startup. if not set, the first window is used.

# startup_window: logs

# pass command line options to tmux. useful for specifying a different tmux.conf.

# tmux_options: -f ~/.tmux.mac.conf

windows:

- editor: vim index.html

- server: npm run dev

- stats:

layout: even-horizontal

panes:

- npm run watch:html

- npm run watch:css

- npm run watch:js

- note:

root: ~/repos/note/ # 可在視窗下通過root來配置該視窗下各命令的當前工作目錄

panes:

- vim pugjs.md

然後儲存檔案就ok了!

2.開啟專案(i.e.根據專案配置啟動tmux會話),muxmux s

示例:

$ mux demo
然後tmuxinator就會建立乙個tmux會話,並根據剛才編輯的配置檔案建立視窗和窗格

3.關閉專案(i.e.根據專案配置關閉tmux會話),mux st

示例:在tmux某個shell中輸入

$ mux st demo
4.編輯專案配置,mux emux o

5.檢視現有專案配置,mux l

6.刪除專案(i.e.刪除現有專案配置),mux d *

7.修改專案配置名稱,mux c

1.專案配置檔案路徑隨心玩

眼利的同學可能會發現當我們輸入mux n demo後建立的配置檔案首行為# ~/.tmuxinator/demo.yml,這個正是demo這個專案配置檔案的路徑。也就是說預設情況下專案配置將儲存在~/.tmuxinator/下,並以專案名稱.yml作為檔名。這樣我們就能在任意目錄下通過命令mux開啟專案了。

但一旦誤刪了專案配置那麼就要重新設定了,能不能把它也挪到專案中通過版本管理器(git etc.)作保障呢?必須可以的哦!

# 假設專案目錄為~/repos/demo/

$ mv ~/.tmuxinator/demo.yml ~/repos/demo/.tmuxinator.yml &&

ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

$ ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml
2.引入變數到專案配置檔案中

引數形式

# ~/.tmuxinator/demo.yml

name: demo

root: ~/<%= @args[0] %>

.........

呼叫mux demo args0 args1

鍵值對形式

# ~/.tmuxinator/demo.yml

name: demo

root: ~/<%= @settings["ws"] %>

.........

呼叫mux demo ws="repos/demo/"

環境變數

# ~/.tmuxinator/demo.yml

name: demo

root: ~/<%= env["ws"] %>

.........

呼叫set $ws="repos/demo/" && mux demo

3.設定開發環境上下文

在專案配置檔案中加入pre_window配置項。

示例:

name: demo

root: ~/repos/demo

pre_window: nvm use 4

打造高效前端工作環境 tmuxinator

雖然tmux能讓我們方便組織工作環境,但每次重新開啟會話時都需要手動重新建立視窗 窗格和執行各種程式,能不能像vs那樣以工程為單位儲存視窗 窗格和各種所需執行的程式的資訊呢?tmuxinator恰恰能解決我們這個需求!安裝gem sudo apt install gem gem sources re...

ubuntu工作環境配置

ubuntu預設安裝完會有中文輸入法,不知道為什麼把系統語言調為英文後,怎麼切換輸入法都無法輸入中文。最後解決辦法是 在fcitx配置工具input method頁面中,手動新增pinyin或sunpinyin輸入法,而不是預設選擇的keyboard chinese輸入法,不管用。安裝trash c...

linux工作環境搭建

每次重灌 linux 系統後都需要安裝一些必要的軟體,並經過配置後才能達到正常的使用狀態。由於這些步驟都是重複的,並且難於記憶,因此有必要記錄下來,免去一些查詢資料的麻煩。本文將選取 ubuntu12.04 發行版做為描述基礎。使用 sudoapt get install screen 命令安裝 s...