How do I open the same file side by side in a single Visual Studio Code session? - visual-studio-code

Say I'm reading file xyz.py. And I want to see both func_x and class_y at the same time, so that I don't have to keep on scrolling up and down to go back and forth.
How would I open file xyz.py side-by-side so that I can read both at the same time?
Note: This is different from the question Visual Studio Code: How to split the editor vertically, as it doesn't explain how to have the same window side by side.

In the top right of your screen there should be a split editor button that looks like this:
That should do the trick.
The default keyboard shortcut (on windows) is Ctrl+\

In Command Palette
(Ctrl or ⌘+Shift+P)
Type split e Enter
(Select View: Split Editor)
In sidebar
Alt+Left-click the file
In editor
Click the Split Editor button () in the upper right corner.

None of the above worked for me
but ⌘ + \ worked.

Related

How to create a terminal with a horizontal split in visual studio code

This seems quite basic, but I can only seem to create vertical splits in vs code, and would like to be able to create horizontal but don't know what the command is to do so.
I have tried looking through the commands prefixed with Terminal: , but don't seem to have anything that will create a new terminal in a horizontal split. The command that I'm using to create a new terminal is Terminal: Create New Integrated Terminal
open a first terminal, then a second one, then right click a terminal: "move to editor area".
Configure default terminal location
In theory you can configure the terminal location, using Workbench > Panel: Default Location:
The setting ID is workbench.panel.defaultLocation
The JSON is:
"workbench.panel.defaultLocation": "left"
That doesn't work for me. Sounds like a bug.
Work-around
To work around this you can:
Pull up a terminal with Ctrl'
Right click on the TERMINAL tab
Select either "Move panel left" or "Move panel right"
Click into the panel
Hit CtrlShift5 to split the terminal
You now have two terminals, one above the other
I have also found that changing the alignment of the terminal panel can give some more width and prevent crammed text in a narrow terminal column. To do this go into the VSCode menu...
View -> Appearance -> Align Panel -> Justify
This will place the terminal below everything and give extra width because it is no longer crowded by the Primary Side Bar.
On the terminal panel click on Configure Terminal Settings
On the next screen change Default Location to editor
Now if you create terminals it will create it in editor window
Use tmux and use ITerm.app in your configuration
If you're like me and your cat walked on your keyboard and opened a split terminal somehow, you can close it by right clicking the split piece and select Kill Terminal.

Open current editing file in explorer tree

I'm wondering if there is a shortcut for VS Code that highlights in solution explorer tree current opened file. Like we have in Visual Studio:
Alt + Shift + L
Couldn't live with no complete answer, so figured out the following:
Without a direct keyboard shortcut:
Open the command palette via Cmd-Shift-P (or Cmd+P then >) and type Files: Reveal Active File in Side Bar.
This reveals the active file in the side bar similar to Visual Studio's Alt+Shift+L
Then, take the above and map a keyboard shortcut to it:
Open keyboard shortcut preferences file via Cmd-Shift-P followed by Preferences: Open Keyboard Preferences File.
Add in the following (taking Visual Studio's lead, I've personally mapped it to Alt+Shift+L, but map to what you want).
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "shift+alt+l",
"command": "workbench.files.action.showActiveFileInExplorer",
},
]
Note that it's not as good as Visual Studio, Atom, etc. in that you can't then navigate with arrow keys in the tree (arrow keys navigate the active file contents), but I guess I'll eventually figure out how to do that.
#Tomoyuki Aota points out that you can do the following to navigate with arrow keys:
After Files: Reveal Active File in Side Bar, press Ctrl+Shift+E (Show
Explorer). After that, I can navigate the files in the explorer by the
arrow keys.
I don't think there's a command for that, but there is a shortcut to enable/disable revealing the current file as you open it:
"explorer.autoReveal": true
Try this:
Together with #Rob's correct answer:
"explorer.autoReveal": true
then Ctrl-Shift-E (Show explorer) focuses that file in the explorer and the arrow keys will navigate up/down/left/right like any list. This works even if the explorer is closed prior to the Ctrl-Shift-E.
Ctrl-Shift-E has the added bonus in that it will toggle focus between the highlighted file and its editor as well.
For mac, use Cmd-Shift-E
Right-click the file tab (not necessarily current one) and click "Reveal in Side Bar".
I was able to achieve this by customizing the workbench.files.action.focusFilesExplorer command with keybinding Alt + shift + L
Open the Keyboard Shortcuts ctrl + K + shift + S
search for focusFilesExplorer command & customize
Provide your keybindings that you are used to - I set mine to Alt + Shift + L
F1 then type "reveal" also works from in VS Code, at least for me.
It looks like the actual version of VS Code offers a command for this feature now.
In the settings, type revealInExplorer in the search bar to find the command. There is no default keybinding, so just put your own. Works like a charm!
Download the open in browser extension, that's it.
Right click > Open in primary/secondary browser function appears, and the ALT+B / ALT+SHIFT+B shortcuts become available.
Had a similar case and ended up here looking for help.
I opened a file in "preview" mode after clicking a link in a .md file and wanted to know where this opened file was located in the project.
I found this button in the upper right corner of VS Code which was exactly what I wanted:
It's called "show source"
Also check "Explorer: Auto Reveal Exclude" patterns in VS Code settings. Files that fit any of the patterns will not be auto revealed in the Explorer tree.

Visual Studio Code: How to split the editor vertically

In Visual Studio Code, a while ago, when I used menu View → Split Editor, it would split vertically. (One file on the left and one file on the right.)
I updated Visual Studio Code and when when I do menu View → Split Editor, it always splits horizontally. (One file on the top and one file on the bottom.)
How can I split vertically?
Change editor split layout from horizontal to vertical
In 1.20
ALT+SHIFT+0 PC (Windows, Linux)
⌘+⌥+0 Mac
Pre-1.20
ALT+SHIFT+1 PC (Windows, Linux)
⌘+⌥+1 Mac
In 1.25
You can split editor into Grid layout. Check View=>Editor Layout
It is nicely presented in Release notes v1.25: VS Code grid editor layout
In 1.58.2 **
** Someone update this with the lowest version where this became true.
The menu entry with the shortcut given above is View=>Editor Layout=>Flip Layout
The Command Palette entry is labeled "Toggle Vertical/Horizontal Editor Layout"
The settings entry is
{
"key": "alt+cmd+0",
"command": "workbench.action.toggleEditorGroupLayout"
}
If you're looking for a way to change this through the GUI, at least in the current version 1.10.1 if you hover over the OPEN EDITORS group in the EXPLORER pane a button appears that toggles the editor group layout between horizontal and vertical.
To split vertically:
⌘+\ Mac
command: workbench.action.splitEditor
To split orthogonal (ie. horizontally in this case):
⌘+k+⌘+\ Mac
command: workbench.action.splitEditorOrthogonal
Method 1
Method2
View -> Command palette -> type 'split'
Method3
Method4
Tip
Add a Keyboard Shortcut for split Editor
Press CMD + SHIFT + P (MAC) and search for Toggle Editor Group
In version 1.23.1, it is Ctrl+Shift+P and Split Editor
This will divide the screens vertically and you can move through them using Ctrl+K+LeftArrow
By default, editor groups are laid out in vertical columns (e.g. when you split an editor to open it to the side). You can easily arrange editor groups in any layout you like, both vertically and horizontally:
To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false:
There are a predefined set of editor layouts in the new View > Editor Layout menu:
Editors that open to the side (for example by clicking the editor toolbar Split Editor action) will by default open to the right hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.
There are many keyboard commands for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is a fast way to split the editor into any direction:
Keyboard shortcuts#
Here are some handy keyboard shortcuts to quickly navigate between editors and editor groups.
If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.
⌥⌘→ go to the right editor.
⌥⌘← go to the left editor.
⌃Tab open the next editor in the editor group MRU list.
⌃⇧Tab open the previous editor in the editor group MRU list.
⌘1 go to the leftmost editor group.
⌘2 go to the center editor group.
⌘3 go to the rightmost editor group.
unassigned go to the previous editor group.
unassigned go to the next editor group.
⌘W close the active editor.
⌘K W close all editors in the editor group.
⌘K ⌘W close all editors.
Simply in windows
ctrl + # (the button 2 in the upper horizontal row of numbers in keyboard)
The key bindings has been changed with version 1.20:
SHIFT+ALT+0 for Linux.
Presumably the same works for Windows also and CMD+OPT+0 for Mac.
Use Move editor into Next Group shortcut:
Mac: ^ + ⌘ + Right/Left arrow
If you want to change shortcut:
Open Command Pallette (macOS keyboard shortcut: ⌘ + Shift + p)
Select Preferences: Open Keyboard Shortcuts
Search View: Move editor into Next Group
To change the editor in Landscape and Vertical mode, follow the steps below.
For example, open two files that you have in your left or right side bar, depending on where you are placed. By default it is always on the left.
Now that you have both windows open, you have to use the key combination for PC (Alt + Shift + 1) for (Windows and Linux Operating Systems) or for MAC (Cmd + Option + 1), as commented here v-andrew.
I just found a simple solution. You can drag an opened file and move towards the four sides of the Editor, it will show a highlighted area that you can drop to. It will split the view automatically, either horizontally, vertically, or even into three rows.
VSCode v1.30.2
Update: you can also drag a file from the Explorer to split the Editor in the same way above.
Right-click on the tab that you want to split it into another screen.
Then choose whether you want to split it (up-down | right-left).
I find this is the quickest way, and You can split it to as many screens as you want.
The best way is to configure the VSCode settings to make the default behavior the way you want:
Split Editor (to a new editor group)
"workbench.editor.openSideBySideDirection": "right" // left/right (default)
"workbench.editor.openSideBySideDirection": "down" // up/down
Split Editor in Group (does not create new editor group)
"workbench.editor.splitInGroupLayout": "horizontal" // left/right (default)
"workbench.editor.splitInGroupLayout": "vertical" // up/down

How to Display VS Code output window to side rather than below

In my VS Code set up I see the output/FSI frame below the main text editor pane like this:
whereas I would love it to appear to the right in the side-by-side view like it does on the images in this link: http://www.wintellect.com/devcenter/jwood/a-quick-look-at-f-in-visual-studio-code
Is there a config option I cannot find somewhere?
I tried Googling but drew a blank and cannot see anything obvious in the config options mentioned on the vs code site page describing the config options
as of version 1.51.1 right click in the right corner on the output panel. then select option 'move panel right'
I don't believe you can detach/move the output windows in Visual Studio Code. You can move the side bar to the left/right side, but that's it. There is no config option, sorry.
You could try posting a feature request on the GitHub page: https://github.com/Microsoft/vscode
EDIT: This was changed in VS Code 0.10.8, it was once on the side but was moved to the bottom. See this GitHub issue: https://github.com/Microsoft/vscode/issues/2806
This feature is not available yet in VS Code. However as of today (March 30, 2017) it's on 6 months roadmap so it should be done in a near feature.
This feature is available from version 1.18.0+
Simply click this icon to dock to the right:
Just follow the steps mentioned:
In Visual Studio Code -
View Tab > Appearance > Toggle Panel Position
That's it.
Your original link to the view your desire is obsolete, so it is a guess as to what you wanted. But here is a demo of setting up a terminal/output look side-by-side. It is a little tricky - you drag your Outline header over the Terminal header which will then allow you the option of putting it to the left or right of the Terminal:
its easy. just right-click on the terminal, select 'move panel right' like in the image below and voila
the image can be found here
Vertical Split:
From VS Code Menu bar:
View >> Appearance >> Move Panel Right
Version 1.47.0 of VS Code (at the moment of posting this, the latest one) allows you to drag output (or any other panel tab, e.g. terminal) to the activity bar. This way you can obtain output to the side of the editor.
Just right click on the panel of output section then select "Move panel left or right" as per your wish.
here your can see the move panel left option.
Press CTRL + SHIFT + P
Select Preferences: Open User Settings (JSON)
Insert (or change if it is there --search for it) the following config line:
"workbench.panel.defaultLocation": "right",
Save file.
That will work for new workspaces. VS-Code saves your preferences for each folder you start it in. So, if you navigate to a folder you previously called VS-Code in (I mean, from the terminal), it will open the output panel in the same location it was the last time you have used VS-Code from the same location.
After making the change above, go to a new place, like /opt and start VS-Code there to make a test.

How do you split and unsplit a window/view in Eclipse IDE?

How do you split a window/view in Eclipse IDE? I want to edit code while viewing the different code in the same file.
If there is a trick to open the same file twice, this might do, but I would rather just split the one current view instead of having two of the same which might get confusing.
This is possible with the menu items Window>Editor>Toggle Split Editor.
Current shortcut for splitting is:
Azerty keyboard:
Ctrl + _ for split horizontally, and
Ctrl + { for split vertically.
Qwerty US keyboard:
Ctrl + Shift + - (accessing _) for split horizontally, and
Ctrl + Shift + [ (accessing {) for split vertically.
MacOS - Qwerty US keyboard:
⌘ + Shift + - (accessing _) for split horizontally, and
⌘ + Shift + [ (accessing {) for split vertically.
On any other keyboard if a required key is unavailable (like { on a german Qwertz keyboard), the following generic approach may work:
Alt + ASCII code + Ctrl then release Alt
Example: ASCII for '{' = 123, so press 'Alt', '1', '2', '3', 'Ctrl' and release 'Alt', effectively typing '{' while 'Ctrl' is pressed, to split vertically.
Example of vertical split:
PS:
The menu items Window>Editor>Toggle Split Editor were added with Eclipse Luna 4.4 M4, as mentioned by Lars Vogel in "Split editor implemented in Eclipse M4 Luna"
The split editor is one of the oldest and most upvoted Eclipse bug! Bug 8009
The split editor functionality has been developed in Bug 378298, and will be available as of Eclipse Luna M4. The Note & Newsworthy of Eclipse Luna M4 will contain the announcement.
You can open a new editor from the Window menu.
This will give you your current editor once again.
If you right click on one of the tabs, one of the options should be New Editor (for me, it's at the bottom). Select that, and then drag the new tab onto the bottom scroll bar of the code editor, which will split the editor panel in two.
Just click and drag editor title to left, right, top or bottom
I tried the above solutions in Eclipse Luna 4.4.1 but couldn't open two (or multiple editor windows for different files side by side).
Simplest Solution:
Open all files you want in a single window.
Drag the tab of each of the files to right or to the left, eclipse will automatically display a split screen display and will split the editor into two windows once you leave the mouse button.
repeat for each file/tab.
Happy Coding!
Side by side editors in single Eclipse window.
You have an Eclipse window showing a single editor.
Window -> new editor. You now have two editor tabs.
Click and drag one tab towards the right and a green outline of a vertical screen appears (drag tag towards the bottom and an outline of a horizontal screen outline appears). You can let go as soon as the outline appears.
Open file of choice in 2nd editor (recent files show up at bottom of file menu).
ADT/Eclipse:Build: v22.3.0-887826
You might want to check an eclipse plugin called HandySplit
It allows to split an editor into two and move tabs from one editors stack to another with keyboard shortcuts only.
That works on Eclipse Juno or higher.
For the previous Eclipse versions check this out
Simply go to Window > New Window
This will open up a new window of the same Workspace in eclipse.
You can open up separate files in each Window.
Below are the steps to split editor horizontally or vertically
go to:
Window -> Editor -> Toggle Split Editor (Horizontal)
to split editor horizontally or
Window -> Editor -> Toggle Split Editor (vertical)
to split editor vertically.
It will open two editors side by side or will pileup tow.
If you want to see two different files in same eclipse you can,
Right-click a tab -> Detach
Now you can see both files at the same time without opening new eclipse and you can drag and reatach to tabs again.
On Mac OS, the key combination to toggle spit/unsplit for horizontal split is ⌘ ⇧ - ("cmd"+"shift"+"-"), whereas for vertical split, it is ⌘ ⇧ [ ("cmd"+"shift"+"[")