You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getstarted/userinterface.md
+53-36Lines changed: 53 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,13 +25,15 @@ VS Code comes with a simple and intuitive layout that maximizes the space provid
25
25
26
26
27
27
28
-
>**Tip:** A Secondary Side Bar is also available to display views opposite the Primary Side Bar. You can show it with `kb(workbench.action.toggleAuxiliaryBar)` and drag a view from the Primary Side Bar to the Secondary Side Bar.
28
+
> [!TIP]
29
+
> A Secondary Side Bar is also available to display views opposite the Primary Side Bar. You can show it with `kb(workbench.action.toggleAuxiliaryBar)` and drag a view from the Primary Side Bar to the Secondary Side Bar.
29
30
30
31
Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.
31
32
32
33
Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region. To learn more about tabbed headers, see the [Tabs](/docs/getstarted/userinterface.md#tabs) section.
33
34
34
-
>**Tip:** You can move the Primary Side Bar to the right hand side by right-clicking the Activity Bar and selecting **Move Primary Side Bar Right** or toggle its visibility (`kb(workbench.action.toggleSidebarVisibility)`).
35
+
> [!TIP]
36
+
> You can move the Primary Side Bar to the right hand side by right-clicking the Activity Bar and selecting **Move Primary Side Bar Right** or toggle its visibility (`kb(workbench.action.toggleSidebarVisibility)`).
35
37
36
38
## Side by side editing
37
39
@@ -52,7 +54,8 @@ By default, editors open to the right-hand side of the active one. You can chang
52
54
53
55
When you have more than one editor open, you can switch between them quickly by holding the `kbstyle(Ctrl)` key (`kbstyle(Cmd)` on macOS) and pressing `kbstyle(1)`, `kbstyle(2)`, or `kbstyle(3)`.
54
56
55
-
>**Tip:** You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.
57
+
> [!TIP]
58
+
> You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.
56
59
57
60
### Editor groups
58
61
@@ -64,7 +67,8 @@ You can see these clearly in the **Open Editors** section at the top of the Expl
64
67
65
68
You can drag and drop editor groups on the workbench, move individual tabs between groups, and quickly close entire groups (**Close All**).
66
69
67
-
>**Note:** VS Code uses editor groups whether or not you have enabled tabs. Without tabs, editor groups are a stack of your open items with the most recently selected item visible in the editor pane.
70
+
> [!NOTE]
71
+
> VS Code uses editor groups whether or not you have enabled tabs. Without tabs, editor groups are a stack of your open items with the most recently selected item visible in the editor pane.
68
72
69
73
### Split in group
70
74
@@ -82,21 +86,23 @@ If you have [folding markers](/docs/editor/codebasics.md#folding) in the editor,
82
86
83
87
84
88
85
-
>**Tip:** You can move the minimap to the left hand side or disable it completely by respectively setting `"editor.minimap.side": "left"` or `"editor.minimap.enabled": false` in the user or workspace [settings](/docs/getstarted/settings.md).
89
+
> [!TIP]
90
+
> You can move the minimap to the left hand side or disable it completely by respectively setting `"editor.minimap.side": "left"` or `"editor.minimap.enabled": false` in the user or workspace [settings](/docs/getstarted/settings.md).
86
91
87
92
## Sticky Scroll
88
93
89
94
Sticky Scroll shows the starting lines of currently visible nested scopes at the top of the editor. It facilitates navigation by indicating where you are in a file and lets you quickly jump back to the top of the current scope.
>**Tip:** You can enable/disable Sticky Scroll with the `"editor.stickyScroll.enabled"` setting.
98
+
> [!TIP]
99
+
> You can enable/disable Sticky Scroll with the `setting(editor.stickyScroll.enabled)` setting.
94
100
95
101
Sticky Scroll uses several different content models to create its headings. It is possible to choose between the outline provider model, the folding provider model, and the indentation model to determine which lines to display in the Sticky Scroll area. If a model is not available for the current language, VS Code falls back to the next model in the order given above. The default model initially used comes from the `setting(editor.stickyScroll.defaultModel)` setting.
96
102
97
103
### Indent guides
98
104
99
-
The editor shows indentation guides (vertical lines) which help you quickly see matching indent levels. If you would like to disable indent guides, you can set `"editor.guides.indentation": false` in your user or workspace [settings](/docs/getstarted/settings.md).
105
+
The editor shows indentation guides (vertical lines) which help you quickly see matching indent levels. If you would like to disable indent guides, you can set `setting(editor.guides.indentation)` to `false` in your user or workspace [settings](/docs/getstarted/settings.md).
100
106
101
107
## Breadcrumbs
102
108
@@ -116,23 +122,27 @@ After you open a folder in VS Code, the contents of the folder are shown in the
116
122
* Move files and folders with drag and drop.
117
123
* Use the context menu to explore all options.
118
124
119
-
>**Tip:** You can drag and drop files into the Explorer view from outside VS Code to copy them. If the explorer is empty, VS Code opens the files instead. You can also copy-paste files from outside VS Code into the Explorer view. With the `setting(explorer.autoOpenDroppedFile)` setting, you to configure whether to automatically open the file or not.
125
+
> [!TIP]
126
+
> You can drag and drop files into the Explorer view from outside VS Code to copy them. If the explorer is empty, VS Code opens the files instead. You can also copy-paste files from outside VS Code into the Explorer view. With the `setting(explorer.autoOpenDroppedFile)` setting, you to configure whether to automatically open the file or not.
120
127
121
128
VS Code works well with other tools that you might use, especially command-line tools. If you want to run a command-line tool in the context of the folder you currently have open in VS Code, right-click the folder and select **Open in Integrated Terminal**.
122
129
123
130
You can also navigate to the location of a file or folder in the native operating system file explorer by right-clicking on a file or folder and selecting **Reveal in File Explorer** on Windows, **Reveal in Finder** on macOS, or **Open Containing Folder** on Linux.
124
131
125
-
>**Tip:** Type `kb(workbench.action.quickOpen)` (**Quick Open**) to quickly search and open a file by its name.
132
+
> [!TIP]
133
+
> Type `kb(workbench.action.quickOpen)` (**Quick Open**) to quickly search and open a file by its name.
126
134
127
-
By default, VS Code excludes some folders from showing in the Explorer view, such as `.git`. Use the `setting(files.exclude)`[setting](/docs/getstarted/settings.md) to configure rules for hiding files and folders from the Explorer view.
135
+
By default, VS Code excludes some folders from showing in the Explorer view, such as `.git`. Use the `setting(files.exclude)` setting to configure rules for hiding files and folders from the Explorer view.
128
136
129
-
>**Tip:** You can hide derived resources files, like `*.meta` in Unity, or `*.js` in a TypeScript project. For Unity to exclude the `*.cs.meta` files, the pattern to choose would be: `"**/*.cs.meta": true`. For TypeScript, you can exclude generated JavaScript for TypeScript files with: `"**/*.js": {"when": "$(basename).ts"}`.
137
+
> [!TIP]
138
+
> You can hide derived resources files, like `*.meta` in Unity, or `*.js` in a TypeScript project. For Unity to exclude the `*.cs.meta` files, the pattern to choose would be: `"**/*.cs.meta": true`. For TypeScript, you can exclude generated JavaScript for TypeScript files with: `"**/*.js": {"when": "$(basename).ts"}`.
130
139
131
140
### Multi-selection
132
141
133
142
You can select multiple files in the Explorer view and Open Editors section to run actions (delete, drag and drop, or open to the side) on multiple items. Hold `kbstyle(Ctrl)` (`kbstyle(Cmd)` on macOS) and select individual files, or hold `kbstyle(Shift)` to select a range of files. If you select two items, you can now also use the context menu **Compare Selected** command to quickly diff two files.
134
143
135
-
**Note:** In earlier VS Code releases, clicking with the `kbstyle(Ctrl)` (`kbstyle(Cmd)` on macOS) key pressed, would open a file in a new editor group to the side. If you still want this behavior, you can use the `setting(workbench.list.multiSelectModifier)` setting to change multi-selection to use the `kbstyle(Alt)` key.
144
+
> [!NOTE]
145
+
> In earlier VS Code releases, clicking with the `kbstyle(Ctrl)` (`kbstyle(Cmd)` on macOS) key pressed, would open a file in a new editor group to the side. If you still want this behavior, you can use the `setting(workbench.list.multiSelectModifier)` setting to change multi-selection to use the `kbstyle(Alt)` key.
136
146
137
147
```json
138
148
"workbench.list.multiSelectModifier": "alt"
@@ -182,7 +192,8 @@ From an entry you can:
182
192
* Restore the contents.
183
193
* Delete or rename the entry.
184
194
185
-
> **Tip**: if you've accidentally deleted a file, you can restore it from the local history by using the **...** > **Local History: Find Entry to Restore** action in the Timeline view, and then select your file from the Quick Pick.
195
+
> [!TIP]
196
+
> If you've accidentally deleted a file, you can restore it from the local history by using the **...** > **Local History: Find Entry to Restore** action in the Timeline view, and then select your file from the Quick Pick.
186
197
187
198
You can configure these settings for working with the local history:
188
199
@@ -218,7 +229,8 @@ The Explorer view is only one of the views available in VS Code. There are also
218
229
***Extensions** - Install and manage your extensions within VS Code.
219
230
***Custom views** - Views contributed by extensions.
220
231
221
-
> **Tip:** You can open any view using the **View: Open View** command.
232
+
> [!TIP]
233
+
> You can open any view using the **View: Open View** command.
222
234
223
235
224
236
@@ -264,7 +276,8 @@ Alternately, you can modify the user settings directly in the `settings.json` fi
>**Note**: Workspace settings override user settings and are useful for sharing project-specific settings across a team.
279
+
> [!NOTE]
280
+
> Workspace settings override user settings and are useful for sharing project-specific settings across a team.
268
281
269
282
### Zen Mode
270
283
@@ -312,15 +325,16 @@ When you have more open items than can fit in the title area, you can use the **
312
325
313
326
There is also a scroll bar between the tab and editor regions to drag editors into view. You can increase the height of the scroll bar to make it easier to drag by setting **Workbench > Editor: Title Scrollbar Sizing** (`setting(workbench.editor.titleScrollbarSizing)`) to `large`.
314
327
315
-
If you don't want to use tabs, you can disable the feature by setting the `setting(workbench.editor.showTabs)`[setting](/docs/getstarted/settings.md) to `single`:
328
+
If you don't want to use tabs, you can disable the feature by setting the `setting(workbench.editor.showTabs)` setting to `single`:
316
329
317
330
```json
318
331
"workbench.editor.showTabs": "single"
319
332
```
320
333
321
334
See the section below to optimize VS Code for [working without Tabs](/docs/getstarted/userinterface.md#working-without-tabs).
322
335
323
-
> **Tip**: Double-click in the editor title area to quickly create a new tab.
336
+
> [!TIP]
337
+
> Double-click in the editor title area to quickly create a new tab.
324
338
325
339
### Tab ordering
326
340
@@ -336,9 +350,22 @@ You can reorder tabs by dragging and dropping them.
336
350
337
351
If you'd like an editor tab to always be visible, you can pin it to the editor tab bar. Learn more about pinning tabs in the [Custom Layout](/docs/editor/custom-layout.md#pinned-tabs) article.
338
352
353
+
### Preview mode
354
+
355
+
When you single-click or select a file in the Explorer view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing files and don't want every visited file to have its own tab. When you start editing the file or use double-click to open the file from the Explorer, a new tab is dedicated to that file.
356
+
357
+
Preview mode is indicated by italics in the tab heading:
If you prefer not to use preview mode and always create a new tab, you can control the behavior with these settings:
362
+
363
+
*`setting(workbench.editor.enablePreview)` - to globally enable or disable preview editors
364
+
*`setting(workbench.editor.enablePreviewFromQuickOpen)` - to enable or disable preview editors when opened from **Quick Open**
365
+
339
366
### Wrapped tabs
340
367
341
-
To see more editor tabs, you can use the **wrapped tab** layout, where editor tabs wrap to fill multiple rows above the editor region. Enable wrapped tabs with the **Workbench > Editor: Wrap Tabs** (`setting(workbench.editor.wrapTabs)`) [setting](/docs/getstarted/settings.md).
368
+
To see more editor tabs, you can use the **wrapped tab** layout, where editor tabs wrap to fill multiple rows above the editor region. Enable wrapped tabs with the **Workbench > Editor: Wrap Tabs** (`setting(workbench.editor.wrapTabs)`) setting.
342
369
343
370
344
371
@@ -376,20 +403,8 @@ The following examples use the `${extname}` variable for the file `tests/editor.
376
403
*`${extname(-1)}` => test
377
404
*`${extname(-2)}` => ts
378
405
379
-
> **Note**: The custom tab labels also apply in the Open Editors view and in [Quick Open](/docs/getstarted/tips-and-tricks.md#quick-open) (`kb(workbench.action.quickOpen)`).
380
-
381
-
## Preview mode
382
-
383
-
When you single-click or select a file in the Explorer view, it is shown in a preview mode and reuses an existing tab. This is useful if you are quickly browsing files and don't want every visited file to have its own tab. When you start editing the file or use double-click to open the file from the Explorer, a new tab is dedicated to that file.
384
-
385
-
Preview mode is indicated by italics in the tab heading:
If you prefer not to use preview mode and always create a new tab, you can control the behavior with these settings:
390
-
391
-
*`setting(workbench.editor.enablePreview)` - to globally enable or disable preview editors
392
-
*`setting(workbench.editor.enablePreviewFromQuickOpen)` - to enable or disable preview editors when opened from **Quick Open**
406
+
> [!NOTE]
407
+
> The custom tab labels also apply in the Open Editors view and in [Quick Open](/docs/getstarted/tips-and-tricks.md#quick-open) (`kb(workbench.action.quickOpen)`).
393
408
394
409
## Grid editor layout
395
410
@@ -405,13 +420,14 @@ There are a predefined set of editor layouts in the **View** > **Editor Layout**
By default, editors that open to the side (for example, by selecting the editor toolbar **Split Editor** action) 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`.
423
+
By default, editors that open to the side (for example, by selecting the editor toolbar **Split Editor** action) open to the right-hand side of the active editor. If you prefer to open editors below the active one, set `setting(workbench.editor.openSideBySideDirection)` to `down`.
409
424
410
425
There are many keyboard commands for adjusting the editor layout by using the keyboard. If you prefer to use the mouse, you can use drag and drop to split the editor into any direction:
411
426
412
427
413
428
414
-
>**Pro Tip**: If you press and hold the `kbstyle(Alt)` key while hovering over the toolbar action to split an editor, it offers to split to the other orientation. This is a fast way to split either to the right or to the bottom.
429
+
> [!TIP]
430
+
> If you press and hold the `kbstyle(Alt)` key while hovering over the toolbar action to split an editor, it offers to split to the other orientation. This is a fast way to split either to the right or to the bottom.
415
431
416
432
417
433
@@ -474,7 +490,8 @@ The settings `setting(window.openFoldersInNewWindow)` and `setting(window.openFi
474
490
475
491
If configured to be `default`, VS Code decides about reusing or opening a new window, based on the context from where the open request was made. Flip this to `on` or `off` to always behave the same. For example, if you feel that picking a file or folder from the **File** menu should always open in a new window, set this to `on`.
476
492
477
-
> **Note**: There are cases where this setting is ignored, such as when you use the `-new-window` or `-reuse-window` command-line option.
493
+
> [!NOTE]
494
+
> There are cases where this setting is ignored, such as when you use the `-new-window` or `-reuse-window` command-line option.
478
495
479
496
The `setting(window.restoreWindows)` setting informs VS Code about how to restore the opened windows of your previous session. By default, VS Code restores all windows you worked on during your previous session (setting: `all`). Change this setting to `none` to never reopen any windows and always start with an empty VS Code instance. Change it to `one` to reopen the last opened window you worked on, or to `folders` to only restore windows that had folders opened.
480
497
@@ -489,7 +506,7 @@ Now that you know the overall layout of VS Code, start to customize the editor t
489
506
490
507
### How can I change the color of the indent guides?
491
508
492
-
The indent guide colors are customizable, as are most VS Code user interface elements. To [customize](/api/references/theme-color.md) the indent guides color for your active Color Theme, use the `setting(workbench.colorCustomizations)`[setting](/docs/getstarted/settings.md) and modify the `editorIndentGuide.background` value.
509
+
The indent guide colors are customizable, as are most VS Code user interface elements. To [customize](/api/references/theme-color.md) the indent guides color for your active Color Theme, use the `setting(workbench.colorCustomizations)` setting and modify the `editorIndentGuide.background` value.
493
510
494
511
For example, to make the indent guides bright blue, add the following to your `settings.json`:
0 commit comments