325 lines
14 KiB
Markdown
325 lines
14 KiB
Markdown
AVAP TM Dev Studio comes with a simple user interface and
|
|
convenient default layout. At the same time, AVAP TM Dev Studio
|
|
provides options and settings to let you customize the UI layout to suit
|
|
your preferences and work style. In this topic, we'll highlight
|
|
various UI customizations so you can display views, editors, and panels in
|
|
the way that's most productive for you.
|
|
|
|
This article starts by discussing Workbench customizations to rearrange UI
|
|
elements such as the side bars, views, and panels. Later in the article,
|
|
we'll cover customization of the Editor region with editor groups,
|
|
split editors, and editor tabs.
|
|
|
|
``
|
|
|
|
## Workbench
|
|
|
|
### Primary side bar
|
|
|
|
The default (Primary) side bar shows views such as the File
|
|
Explorer, Search, and Source Control on the left of the workbench. If
|
|
you'd prefer it on the right, you can:
|
|
|
|
* Right-click the Activity bar and select{' '} Move Primary Side Bar Right .
|
|
* Run View: Toggle Primary Side Bar Position to switch the Primary side bar right and left.
|
|
* Set the Workbench > Side Bar: Location {' '} (workbench.sideBar.location) setting to right.
|
|
|
|
### Secondary side bar
|
|
|
|
By default, AVAP TM Dev Studio shows all views in the{' '}
|
|
Primary Side Bar located to the left of the editor
|
|
region. If you like another place to display views, you can open the{' '}
|
|
Secondary Side Bar to the right and drag and drop views
|
|
into that side bar.
|
|
|
|
This can be useful if you'd like to see two views at the same time,
|
|
for example, the File Explorer on the left and Source Control view on the
|
|
right:
|
|
|
|
To display the Secondary side bar, you can:
|
|
|
|
* Run View: Toggle Secondary Side Bar Visibility {' '} (Ctrl+Alt+B).
|
|
* Check the View > Appearance >{' '} Secondary Side Bar menu item.
|
|
|
|
The Secondary side bar is initially empty but you can drag and drop views
|
|
and panels into it and the layout is preserved across your AVAP
|
|
TM Dev Studio sessions.
|
|
|
|
### Activity bar position
|
|
|
|
By default, the Activity bar moves with the Primary side bar and remains
|
|
on the outer edge of the workbench. You can also choose to hide the
|
|
Activity bar or move it to the top of the Primary side bar. The{' '}
|
|
Activity Bar Position menu available from the Activity
|
|
bar context menu or under View >{' '}
|
|
Appearance has the options Side ,{' '}
|
|
Top , or Hidden .
|
|
|
|
When the Activity bar is in the top position, the Account {' '}
|
|
and Manage buttons, usually at the bottom of the Activity
|
|
bar, move to the right side of the title bar.
|
|
|
|
### Panel
|
|
|
|
The Panel region displays UI elements such as the Problems, Terminal, and
|
|
Output panels and by default is located under the editor region.
|
|
|
|
### Panel position
|
|
|
|
You can also move the region to the left or right of the editor with the{' '}
|
|
Move Panel commands:
|
|
|
|
* View: Move Panel Left ( `workbench.action.positionPanelLeft` )
|
|
* View: Move Panel Right ( `workbench.action.positionPanelRight` )
|
|
* View: Move Panel To Bottom ( `workbench.action.positionPanelBottom` )
|
|
|
|
You can configure these options in the menu under View {' '}
|
|
> Appearance > Panel Position ,
|
|
Panel title bar context menu, or using the new{' '}
|
|
View: Move Panel commands.
|
|
|
|
### Panel alignment
|
|
|
|
This option lets you configure how far the bottom Panel spans across your
|
|
window. There are four options:
|
|
|
|
* Center - This is the default behavior. The panel spans the width of the editor area only.
|
|
* Justify - The panel spans the full width of the window.
|
|
* Left - The panel spans from the left edge of the window to the right edge of the editor area.
|
|
* Right - The panel spans from the right edge of the window to the left edge of the editor area.
|
|
|
|
With all Panel alignment options, the Activity Bar is considered the edge
|
|
of the window.
|
|
|
|
You can configure these options in the menu under View {' '}
|
|
> Appearance > Align Panel , Panel
|
|
title context menu, or using the new{' '}
|
|
Set Panel Alignment to... commands.
|
|
|
|
### Maximize Panel size
|
|
|
|
When the Panel alignment is Center , you can quickly
|
|
toggle the Panel region to fill the entire editor area with the{' '}
|
|
Maximize Panel Size chevron button in the upper right of
|
|
the Panel region. The chevron button points downwards in the maximized
|
|
panel to restore the panel to the original size.
|
|
|
|
You can also maximize the Panel region via the{' '}
|
|
View: Toggle Maximized Panel command.
|
|
|
|
### Customize Layout control
|
|
|
|
The AVAP TM Dev Studio title bar also has buttons to toggle the
|
|
visibility of the main UI elements (Side bars and Panel region).
|
|
|
|
The rightmost button brings up the Customize Layout {' '}
|
|
dropdown, where you can further change the visibility and layout of
|
|
various UI elements and includes several layout modes:
|
|
|
|
The layout modes are:
|
|
|
|
* Full Screen - Set the editor to fill the full display screen. View: Toggle Full Screen ( `F11` ).
|
|
* Zen Mode - Hide all UI except for the editor area.{' '} View: Toggle Zen Mode ( `Ctrl+K Z` ).
|
|
* Centered Layout - Centers the editor inside the editor region. View: Toggle Centered Layout .
|
|
|
|
### Drag and drop views and panels
|
|
|
|
AVAP TM Dev Studio has a default layout of views and panels in
|
|
the Primary Side bar and Panel region but you can drag and drop views and
|
|
panels between these regions. For example, you can drag and drop the
|
|
Source Control view into the Panel region or put the Problems panel into
|
|
the Primary Side bar:
|
|
|
|
You can also add views and panels to existing view or panel to create
|
|
groups. For example, you could move the Output panel to the Explorer view
|
|
group by dragging over the Explorer Activity bar item and then dropping
|
|
into the view:
|
|
|
|
You are not limited to using the mouse for moving views and panels. You
|
|
can also customize layouts via the keyboard with the{' '}
|
|
View: Move View and{' '}
|
|
View: Move Focused View commands, where dropdowns let you
|
|
pick the UI element to move and the destination, either a location like
|
|
the Side bar or Panel region or an existing view or panel to create a
|
|
group.
|
|
|
|
## Tool bars
|
|
|
|
Most AVAP TM Dev Studio views and panels have tool bars
|
|
displayed on the top right of their UI. For example, the Search view has a
|
|
tool bar with actions such as Refresh ,{' '}
|
|
Clear Search Results , etc.:
|
|
|
|
### Hide items in tool bars
|
|
|
|
If you think a tool bar is too busy and you'd like to hide less
|
|
frequently used actions, you can right-click on any action and select its{' '}
|
|
Hide command (for example{' '}
|
|
Hide 'Clear Search Results' ) or uncheck any
|
|
of the actions from the dropdown. Hidden actions are moved to the ...{' '}
|
|
More Actions menu and can be invoked from there.
|
|
|
|
To restore an action to the tool bar, right-click the tool bar button area
|
|
and select the Reset Menu command or recheck the hidden
|
|
action. To restore all menus in AVAP TM Dev Studio, run{' '}
|
|
View: Reset All Menus from the Command Palette
|
|
(Ctrl+Shift+P).
|
|
|
|
## Editor
|
|
|
|
You can customize the layout of the AVAP TM Dev Studio editor
|
|
region independently of the workbench user interface. By default, the
|
|
editor region displays useful features such as the minimap, breadcrumbs,
|
|
editor tabs, and has optional UI such as Sticky Scroll. You can also
|
|
adjust the layout of the editors themselves.
|
|
|
|
### Minimap and breadcrumbs
|
|
|
|
The View > Appearance menu has a
|
|
section for customizing the editor region. There you'll find toggles
|
|
for:
|
|
|
|
* Minimap - A visual overview of your current file.{' '} View: Toggle Minimap .
|
|
* Breadcrumbs - Display folder, file, and current symbol information for the active file.{' '} View: Toggle Breadcrumbs .
|
|
* Sticky Scroll - Display nested symbol scopes in the active file. View: Toggle Sticky Scroll .
|
|
|
|
### Editor groups
|
|
|
|
By default, each opened editor goes into the same{' '}
|
|
editor group and adds a new editor tab to the right. You
|
|
can create new editor groups in order to group similar or related files,
|
|
or to allow side by side editing of the same file. Create a new editor
|
|
group by dragging an editor to the side, or using one of the{' '}
|
|
Split commands in the context menu to duplicate the
|
|
current editor into a new editor group to the left, right, above, or
|
|
below.
|
|
|
|
The Split editor commands are also available from the{' '}
|
|
View > Editor Layout menu and through
|
|
the Command Palette.
|
|
|
|
If you'd like to go quickly between vertical and horizontal editor
|
|
group layout, you can use the{' '}
|
|
Toggle Vertical/Horizontal Editor Layout command
|
|
(Shift+Alt+0).
|
|
|
|
### Split in group
|
|
|
|
You can also split an editor in the same group for side by side editing
|
|
with the View: Split Editor in Group command (Ctrl+K
|
|
Ctrl+Shift+).
|
|
|
|
When using the split in group feature, there are specific commands for
|
|
toggling this mode and navigating between the two split editors:
|
|
|
|
* View: Split Editor in Group - Split the current editor.
|
|
* View: Toggle Split Editor in Group - Toggle between split mode for the active editor.
|
|
* View: Join Editor in Group - Go back to a single editor for the active file.
|
|
* View: Toggle Layout of Split Editor in Group - Toggle between horizontal and vertical layout.
|
|
|
|
To navigate between the sides:
|
|
|
|
* View: Focus First Side in Active Editor - Move focus to the first (left or top) side of split editor.
|
|
* View: Focus Second Side in Active Editor - Move focus to the second (right or bottom) side.
|
|
* View: Focus Other Side in Active Editor - Toggle between the split editor sides.
|
|
|
|
The Workbench > Editor: Split in Group Layout {' '}
|
|
(workbench.editor.splitInGroupLayout) setting lets you set the
|
|
preferred split editor layout to either horizontal (default) or
|
|
vertical.
|
|
|
|
### Grid layout
|
|
|
|
If you'd like more control over the editor group layout, you can use
|
|
the grid layout, where you can have multiple rows and columns of editor
|
|
groups visible. The View >{' '}
|
|
Editor Layout menu lists various editor layout options
|
|
(for example, Two Columns ,{' '}
|
|
Three Columns , Grid (2x2) )
|
|
and you can adjust the group sizes by grabbing and moving the sash between
|
|
them.
|
|
|
|
### Pinned tabs
|
|
|
|
If you'd like an editor tab to always be visible, you can pin it to
|
|
the editor tab bar. You can pin an editor tab from either the context menu
|
|
or using the command View: Pin Editor (Ctrl+K
|
|
Shift+Enter).
|
|
|
|
Pinned tabs help access files that are important to you as:
|
|
|
|
* Pinned tabs always appear first before non-pinned tabs.
|
|
* They do not scroll out of view if you have many tabs opened.
|
|
* They do not close when using editor tab commands such as{' '} Close Others or Close All .
|
|
* They do not close even when you exceed a set limit of opened editors.
|
|
|
|
Unpin an editor by clicking on the pin icon, using the{' '}
|
|
Unpin editor tab context menu item, or the{' '}
|
|
View: Unpin Editor command.
|
|
|
|
You can choose how you'd like to display pinned editors with the{' '}
|
|
Workbench > Editor: Pinned Tab Sizing (
|
|
`workbench.editor.pinnedTabSizing` ) setting. The options
|
|
are:
|
|
|
|
* `normal` : A pinned tab inherits the look of other tabs (default)
|
|
* `shrink` : A pinned tab shrinks to a fixed size showing parts of the editor label.
|
|
* `compact` : A pinned tab will only show as icon or first letter of the editor label.
|
|
|
|
You can also show pinned editor tabs on a separate row above the regular
|
|
editor tab bar by setting{' '}
|
|
Workbench > Editor: Pinned Tabs On Separate Row . You
|
|
can pin and unpin editors by dragging and dropping their tabs between the
|
|
two rows.
|
|
|
|
### Locked editor groups
|
|
|
|
When using multiple editors, it's common to have one or more that you
|
|
want to always keep visible. The locked editor group feature, where an
|
|
entire editor group is locked and visible, provides a stable display and
|
|
any request to open a new editor will create it in another group. You can
|
|
tell whether an editor group is locked by the lock icon in the editor
|
|
group tool bar.
|
|
|
|
You can lock an editor group by selecting Lock Group from
|
|
the editor tool bar More Actions ... dropdown or running
|
|
the View: Lock Editor Group command.
|
|
|
|
You can unlock an editor group by clicking on the lock icon or running the{' '}
|
|
View: Unlock Editor Group command.
|
|
|
|
Locked groups behave differently than unlocked groups:
|
|
|
|
* New editors will not open in a locked group unless explicitly moved there (for example, via drag and drop).
|
|
* If a new editor skips a locked group, it will either open in the most recently used unlocked group or create a new group to the side of the locked one.
|
|
* The locked state of an editor group is persisted and restored across restarts.
|
|
* You can lock empty groups as well, allowing for a more stable editor layout.
|
|
|
|
The primary use case is for terminals in the editor area For example, you
|
|
might want to edit text on the left and have a terminal on the right that
|
|
is always visible. When a terminal editor is created and moved to the
|
|
side, it will automatically lock. This means that even when the terminal
|
|
on the right is focused, opening a file will open it on the left side
|
|
without needing to manually change focus first.
|
|
|
|
Auto locking groups can be configured using the
|
|
workbench.editor.autoLockGroups setting, which defaults to only terminal
|
|
editors but any editor type can be added to get the same behavior.
|
|
|
|
The commands related to editor group locking:
|
|
|
|
* View: Lock Editor Group - Lock the active editor group.
|
|
* View: Unlock Editor Group - Unlock the active locked editor group.
|
|
* View: Toggle Editor Group Lock - Lock or unlock the active editor group.
|
|
|
|
You must have more that one editor group for these commands to be
|
|
available.
|
|
|
|
## Next steps
|
|
|
|
Read on to find out about:
|
|
|
|
* AVAP TM Dev Studio User Interface - A quick orientation to AVAP TM Dev Studio.
|
|
* Basic Editing - Learn about the powerful AVAP TM Dev Studio editor.
|
|
* Code Navigation - Move quickly through your source code.
|