VSCode的“拆分编辑器布局”

P粉986688829

发布时间：2026-01-07 11:42:09

616人浏览过

来源于php中文网

原创

VSCode中实现拆分编辑器布局有五种方法：一、鼠标拖拽标签页至边缘触发自动拆分；二、用Cmd+\快捷键快速垂直拆分；三、命令面板输入View: Split Editor选择方向；四、右键标签页→Split Editor子菜单选择方向；五、点击编辑器组标题栏的+按钮添加新组。

vscode的“拆分编辑器布局”

如果您在使用 VSCode 时希望同时查看或编辑多个文件区域，但当前编辑器仅以单列形式显示，则可能是由于编辑器布局未启用拆分视图。以下是实现“拆分编辑器布局”的多种方法：

本文运行环境：MacBook Air，macOS Sequoia。

一、通过鼠标拖拽实现水平或垂直拆分

该方法利用 VSCode 的可视化交互机制，直接将已打开的编辑器标签拖入编辑器边缘区域，触发自动布局拆分，无需快捷键或命令面板介入。

1、点击并按住某个已打开文件的标签页（如 index.js）。

2、将该标签页向编辑器窗口的左侧、右侧、顶部或底部边缘缓慢拖动，直至出现半透明蓝色高亮区域。

3、松开鼠标，该文件将在新创建的编辑器组中独立显示，原始编辑器组保持不变。

4、可在新组中通过文件资源管理器或 Ctrl+P（Cmd+P）打开其他文件，实现跨组协同编辑。

二、使用快捷键快速创建垂直拆分

该方法通过内置快捷键立即复制当前活动编辑器组为左右并列结构，适用于需快速对比或同步修改同一文件不同部分的场景。

1、确保光标聚焦于目标编辑器内（任意文件均可）。

2、按下 Cmd+\（macOS）或 Ctrl+\（Windows/Linux）。

3、当前编辑器内容将被复制至右侧新组，两个组初始显示相同文件和光标位置。

4、可在任一组中独立滚动、编辑或切换文件，两组互不干扰。

三、通过命令面板选择拆分方向

该方法提供对拆分方向的显式控制，支持水平与垂直两种布局，并可重复执行以构建多组嵌套结构。

1、按下 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux）打开命令面板。

2088shop商城购物系统

2088shop商城购物系统是商城系统中功能最全的一个版本：非会员购物、商品无限级分类、不限商品数量、商品多级会员定价、上货库存、Word在线编辑器、订单详情销售报表、商品评论、留言簿、管理员多级别、VIP积分、会员注册积分奖励、智能新闻发布、滚动公告、投票调查、背景图片颜色更换、店标上传、版权联系方式修改、背景音乐（好歌不断）、广告图片支持Flash、弹出浮动广告、搜索引擎关健词优化、图文友情联

下载

2、输入 View: Split Editor 并回车。

3、在弹出的方向选项中，选择 Split Editor Right 或 Split Editor Down。

4、确认后，当前编辑器组将按所选方向生成新组，焦点自动移至新组。

四、通过右键菜单激活拆分操作

该方法适用于习惯图形界面操作的用户，无需记忆快捷键，所有选项均在上下文菜单中直观呈现。

1、在已打开的文件标签页上单击鼠标右键。

2、在弹出菜单中，将鼠标悬停于 Split Editor 子菜单项。

3、从展开的子菜单中，点击 Split Right 或 Split Down。

4、对应方向的新编辑器组立即创建，原标签页保留在原始组中。

五、使用编辑器组工具栏按钮手动添加

该方法依赖 VSCode 窗口顶部编辑器组标题栏的可视化控件，适合偏好点击操作且当前界面已存在多个组的用户。

1、定位到当前编辑器组标题栏右侧的 + 按钮（位于组名后、关闭按钮前）。

2、点击该按钮，当前组将被复制并添加至相邻位置。

3、若当前为单组，默认添加至右侧；若已有左右两组，则新组添加至下方。

4、点击新组中的文件图标或空白区域，即可开始打开或编辑内容。

VSCode安装指南：Windows、Mac与Linux全覆盖

VSCode Portable模式：打造可移动的绿色版开发环境

VSCode便携模式（Portable Mode）配置与使用指南

VSCode多光标编辑技巧，实现代码批量修改神操作

VSCode的“Go to Symbol”：在文件中快速导航

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

510

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

253

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5246

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

471

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

206

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

217

2023.09.14