{"id":236707,"date":"2022-02-17T08:00:48","date_gmt":"2022-02-17T16:00:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=236707"},"modified":"2022-02-22T16:12:50","modified_gmt":"2022-02-23T00:12:50","slug":"line-staging-interactive-staging","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/line-staging-interactive-staging\/","title":{"rendered":"Line-staging (Interactive Staging)"},"content":{"rendered":"<p>Line-staging support, a.k.a. interactive staging is <a href=\"https:\/\/developercommunity.visualstudio.com\/t\/git-stage-selected-portion-of-file\/443834\">one of our most popular Git suggestion tickets<\/a>. Visual Studio already supports staging files and now we are taking that to the next level by making it possible to stage chunks of changes in your files right from the editor. Line-staging can be helpful when you need to split changes across different commits. Download the latest Preview version of Visual Studio and start staging chunks of changes right from the IDE.<\/p>\n<p style=\"text-align: center;\"><div  class=\"d-flex justify-content-center\"><a class=\"cta_button_link btn-primary mb-24\" href=\"https:\/\/aka.ms\/vs2022preview\" target=\"_blank\">Download Visual Studio 2022 Preview<\/a><\/div><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236734\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support.png\" alt=\"Image Line staging support\" width=\"3202\" height=\"1619\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support.png 3202w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support-300x152.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support-1024x518.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support-768x388.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support-1536x777.png 1536w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Line-staging-support-2048x1036.png 2048w\" sizes=\"(max-width: 3202px) 100vw, 3202px\" \/><\/a><\/p>\n<p><div class=\"alert alert-info\"><p class=\"alert-divider\"><i class=\"fabric-icon fabric-icon--Info\"><\/i><strong>Important Note<\/strong><\/p>Line-staging support is enabled by default on 17.2 Preview. Including a new Peek Difference and color margin updates on the Editor. You can change the default color margins by following the steps highlighted below under the<a href=\"#color-margin-support\"> Color margin support section<\/a>. If you need to switch off this new feature, you can use CTRL+Q, type \u201cpreview\u201d and open the preview features pane. Scroll to \u201cEnable line-staging support\u201d and toggle the checkbox. Please use the<a href=\"https:\/\/aka.ms\/17.2P1Line-stagingblog\"> Give Feedback link<\/a> to share your feedback.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag.png\"><img decoding=\"async\" class=\"aligncenter wp-image-235809 size-full\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag.png\" alt=\"Image Line-staging feature flag\" width=\"2458\" height=\"198\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag.png 2458w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag-300x24.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag-1024x82.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag-768x62.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag-1536x124.png 1536w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/12\/Line-staging-feature-flag-2048x165.png 2048w\" sizes=\"(max-width: 2458px) 100vw, 2458px\" \/><\/a><\/p>\n<p><\/div><\/p>\n<p>&nbsp;<\/p>\n<h3>17.2 Preview 1 updates<\/h3>\n<p>The following list summarizes the main items we were able to address during this release:<\/p>\n<ul>\n<li><a href=\"#color-margin-support\">Color margin support<\/a> that visualizes Git changes on Editor\u2019s margin and scroll bar<\/li>\n<li><a href=\"#peek-difference-editor-support\">Peek Difference Editor support<\/a> with the ability to navigate between differences<\/li>\n<li><a href=\"#stage-chunks-of-code\">Ability to stage chunks of code<\/a> directly from the editor<\/li>\n<li>Addressed a number of issues and limitations<\/li>\n<\/ul>\n<p>Work is in progress to add the following features:<\/p>\n<ul>\n<li>Ability to stage specific lines within chunks or sections of changes<\/li>\n<li>Ability to un-stage lines and chunks of code<\/li>\n<li>Refresh latency enhancements<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Color margin support<\/h3>\n<p>The first thing you will probably notice in this feature is that the Editor now visualizes Git changes on both the scroll bar and the margin.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines.png\"><img decoding=\"async\" class=\"alignnone wp-image-236716 size-full\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines.png\" alt=\"Image Editor color margines\" width=\"1430\" height=\"578\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines.png 1430w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines-300x121.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines-1024x414.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Editor-color-margines-768x310.png 768w\" sizes=\"(max-width: 1430px) 100vw, 1430px\" \/><\/a><\/p>\n<p>This makes it easy to differentiate between saved and not saved changes that you added, deleted or modified.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-236719\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types.png\" alt=\"Image Color margin types\" width=\"1672\" height=\"137\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types.png 1672w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types-300x25.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types-1024x84.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types-768x63.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Color-margin-types-1536x126.png 1536w\" sizes=\"(max-width: 1672px) 100vw, 1672px\" \/><\/a><\/p>\n<p><div class=\"alert alert-success\"><p class=\"alert-divider\"><i class=\"fabric-icon fabric-icon--Lightbulb\"><\/i><strong>Tip<\/strong><\/p>You can change the default color margins colors by navigating to <strong>Tools &gt; Options &gt; Fonts<\/strong> and Colors and selecting your favorite colors under the Track additions, deletions and modifications in documents under source control.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Customize-color-margins-colors.png\"><img decoding=\"async\" class=\"aligncenter wp-image-236720 size-full\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Customize-color-margins-colors.png\" alt=\"Image Customize color margins colors\" width=\"617\" height=\"426\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Customize-color-margins-colors.png 617w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Customize-color-margins-colors-300x207.png 300w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/a><\/p>\n<p><\/div><\/p>\n<p>&nbsp;<\/p>\n<h3>Peek Difference Editor support<\/h3>\n<p>Color margins are interactive and clicking them triggers the Peek Difference UI where you can view your changes right 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 using the up\/down arrows.<a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI.png\"><img decoding=\"async\" class=\"size-full wp-image-236722 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI.png\" alt=\"Image The Peek Difference UI\" width=\"1248\" height=\"537\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI.png 1248w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI-300x129.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI-1024x441.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/The-Peek-Difference-UI-768x330.png 768w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a><\/p>\n<p>You can also access Peek Difference by right clicking a line with changes and selecting <strong>Peek Difference<\/strong> or by utilizing the <strong>Alt+F8<\/strong> keyboard shortcut.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Peek-Difference-Keyboard-Shortcut.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236723\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Peek-Difference-Keyboard-Shortcut.png\" alt=\"Image Peek Difference Keyboard Shortcut\" width=\"443\" height=\"254\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Peek-Difference-Keyboard-Shortcut.png 443w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Peek-Difference-Keyboard-Shortcut-300x172.png 300w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/a><\/p>\n<p><div class=\"alert alert-success\"><p class=\"alert-divider\"><i class=\"fabric-icon fabric-icon--Lightbulb\"><\/i><strong>Use your preferred diff layout<\/strong><\/p>If you prefer an inline diff, you can use the<strong> Diff Configuration Options<\/strong> gear in the top right corner of the Diff Window and switch to the <strong>Inline Diff Mode<\/strong>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236725\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options.png\" alt=\"Image Difference Configuration Options\" width=\"1248\" height=\"429\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options.png 1248w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options-300x103.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options-1024x352.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Difference-Configuration-Options-768x264.png 768w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a><\/p>\n<p><\/div><\/p>\n<p>&nbsp;<\/p>\n<h3>Stage chunks of code<\/h3>\n<p>You can stage any chunk of code using the Peek Difference by hovering over the change you would like to stage and selecting <strong>Stage Change<\/strong>. Alternatively, you can use the global <strong>Stage<\/strong> button if you would like to stage all the changes you made to a document.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236726\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code.png\" alt=\"Image Stage chunks of code\" width=\"1248\" height=\"422\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code.png 1248w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code-300x101.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code-1024x346.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Stage-chunks-of-code-768x260.png 768w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a><\/p>\n<p>To get a full screen Difference experience, you can choose to switch to the Difference editor by clicking the<strong> Promote to Document<\/strong> option on the top right corner of the Peek Difference or by using the <strong>Ctrl+Alt+Home<\/strong> keyboard shortcut. All the features that the Peek Difference provides are also available on the Difference Editor.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236727\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor.png\" alt=\"Image Switching to the Difference editor\" width=\"1248\" height=\"576\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor.png 1248w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor-300x138.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor-1024x473.png 1024w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Switching-to-the-Difference-editor-768x354.png 768w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a><\/p>\n<p>&nbsp;\n&nbsp;<\/p>\n<h3>Commit staged changes<\/h3>\n<p>Once you finish preparing for your commit by reviewing and staging the changes you would like to include, you can create your commit using the Git Changes window by providing a commit message and clicking<strong> Commit Staged<\/strong>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Committing-Staged-Changes.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-236729\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Committing-Staged-Changes.png\" alt=\"Image Committing Staged Changes\" width=\"374\" height=\"603\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Committing-Staged-Changes.png 374w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/02\/Committing-Staged-Changes-186x300.png 186w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Let us know what you think<\/h3>\n<p>We have benefitted greatly from all the rich feedback we\u2019ve received from you \u2013 thank you! We hope you\u2019ll help us continue to improve by giving the new Line-staging support a try and letting us know what you think by taking the following quick survey:<\/p>\n<p style=\"text-align: center;\"><div  class=\"d-flex justify-content-center\"><a class=\"cta_button_link btn-primary mb-24\" href=\"https:\/\/aka.ms\/17.2P1Line-stagingblog\" target=\"_blank\">Share Your Feedback<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Line-staging support, a.k.a. interactive staging is one of our most popular Git suggestion tickets. Visual Studio already supports staging files and now we are taking that to the next level by making it possible to stage chunks of changes in your files right from the editor. Line-staging can be helpful when you need to split [&hellip;]<\/p>\n","protected":false},"author":4322,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[237,6842,510,431,4381],"class_list":["post-236707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-net","tag-ado","tag-cpp","tag-git","tag-github"],"acf":[],"blog_post_summary":"<p>Line-staging support, a.k.a. interactive staging is one of our most popular Git suggestion tickets. Visual Studio already supports staging files and now we are taking that to the next level by making it possible to stage chunks of changes in your files right from the editor. Line-staging can be helpful when you need to split [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/236707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/4322"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=236707"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/236707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=236707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=236707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=236707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}