多需求并行开发环境

多需求并行开发时的麻烦事

作为一个前端程序员，平常工作中遇到比较恼人的麻烦就是需求很多时------虽然都不大需求没什么技术难度，但都赶到一块了------在需求之间切换开发环境的问题。

如果各个需求是分散在不同仓库下的话，那还好办，分别启动项目就可以了。

但如果两个需求在同一个仓库下的不同分支呢？想要切换到另一个需求的环境，你需要做下面这些事情：

使用 git worktree 可以很好的解决这个问题

git worktree 是用来管理多个工作区的功能。工作区其实就是仓库所在的文件目录，当我们 git clone 一个仓库时，就已经创建了一个工作目录。使用 git worktree 可以创建和管理多个这样的工作目录。

常用的操作有三个：

git worktree list

显示当前所有的 worktree
git worktree add <path> <branch>

在指定的 <path> 下创建一个指定分支 <branch> 的 worktree
git worktree remove <worktree>

删除指定的 worktree

举个例子：

我们在桌面上 ~/Desktop ，有一个仓库 A ~/Desktop/A ，其中有两个分支 foo 和 bar ，分别对应两个需求。现在我们基于 git worktree 搭建一个这两个需求并行的开发环境。

javascript 复制代码

cd ~/Desktop/A

bash 复制代码

# 这时我们需要指定这个 worktree 的路径
# 建议放在和仓库 A 同级的目录下然后使用分支名当作文件夹名字
git worktree add ../foo foo
git worktree add ../bar bar

这样我们就在~/Desktop/foo 和 ~/Desktop/bar 分别创建了一个对应分支的 worktree

bash 复制代码

cd ~/Desktop/foo
npm i
npm run dev

cd ~/Desktop/bar
npm i
npm run dev

这样就得到了两个并行的开发环境，你只需要在不同的目录下打开 vscode，启动项目就可以了，这两个工作区互不影响，你不再需要做任何切换操作了！

为了更好的区分，你可以使用 Peacock 这个插件给不同的编辑器一个特定的颜色，像下面这样。这在更多的需求并行时很有用

或者打开原生 tab 设置并合并所有窗口，这样可以获得更简洁的布局，在工作区很多时很有用。

如果你是个 vim/neovim 用户，那么恭喜你，我们可以使用更（我认为>.<）优雅简洁的 Iterm2 管理多个工作区。

（当然，可能需要更多的配置）

首先设置下 Iterm2 的布局

Theme 设置为 Minimal；Tab bar location 设置为 Left

分别为每个工作区打开两个 tab，一个用来启动项目，一个用来启动 vim/neovim。像下面这样。

右键点击 tab，为不同工作区的 tab 设置一个颜色，帮助区分。

右键点击 tab ⇒ Edit Session ...，为不同工作区的 tab 设置个名字

这里你可以为每个 session 设置不同的配置，不赘述了，大家可以自己去尝试。

这里只讲我自己比较常用的两个：

Badge：非常推荐的功能，Badge 是一个始终存在于终端右上角的一个标识，对于多需求并行开发时，快速知道当前所在工作区很方便。推荐设置一个能一眼看懂的文字。我通常是直接写当前需求的名字。

Tab Title：当前 Tab 的名字，你可以在这里标识出当前 tab 在工作区的具体职责和关键信息。我通常在运行 neovim 的那个 tab 标识出当前的分支和仓库名字，在运行项目的那个 tab 上标识出当前项目运行的端口。

你还可以利用 Iterm2 的 profile 功能把上面这些东西保存下来，方便你重新打开工作区，这里就不展开了。

实际工作中，并行的需求往往大于两个，最终可能变成这样：

这套配置在这时也能有很舒适的开发体验，这里推荐给大家。

我的 neovim config: github.com/MoYuM/nvim

希望大家在日常工作中都能有良好的开发体验～