VS Code中如何将两个终端设置为同一区域的拆分终端？

我平时做前后端分离项目时，也烦透了来回切换终端的操作，下面这几种方法亲测好用，你可以根据自己的习惯选：

1. 用终端模拟器原生分屏功能 #

这是最直接的方案，大部分主流终端工具都自带分屏能力：

• Windows Terminal：打开终端后，点击顶部标签栏的下拉菜单，选择「拆分窗格」，可以选横向或纵向拆分，然后分别在两个窗格里启动ng serve和你的Node服务命令。
• iTerm2（Mac）：按住Cmd+D快速横向分屏，Cmd+Shift+D纵向分屏，几秒就能搞定双终端并排。
• Terminator（Linux）：右键终端空白处，选择「拆分水平」或「拆分垂直」即可。

这种方法的好处是两个终端完全独立，输出互不干扰，适合喜欢清晰区分不同服务日志的场景。

2. 用concurrently在单个终端同时运行多命令 #

如果不想开多个终端窗口，可以用concurrently这个npm工具，它能在同一个终端里同时启动多个进程，还会用不同颜色区分各自的输出：

操作步骤： #

1. 先安装依赖：

npm install concurrently --save-dev

2. 在项目根目录的package.json里修改scripts配置：

"scripts": {
  "start:all": "concurrently -c \"#42a5f5,#66bb6a\" \"ng serve\" \"node ./server/index.js\"",
  "start:ng": "ng serve",
  "start:node": "node ./server/index.js"
}

这里的-c参数是给每个进程指定颜色，你可以换成自己喜欢的颜色代码或名称。

3. 运行合并命令：

npm run start:all

这样就能在同一个终端里同时看到Angular开发服务和Node后端的日志输出，不用切换窗口。

3. VS Code集成终端拆分 #

如果你用VS Code开发，直接用它的集成终端拆分功能最省心：

1. 打开VS Code的终端面板（快捷键Ctrl+）
2. 点击终端面板右上角的「拆分终端」按钮（图标是两个并排的方框）
3. 此时终端会分成左右两个面板，分别在里面启动ng serve和Node服务即可。

这种方法完美集成在编辑器里，不用切换到其他窗口，开发效率拉满。要是用WebStorm之类的其他IDE，操作逻辑也类似，找终端面板的拆分选项就能实现。

内容的提问来源于stack exchange，提问作者ipid