Skip to content

Commit e467dce

Browse files
author
Jill Grant
authored
Merge pull request #12954 from GitHubber17/262389-f
Freshness: Visual Studio 17.10
2 parents b592382 + 4c5f428 commit e467dce

9 files changed

+45
-36
lines changed

docs/ide/reference/options-text-editor-advanced.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Selected by default, this option enables the editor to suggest possible completi
5353

5454
## Click to peek in margin
5555

56-
The **Single click** setting is selected by default. The settings you choose from allow you to customize how Peek Definition works when you use it to display the differences between Git commits. You can change the default **Single click** setting to **Double click**, or you can select **None** to turn off the [Peek Difference UI](../../version-control/git-line-staging.md#peek-difference-support).
56+
The **Single click** setting is selected by default. The settings you choose from allow you to customize how Peek Definition works when you use it to display the differences between Git commits. You can change the default **Single click** setting to **Double click**, or you can select **None** to turn off the [Peek Difference UI](../../version-control/git-line-staging.md#view-staged-changes-with-peek-difference).
5757

5858
::: moniker-end
5959

docs/version-control/git-line-staging.md

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,89 @@
22
title: Stage lines of code in Visual Studio
33
titleSuffix: ""
44
description: Stage multiple lines of code at the same time or split changes across different commits by using Git from directly within Visual Studio.
5-
ms.date: 05/16/2023
6-
ms.topic: how-to
5+
ms.date: 08/22/2024
6+
ms.topic: concept-article
77
author: ghogen
88
ms.author: ghogen
99
ms.manager: mijacobs
1010

1111
ms.subservice: general-ide
1212
monikerRange: vs-2022
13+
14+
#customer intent: As a developer, I want to use Git features in Visual Studio so I can stage multiple lines of code at the same time or split changes across different commits.
1315
---
16+
1417
# Stage lines of code in Visual Studio
1518

1619
Line-staging support, also known as [interactive staging](https://git-scm.com/book/en/v2/Git-Tools-Interactive-Staging), is available in Visual Studio 2022 [version 17.3](/visualstudio/releases/2022/release-notes-v17.3) and later. Line-staging lets you stage chunks of changes in your files right from the code editor. Line staging can also be helpful when you want to split changes across different commits.
1720

18-
:::image type="content" source="media/vs-2022/git-line-staging.png" alt-text="Screenshot of an example of line-staging support in Visual Studio 2022." lightbox="media/vs-2022/git-line-staging.png":::
21+
:::image type="content" source="media/vs-2022/git-line-staging.png" border="false" alt-text="Screenshot of an example of Git line-staging support in Visual Studio 2022." lightbox="media/vs-2022/git-line-staging.png":::
1922

20-
Starting with Visual Studio 2022 [version 17.6](/visualstudio/releases/2022/release-notes/), you can use the hover option to also *unstage* changes, line by line.
23+
Starting with Visual Studio 2022 [version 17.6](/visualstudio/releases/2022/release-notes-v17.6), you can use the hover option to also *unstage* changes, line by line.
2124

22-
:::image type="content" source="media/vs-2022/git-line-unstaging.png" alt-text="Screenshot of an example of how to unstage changes in Visual Studio 2022.":::
25+
:::image type="content" source="media/vs-2022/git-line-unstaging.png" border="false" alt-text="Screenshot of an example of how to unstage changes for Git in Visual Studio 2022.":::
2326

24-
## Color margin support
27+
## Observe staged changes with color margins
2528

26-
The first thing you might notice about line-staging support is how the editor visualizes Git changes on both the scroll bar and in the margin.
29+
The first thing you might notice about line-staging support is how the editor visualizes Git changes in the scroll bar and also in the margin.
2730

28-
:::image type="content" source="media/vs-2022/git-color-margins.png " alt-text="Screenshot of the color margins in the Visual Studio 2022 editor." lightbox="media/vs-2022/git-color-margins.png":::
31+
:::image type="content" source="media/vs-2022/git-color-margins.png" border="false" alt-text="Screenshot of the color margins in the Visual Studio 2022 editor." lightbox="media/vs-2022/git-color-margins.png":::
2932

30-
The colors and annotations make it easy to differentiate between saved and unsaved changes that you've added, deleted, or modified.
33+
The colors and annotations make it easy to differentiate between saved and unsaved changes that you added, deleted, or modified.
3134

32-
:::image type="content" source="media/vs-2022/git-color-margins-differentiated.png " alt-text="Screenshot of differentiated and annotated color margin examples in Visual Studio 2022." lightbox="media/vs-2022/git-color-margins-differentiated.png":::
35+
:::image type="content" source="media/vs-2022/git-color-margins-differentiated.png" border="false" alt-text="Screenshot of differentiated and annotated color margin examples in Visual Studio 2022." lightbox="media/vs-2022/git-color-margins-differentiated.png":::
3336

34-
> [!TIP]
35-
> You can change the colors that Visual Studio displays to help you manage changes. Go to **Tools** > **Options** > **Environment** > **Fonts and Colors** and then choose from the following options:
36-
> - Track additions in documents under source control
37-
> - Track deletions in documents under source control
38-
> - Track modifications in documents under source control
39-
>
40-
> :::image type="content" source="media/vs-2022/tools-options-fonts-colors-track-source-control.png" alt-text="Screenshot of the Options dialog box where you can change the colors Visual Studio uses for source control.":::
37+
### Configure color margin settings
38+
39+
You can change the colors that Visual Studio displays to help you manage changes. In the **Tools** > **Options** dialog, go to the **Environment** > **Fonts and Colors** section, and configure the following **Display items** options:
40+
41+
- **Track additions in documents under source control**
42+
- **Track deletions in documents under source control**
43+
- **Track modifications in documents under source control**
44+
45+
:::image type="content" source="media/vs-2022/tools-options-fonts-colors-track-source-control.png" border="false" alt-text="Screenshot of the Options dialog where you can change the colors Visual Studio uses for source control.":::
4146

42-
## Peek Difference support
47+
## View staged changes with Peek Difference
4348

44-
Color margins are interactive. When you select a color margin, Visual Studio opens the **Peek Difference** user interface (UI) where you can view your changes in the editor without switching context. The Peek Difference UI summarizes the number of added and removed lines and makes it easy to navigate between changes by using the Up and Down arrows.
49+
Color margins are interactive. When you select a color margin, Visual Studio opens the **Peek Difference** user interface (UI) where you can view your changes in the editor without switching context. The Peek Difference UI summarizes the number of added and removed lines and makes it easy to switch between changes by using the Up and Down arrows.
4550

46-
:::image type="content" source="media/vs-2022/git-peek-difference.png" alt-text="Screenshot of the Peek Difference user interface in Visual Studio as it relates to source control." lightbox="media/vs-2022/git-peek-difference.png":::
51+
:::image type="content" source="media/vs-2022/git-peek-difference.png" border="false" alt-text="Screenshot of the Peek Difference user interface in Visual Studio as it relates to source control." lightbox="media/vs-2022/git-peek-difference.png":::
4752

48-
You can also access Peek Difference when you right-click a line that includes changes. A context menu appears where you can select **Peek Difference** from it. Or, you can use the **Alt**+**F8** keyboard shortcut.
53+
You can also access Peek Difference when you right-click a line of code that has changes. You can select **Peek Difference** from the context menu or use the **Alt**+**F8** keyboard shortcut.
4954

50-
:::image type="content" source="media/vs-2022/git-peek-difference-context-menu-inline.png" alt-text="Screenshot of the right-click context menu in Visual Studio where you can select Peek Difference." lightbox="media/vs-2022/git-peek-difference-context-menu-expanded.png":::
55+
:::image type="content" source="media/vs-2022/git-peek-difference-context-menu-inline.png" border="false" alt-text="Screenshot of the right-click context menu in Visual Studio where you can select Peek Difference." lightbox="media/vs-2022/git-peek-difference-context-menu-expanded.png":::
5156

5257
> [!NOTE]
5358
> If you prefer an inline difference view, you can use the **Settings** control in the top-right corner of the **Diff** editor to switch to **Inline mode**.
5459
>
55-
> :::image type="content" source="media/vs-2022/git-diff-inline-mode.png" alt-text="Screenshot of the Diff options available from the gear icon, where you can select the 'Inline mode' option." lightbox="media/vs-2022/git-diff-inline-mode.png":::
60+
> :::image type="content" source="media/vs-2022/git-diff-inline-mode.png" border="false" alt-text="Screenshot of the Diff options available from the gear icon, where you can select the 'Inline mode' option." lightbox="media/vs-2022/git-diff-inline-mode.png":::
5661
57-
> [!TIP]
58-
> You can modify how Visual Studio interacts with code changes in the Peek Difference UI by using the **Click to peek in margin** option from **Tools** > **Options** > **Text Editor** > **Advanced**.
59-
> :::image type="content" source="media/vs-2022/text-editor-option-peek-in-margin.png" alt-text="Screenshot of the 'Click to peek in margin' setting.":::
60-
> For example, you can change the default **Single click** setting to **Double click**, or you can select **None** to turn off the Peek Difference UI.
62+
### Configure Peek Difference settings
6163

62-
## Stage chunks of code
64+
You can modify how Visual Studio interacts with code changes in the Peek Difference UI. The **Click to peek in margin** option is available on the **Tools** > **Options** > **Text Editor** > **Advanced** page.
65+
66+
:::image type="content" source="media/vs-2022/text-editor-option-peek-in-margin.png" border="false" alt-text="Screenshot of the 'Click to peek in margin' Text Editor setting.":::
6367

64-
You can stage any chunk of code by using the Peek Difference user interface (UI). To do so, hover over the change you want to stage and select **Stage Change**. Alternatively, use the global **Stage** button if you want to stage *all* the changes you made to a document.
68+
You can change the default **Single click** setting to **Double click**, or you can select **None** to turn off the Peek Difference UI.
6569

66-
:::image type="content" source="media/vs-2022/git-stage-change.png" alt-text="Screenshot of the Stage Change option in Visual Studio 2022." lightbox="media/vs-2022/git-stage-change.png":::
70+
## Stage chunks of code
6771

68-
If you prefer a full-screen difference view, you can switch to the **Diff** editor. Here's how: select the **Promote to Document** button :::image type="icon" source="media/vs-2022/promote-document-button.png" border="false"::: on the top-right corner of the [**Peek Difference** UI](#peek-difference-support). Or, you can use the **Ctrl**+**Alt**+**Home** keyboard shortcut. All the features that the Peek Difference UI provides are also available in the **Diff** editor.
72+
You can stage any chunk of code by using the Peek Difference UI. Hover over the change to stage and select **Stage Change**. If you want to stage *all* the changes you made to a document, you can use the global **Stage** action.
6973

70-
:::image type="content" source="media/vs-2022/git-stage-change-difference.png" alt-text="Screenshot of the Stage Change difference view in Visual Studio 2022." lightbox="media/vs-2022/git-stage-change-difference.png":::
74+
:::image type="content" source="media/vs-2022/git-stage-change.png" border="false" alt-text="Screenshot of the Stage Change option in Visual Studio 2022." lightbox="media/vs-2022/git-stage-change.png":::
75+
76+
> [!NOTE]
77+
> If you prefer a full-screen difference view, you can switch to the **Diff** editor with the **Promote to Document** :::image type="icon" source="media/vs-2022/promote-document-button.png" border="false"::: icon at the top-right of the [**Peek Difference** UI](#view-staged-changes-with-peek-difference), or use the **Ctrl**+**Alt**+**Home** keyboard shortcut. All features provided by the Peek Difference UI are also available in the **Diff** editor. The following image shows the **Diff** editor view:
78+
>
79+
> :::image type="content" source="media/vs-2022/git-stage-change-difference.png" border="false" alt-text="Screenshot of the Stage Change difference view in Visual Studio 2022." lightbox="media/vs-2022/git-stage-change-difference.png":::
7180
7281
## Commit staged changes
7382

74-
After you've prepared your commit by reviewing and staging the changes you want to include, you can create your commit by using the **Git Changes** window. Next, enter a commit message and then select **Commit Staged**.
83+
After you prepare your commit by reviewing and staging the desired changes, you can create your commit by using the **Git Changes** window. Enter a commit message and select **Commit Staged** to complete the process:
7584

76-
:::image type="content" source="media/vs-2022/git-commit-staged-changes-inline.png" alt-text="Screenshot of the Git Changes dialog in Visual Studio 2022." lightbox="media/vs-2022/git-commit-staged-changes-expanded.png":::
85+
:::image type="content" source="media/vs-2022/git-commit-staged-changes-inline.png" border="false" alt-text="Screenshot of the Git Changes dialog in Visual Studio 2022." lightbox="media/vs-2022/git-commit-staged-changes-expanded.png":::
7786

7887
## Related content
7988

8089
- [Push to remote](git-push-remote.md)
81-
- [Git experience in Visual Studio](git-with-visual-studio.md)
90+
- Learn [about Git in Visual Studio](git-with-visual-studio.md)
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)