目录
How to Split the Editor
Working with Multiple Editor Groups
Resize and Navigate Between Splits
Close and Manage Splits
首页 开发工具 VSCode 如何在VSCODE中使用拆分编辑器功能

如何在VSCODE中使用拆分编辑器功能

Aug 16, 2025 am 10:48 AM
vscode 分屏编辑

使用拖拽标签、右键菜单、快捷键(如Ctrl \)或命令面板可拆分编辑器;2. 拆分后可形成垂直、水平或网格布局的编辑组;3. 通过拖动标签或使用快捷键(如Ctrl 1/2/3)在组间切换;4. 可调整分割大小、在窗格间移动文件并跨分割导航错误;5. 通过关闭标签、使用右键菜单或“Join All Editors”命令管理并合并分割;6. 可在设置中配置自动侧边打开文件的行为;分割编辑器功能灵活,适用于代码对比、编写和重构,且能无缝集成到工作流中。

How to use the split editor feature in VSCode

The split editor feature in Visual Studio Code (VSCode) lets you view and edit multiple files—or different parts of the same file—side by side. This is especially useful when comparing code, copying logic between files, or working on related functions. Here’s how to use it effectively.

How to Split the Editor

You can split the editor window in several ways:

  • Drag and drop a tab: Click and drag a file tab to the side, top, or bottom of the editor area. A visual guide will show where the split will appear.
  • Right-click a tab or file in Explorer: Open the context menu and choose Split Editor, Split Editor Right, Split Editor Down, or similar options.
  • Use keyboard shortcuts:
    • Ctrl \ (or Cmd \ on Mac) – Splits the current editor vertically.
    • Ctrl 1 / Ctrl 2 / Ctrl 3 – Switch between editor groups (1 = first, 2 = second, etc.).
    • Ctrl Alt ↓ or Ctrl Alt → – Move between editor groups.
  • Command Palette: Press Ctrl Shift P, type “split”, and choose from options like Split Editor Right or Split Editor Below.

Working with Multiple Editor Groups

Once you’ve split the editor, you’re working with separate editor groups. These can be arranged in various layouts:

  • Vertical split – Most common for comparing code side by side.
  • Horizontal split – Useful when you want to see different sections of a long file (e.g., header and implementation).
  • Grid layout – You can create a 2x2 grid or other combinations by splitting multiple times in different directions.

To move files between groups:

  • Drag a tab from one group to another.
  • Right-click a tab and choose Move Editor to Left/Right/Up/Down.
  • Use Ctrl Shift Alt → (or arrow key) to move the active editor group in that direction.

Resize and Navigate Between Splits

  • Hover over the divider between splits and drag to resize.
  • Click inside any editor pane to focus it.
  • Use Ctrl Tab to cycle through open files across all groups.
  • Press F8 to jump between errors, even across split views.

You can also set VSCode to automatically split editors when opening multiple files:

  • Go to Settings (Ctrl ,), search for “editor: open side by side”.
  • Enable Workbench › Editor › Enable Preview and adjust Open Next to Editor settings if needed.

Close and Manage Splits

  • To close a single split, click the × on the tab or press Ctrl W.
  • To close all but the current editor, right-click the tab and choose Close Others.
  • To remove an entire editor group, hover over the tab bar and click the × on the group header.

You can also use the Join All Editors command in the Command Palette to collapse all splits into one.

Basically, the split editor is flexible and integrates smoothly into your workflow—whether you're reviewing, writing, or refactoring code.

以上是如何在VSCODE中使用拆分编辑器功能的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

PHP教程
1596
276
如何在Windows上安装VSCODE 如何在Windows上安装VSCODE Jul 27, 2025 am 03:16 AM

Gotohttps://code.visualstudio.comanddownloadtheWindowsUserInstaller.2.Runthe.exefile,allowchanges,andselectrecommendedoptionsincludingaddingtoPATHandcreatingadesktopshortcut.3.ClickFinishtolaunchVSCodeafterinstallation.4.Optionallyinstallusefulextens

Vscode和Visual Studio之间有什么区别 Vscode和Visual Studio之间有什么区别 Jul 30, 2025 am 02:38 AM

VSCodeisalightweight,cross-platformcodeeditorwithIDE-likefeaturesviaextensions,idealforwebandopen-sourcedevelopment;2.VisualStudioisafull-featured,Windows-onlyIDEdesignedforcomplex.NET,C ,andenterpriseapplications;3.VSCodeperformsfasteronlower-endma

如何在VSCODE中使用参数运行Python脚本 如何在VSCODE中使用参数运行Python脚本 Jul 30, 2025 am 04:11 AM

TorunaPythonscriptwithargumentsinVSCode,configurelaunch.jsonbyopeningtheRunandDebugpanel,creatingoreditingthelaunch.jsonfile,andaddingthedesiredargumentsinthe"args"arraywithintheconfiguration.2.InyourPythonscript,useargparseorsys.argvtoacce

VSCODE用户设置在哪里? VSCODE用户设置在哪里? Jul 24, 2025 am 02:02 AM

VSCode用户设置存储位置取决于操作系统,通常位于用户配置文件下的特定目录。Windows路径为C:\Users$$用户名]\\AppData\\Roaming\\Code\\User\\settings.json,macOS为/Users\$$用户名]/Library/ApplicationSupport/Code/User/settings.json,Linux为/home$$用户名]/.config/Code/User/settings.jso

如何将VSCODE与WSL(Linux的Windows子系统)一起使用 如何将VSCODE与WSL(Linux的Windows子系统)一起使用 Aug 01, 2025 am 06:26 AM

InstallWSLandaLinuxdistributionbyrunningwsl--installinPowerShellasAdministrator,thenrestartandsetuptheLinuxdistribution.2.Installthe"Remote-WSL"extensioninVSCodetoenableintegrationwithWSL.3.OpenaprojectinWSLbylaunchingtheWSLterminal,navigat

如何更改VSCODE中的字体大小? 如何更改VSCODE中的字体大小? Aug 02, 2025 am 02:37 AM

TochangethefontsizeinVSCode,useoneofthesemethods:1.OpenSettingsviaCtrl ,(orCmd ,onMac),searchfor"fontsize",andadjustthe"Editor:FontSize"value.2.OpenSettings(JSON)fromtheCommandPalette,thenaddormodify"editor.fontSize":e.g

如何在VSCODE中调试单元测试 如何在VSCODE中调试单元测试 Aug 01, 2025 am 06:12 AM

CreateModifyLaunch.JSONINVSCODEBYOPENEDTHERUNANDDEBUGVIEW,SELECTingYourenVironment(例如Python,Node.js)和ConconfiguringItfo ryourtestframework(例如,pytest,jest)。2。setbreakpointsinyourtestfile,selectthedebuggconfiguration,andstartdebuggingwithf5topaus

如何更改VSCODE中的字体大小 如何更改VSCODE中的字体大小 Jul 26, 2025 am 04:13 AM

tochangetheTsizeInvScode,gotofile>“首选项”>“设置”,搜索“ fontsize”,andmodifythe“ editor:fontsize” value.2

See all articles