打造高效前端工作环境 - tmux

简介:

前言

 现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gulp来做预编译,如果能把这么多个窗口放在一个工作台上那就好了。咦,tmux不就专干这事的吗?

tmux入门

安装sudo apt install tmux

tmux的C/S架构

服务端(Server), 1个服务端维护1~N个会话;
会话(Session), 1个会话对应1~N个窗口;
窗口(Window), 1个窗口对应1~N个窗格;
窗格(Pane),vim、bash等具体任务就是在窗格中执行。

1.进入tmux
在shell中执行tmux就会自动创建一个匿名会话、窗口和窗格,而窗格内正在运行着另一个shell程序,这时我们可以像平常使用shell一样来工作。而tmux真正的威力在于对会话、窗口和窗格的管理,但在此之前我们要先了解开启魔法的阀门——快捷键前缀(prefix)。

2.快捷键前缀(prefix)
tmux为使自身的快捷键和其他软件的快捷键互不干扰,特意提供一个快捷键前缀,默认为Ctrl+b。因此当我们输入任何tmux快捷键前必须先输入Ctrl+b
由于快捷键前缀是可以重置的,因此后文将以<prefix>来指代快捷键前缀。

3.操作Pane
创建(通过分割当前pane实现)
<prefix> ",水平分割当前pane
<prefix> %,垂直分割当前pane
关闭
<prefix> x,删除当前pane
跳转
<prefix> <up-arrow>/<down-arrow>/<left-arrow>/<right-arrow>, 通过上下左右方向键跳转到对应的pane
<prefix> ;,跳转到上次激活的pane
<prefix> o,跳转到下一个pane
<prefix> q,显示各pane的编号,并输入编号跳转到对应的pane
修改尺寸
<prefix>+alt+<up-arrow>/<down-arrow>/<left-arrow>/<right-arrow>, 通过上下左右方向修改当前pane的高宽
缩放
<prefix> z,缩放当前pane
其他
<prefix> {,将当前pane移动到最左边
<prefix> },将当前pane移动到最右边
<prefix> !,将当前pane转变成window

4.操作Windoiw
创建
<prefix> c,创建window
重命名
<prefix> ,,重命名当前window
注意:由于tmux默认会根据当前pane执行的程序来改变window名称,因此需要在~/.tmux.conf中加入set-option -g allow-rename off来固化window名称。
关闭
<prefix> &,关闭当前window
跳转
<prefix> n,跳转到下一个window
<prefix> p,跳转到上一个window
<prefix> 0...9,跳转到对应的window
其他
<prefix> :swap-window -s 2 -t 1, 调转编号为2和1的两个window的次序
5.操作Session
<prefix> s,显示所有会话
<prefix> $,重命名
<prefix> d,脱离当前会话
<prefix> :kill-session,关闭当前会话
<prefix> (,跳转到上一个会话
<prefix> ),跳转到下一个会话

tmux进阶

1.细抠Session操作
我们为前端开发环境和后端开发环境分别创建两个Session来独立管理,那么我们就可以灵活地在两个Session间穿梭,并且可以分别和前端、后端开发人员协同工作,下面我们看看相关的命令吧。
$ tmux<prefix> :new, 创建匿名Session
$ tmux new -s mysession<prefix> :new -s mysession, 创建名为mysession的Session
$ tmux kill-session -t mysession,关闭mysession会话
$ tmux kill-session -a,关闭所有会话
$ tmux ls,显示所有会话信息
$ tmux a,附加到最近一个会话
$ tmux a -t mysession,附加到会话mysession

2.多个panes输入同步
<prefix> + :setw synchronize-panes

这个功能在通过ssh维护多台服务器时十分有用!

3.复制粘贴
通过tmux我们可以通过纯键盘操作实现跨pane的复制粘贴。首先在~/.tmux.conf文件中添加setw -g mode-keys vi,启用vi键盘方式(hjkl方向键,/?nN搜索)操作buffer内容。
进入复制模式,<prefix> [
开始选择,<Spacebar>
选择结束并将内容复制到新的buffer,<Enter>
取消选择,<Esc>
从buffer_0粘贴到光标位置,<prefix> ]
可见复制的内容均暂存在buffer中,而tmux也提供直接操作buffer的命令给我们.
<prefix> : show-buffer,显示buffer_0的内容
<prefix> : capture-pane, 保存当前pane的内容
<prefix> : list-buffers, 显示所有buffer内容
<prefix> : choose-buffer, 选择buffer并粘贴
<prefix> : save-buffer buf.txt, 保存buffer内容到but.txt
<prefix> : delete-buffer -b 1, 删除buffer_1的内容

4.美化状态栏
默认的tmux样式有点丑,而https://github.com/gpakosz/.tmux这个配置则为我们提供漂亮状态栏.

深入Layout

内置Layout

 tmux为我们内置了5种布局类型
even-horizontal,从左至右平均分布所有pane
even-vertical,从上至下平均分布所有pane
main-horizontal,最上方的pane为主工作区,其余pane位于最下方且从左至右排列
main-vertical,最左边的pane为主工作区,其余pane位于最右边且从上至下排列
tiled,从上至下,从左至右平均分布所有pane
对于main-horizontal和main-vertical布局而言,我们还可以设置主工作区的尺寸

# .tmux.conf
set-window-option -g main-pane-width 100
set-window-option -g main-pane-height 100

自定义Layout

 其实更多的时候,我们工作区的布局远比内置的复杂。如下左上角为编辑区,右上角为UnitTest回显,最下面是REPL。
这时我们就要先调整好window内所有pane的尺寸,然后脱离当前session,获取当前window的布局信息了。

tmux list-windows

将最后一个]前的内容复制到tmuxinator的yml配置中的layout那,注意pane数量要和layout的布局信息数据一致。

总结

 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/6057050.html ^_^肥仔John

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

分类: Ubuntu
1
0
« 上一篇: 让BASH,VIM美美的Powerline
» 下一篇: 打造高效前端工作环境-tmuxinator
posted @ 2016-11-15 09:54 ^_^肥仔John 阅读( 1153) 评论( 6) 编辑 收藏
  
#1楼 2016-11-15 10:02 XiaoFaye  
还没开始工作就要先记住几十上百个快捷键,谈何高效?
  
#2楼 2016-11-15 10:26 幻天芒  
请原谅我,记不住命令行~
  
#3楼 2016-11-15 11:17 清风送明月  
不实用
  
#4楼 2016-11-15 17:04 iTech  
前段为啥到linux上写代码?
  
#5楼 [ 楼主] 2016-11-16 23:31 ^_^肥仔John  
@ iTech
为啥不用linux呢?操作脚本化舒心多了。
  
#6楼 [ 楼主] 2016-11-16 23:33 ^_^肥仔John  
@ XiaoFaye
开箱即用是一种高效,经过学习后得到另一种的高效
相关文章
|
22天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
102 4
|
4月前
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
|
20天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
6月前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
338 3
|
4月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
7月前
|
前端开发 开发工具 开发者
构建高效的前端开发环境
在如今快节奏的软件开发领域,构建一个高效的前端开发环境变得至关重要。本文将介绍一些关键的工具和技术,帮助开发者提升前端开发效率,包括代码编辑器、版本控制系统、自动化构建工具、包管理器以及调试和性能优化等方面。
|
7月前
|
前端开发 JavaScript IDE
构建高效的前端开发环境
本文探讨了如何构建一个高效的前端开发环境,包括选择合适的开发工具、优化工作流程和提高代码质量的方法。通过本文的指导,读者可以更好地提升前端开发效率,快速构建出高质量的网站和应用程序。
|
5月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
7月前
|
前端开发 JavaScript 测试技术
构建现代化前端开发环境的关键要素
【2月更文挑战第8天】 在当今快速发展的数字化时代,前端开发成为了互联网行业中不可或缺的重要组成部分。构建一个现代化的前端开发环境是提高开发效率和用户体验的关键所在。本文将介绍几个关键要素,包括响应式设计、前端框架选择、自动化构建工具以及代码质量保障,帮助开发者打造高效、稳定、可维护的前端开发环境。
|
7月前
|
前端开发 开发工具 git
构建高效的前端开发环境
【2月更文挑战第2天】本文介绍了如何构建一个高效的前端开发环境,包括选择合适的开发工具、优化代码编辑和调试流程、提高团队协作效率等方面。通过采用最新的前端技术和工具,开发人员可以更快速地构建出高质量的网站和应用程序。
108 1
下一篇
无影云桌面