[!WARNING] 💡 本项目仍处于实验阶段，正在开发中，但绝对值得一试。如果您遇到任何问题，请提交 issue 或在 Twitter 上私信我。请随时联系我 👋🏻

特性

• ⚙️ 支持通过 TypeScript 和 React 进行 TMUX 自定义
• 🎨 主题管理 + 流行主题
• 📦 预构建组件，例如 <Hostname />、<Clock />、<SessionName /> 等
• 💡 能够使用原生构建块 <Box /> 和 <Text /> 创建自己的组件

简介

BetterTmux 本质上是一个 TMUX 框架，它利用 React 和 TypeScript 来实现强大的自定义功能。它允许你为 TMUX 状态栏创建自己的自定义组件和配置。此外，它还提供了一层预构建组件，帮助你充分发挥 TMUX 配置的全部潜力。

为什么

TMUX 非常出色，能提升生产力，但配置它可能很棘手。你可以使用像 "oh my tmux" 这样的现成配置，但这可能难以自定义；或者从头开始构建自己的配置，这取决于你的经验，可能会令人不知所措。如果你尝试使用像 Nord 或 Catppuccin 这样的插件主题来匹配你的 vim 或终端主题，你会发现它不仅改变了颜色，还会影响你的组件和布局。

多年来我一直在调整自己的 tmux 配置，最终得到了像这样的复杂配置：

 set -g status-left-length 50
 set -g status-left "#(hostname) #[bg=$theme_primary,fg=$theme_background] 🚀 #[bg=$theme_background,fg=$theme_foreground] Test "
 
 set -g status-right-length 50
 set -g status-right "#[bg=$theme_primary,fg=$theme_background] %Y-%m-%d #[bg=$theme_background,fg=$theme_foreground] %H:%M:%S "
 
 set -g window-status-format "#[bg=$theme_background,fg=$theme_foreground] #I: #W "
 set -g window-status-current-format "#[bg=$theme_primary,fg=$theme_background] #I: #W "
 
 set -g status-style "bg=$theme_background,fg=$theme_foreground"

另一方面，TypeScript（以及 JavaScript）加上 JSX 是处理 UI 的绝佳方式。那么，如果你能用这些技术来配置你的 TMUX 会怎样呢？ 以下是与上述代码非常相似的示例，但使用了 BetterTmux：

import { BetterTmuxConfig, Box, WindowConfig, useTheme } from 'better-tmux'
import { Clock, Hostname } from 'better-tmux/widgets'

const Window = ({ type, number, name }: WindowConfig) => {
  const theme = useTheme()
  return (
    <Box 
      padding={1} 
      bg={type === 'active' ? theme.primary : theme.background}
      fg={type === 'active' ? theme.background : theme.foreground}
    >
      {number}: {name}
    </Box>
  )
}

const CustomStatusLeft = () => {
  const theme = useTheme()

  return (
    <Box>
      <Hostname />
      <Box bg={theme.primary} padding={1}>🚀</Box>
      <Box bg={theme.background} fg={theme.foreground} padding={1}>Test</Box>
    </Box>

  )
}

export default {
  theme: 'nord',
  options: {
    prefix: 'C-a',
    setTitlesString: "BetterTmux",
  },
  status: {
    left: <CustomStatusLeft />,
    right: <Clock />,
    position: 'top'
  },
  window: (window) => <Window {...window} />
} satisfies BetterTmuxConfig

文档 📘

• 设置
  • 安装
  • 配置你的设置文件
  • 测试
  • 更新
  • 卸载
• 基本用法
  • 理解自定义
  • index.tsx 的使用
  • 与 tmux.conf 集成
  • BetterTmux 包
• API 参考
  • 配置
  • 主题
  • 组件
  • 示例
  • Hooks
  • Widgets
  • 工具函数

常见问题

“这个项目能替代我的 tmux.conf 吗？”

• 简短回答：还不能。
• 详细回答：这是该项目的计划。目前，我们不支持所有可能的 tmux 配置和选项，但我们计划支持最常见的配置。

“如果我需要 BetterTmux 不支持的功能怎么办？”

• 我们建议将你的 tmux.conf 与 BetterTmux 一起使用。这允许你将任何原生 tmux 命令作为逃生通道使用。

许可证

MIT