CINXE.COM
GitHub and VS Code | Bring your favorite tools to all the places you code
<!doctype html> <html> <head> <title>GitHub and VS Code | Bring your favorite tools to all the places you code</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-language" content="en-us"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="google-site-verification" content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY" /> <link rel="stylesheet" type="text/css" href=https://vscode.github.com/assets/css/style.css?89c166e0e7289257f36b8954067a11a3e916dd8f /> <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@Code"> <meta name="twitter:creator" content="@Code"> <meta name="twitter:title" content="GitHub and VS Code"> <meta name="twitter:description" content="Bring your favorite tools to all the places you code."> <meta name="twitter:image" content="https://vscode.github.com/assets/img/social-card.png?89c166e0e7289257f36b8954067a11a3e916dd8f"> <meta property="og:url" content="https://vscode.github.com"> <meta property="og:type" content="website"> <meta property="og:title" content="GitHub and VS Code"> <meta property="og:description" content="Bring your favorite tools to all the places you code."> <meta property="og:image" content=https://vscode.github.com/assets/img/social-card.png?89c166e0e7289257f36b8954067a11a3e916dd8f> <meta property="og:image:secure_url" content="https://vscode.github.com/assets/img/social-card.png?89c166e0e7289257f36b8954067a11a3e916dd8f"> <meta name="ha-url" content="https://collector.githubapp.com/github-vscode-site/collect"> <script src="https://analytics.githubassets.com/hydro-marketing.min.js"></script> </head> <header> <div class="container-lg pt-6 mb-2 px-3 text-center"> <h1 class="mx-auto"> <img src="assets/img/github-vscode-icon.svg" alt="GitHub and VS Code" width="84" height="84"> </h1> </div> </header> <body class="bg-gray-dark text-white"> <div class="container-lg p-responsive px-2 text-center"> <h1 class="col-md-7 mx-auto mb-3 h000-mktg text-white lh-condensed"> GitHub and Visual Studio Code </h1> <p class="col-md-7 mx-auto mb-4 f3 text-gray-light"> Bring your workflows closer to your code. Learn how Visual Studio Code and GitHub are better together. </p> <p class="col-md-7 mx-auto mb-8 text-gray-light"> <a class="btn-mktg btn-transparent mt-4 mb-1 btn-large-mktg no-underline" href="https://code.visualstudio.com" role="button">Download Visual Studio Code</a><br/> Free for Windows, macOS, and Linux </p> </div> <div class="container-lg p-responsive px-2 text-center my-6"> <h1 class="h1 my-2">Get started with GitHub in Visual Studio Code</h1> <p class="text-gray f3">Check out our <a class="text-blue" href="https://docs.microsoft.com/en-us/learn/modules/introduction-to-github-visual-studio-code/">20-minute tutorial</a> to get the best of GitHub in the editor.</p> </div> <div class="container-lg p-responsive px-2 text-center my-6"> <h1 class="h1 my-2">Our top 20 tips and tricks</h1> </div> <div> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">01</span> <h1 class="ml-3 mb-2 lh-condensed">Codespaces</h1> <p class="mb-4 color-gray-3">No editor, no problem. Code in a browser with a real VS Code experience, powered by GitHub Codespaces.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://github.com/features/codespaces?WT.mc_id=vscode-gcom-cxa">GitHub Codespaces</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/3yF_UA90eus frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">02</span> <h1 class="ml-3 mb-2 lh-condensed">Clone And Code</h1> <p class="mb-4 color-gray-3">You can directly clone a repo from Visual Studio Code. Authenticate with your GitHub account and clone any repo you want. VS Code takes care of setting your remote so you can clone, code and push in no time flat. </p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/bz1KauFlbQI frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">03</span> <h1 class="ml-3 mb-2 lh-condensed">Publish Your Project</h1> <p class="mb-4 color-gray-3">Publish any project directly to GitHub without having to create a repo first. VS Code will create the repo for you and give you control over whether or not it should be public or private.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/3BBvBwDW4CY frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">04</span> <h1 class="ml-3 mb-2 lh-condensed">Integrated Source Control View</h1> <p class="mb-4 color-gray-3">The source control view tracks your file changes and makes it easy to commit and push those changes. Add a commit message, mention another user in the repo, and click on 'sync changes' in the status bar. This will pull any remote changes down, and push your commits upstream.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/TUYt4oXLxQs frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">05</span> <h1 class="ml-3 mb-2 lh-condensed">Branching</h1> <p class="mb-4 color-gray-3">From the status bar, you can view all branches and easily switch to another one. From the command palette, you can also checkout another branch, create a new one, or rename a branch. Branch away!</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/9NVFMw-MKt0 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">06</span> <h1 class="ml-3 mb-2 lh-condensed">Stashing</h1> <p class="mb-4 color-gray-3">Temporarily set aside the code changes you already made with a Git stash then get back to them later!</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/odj71GP0Z1Q frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">07</span> <h1 class="ml-3 mb-2 lh-condensed">Stage Commits</h1> <p class="mb-4 color-gray-3">The Source Control view in VS Code lets you stage specific changes only, so you can control what's part of your commit and what's still a WIP (Work In Progress) Then click on ✔️ to make a commit.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/3n-_lSJ48M4 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">08</span> <h1 class="ml-3 mb-2 lh-condensed">Merge Your Way</h1> <p class="mb-4 color-gray-3">Do you most commonly merge, squash/merge, or rebase/merge? Well, from the GitHub Pull Request and Issues extension, you can choose either merge option.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/LleABh-TGLo frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">09</span> <h1 class="ml-3 mb-2 lh-condensed">Handle Merge Conflicts</h1> <p class="mb-4 color-gray-3">VS Code will recognize merge conflicts, highlight the differences, and make it easy to choose the current change or the incoming change. If you have multiple changes, you can search for 'Merge Conflict' in the command palette and take action on all conflicts.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/ybCxPHzRJfA frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">10</span> <h1 class="ml-3 mb-2 lh-condensed">Change Your Diff View</h1> <p class="mb-4 color-gray-3">Some people prefer a to see their diff's side-by-side and some prefer an inline view. Get both in VS Code. This setting persists when it's changed so you can set it and forget it.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/aVmGwnCjRto frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">11</span> <h1 class="ml-3 mb-2 lh-condensed">Jump Directly To GitHub</h1> <p class="mb-4 color-gray-3">Sometimes you're just knee deep in source code and need to switch over to GitHub. With the <a href='https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github?WT.mc_id=vscode-gcom-cxa'>GitHub Pull Requests and Issues</a> extension, you can copy a permalink or directly open a permalink in GitHub so you don't lose your place.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/aXZl6sYQskY frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">12</span> <h1 class="ml-3 mb-2 lh-condensed">Create Issues</h1> <p class="mb-4 color-gray-3">Do you find yourself putting //TODO comments throughout your code and then forgetting to...do them? With the GitHub Pull Requests and Issues extension, you can make those comments actionable and create GH issues directly from code comments.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/VllCkboZylA frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">13</span> <h1 class="ml-3 mb-2 lh-condensed">Manage Issues</h1> <p class="mb-4 color-gray-3">View issues from GitHub directly from VS Code. Create custom queries using the same GitHub filter syntax you already know. Your issues organized your way.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/q_PqHX9Aki0 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">14</span> <h1 class="ml-3 mb-2 lh-condensed">Request A Review</h1> <p class="mb-4 color-gray-3">You can request a review on your PR right from VS Code using the GitHub Pull Requests and Issues extension. Open the PR from the Github Pull Requests explorer and assign away.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/q1CSkYTeo-0 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">15</span> <h1 class="ml-3 mb-2 lh-condensed">Keep Track of PRs</h1> <p class="mb-4 color-gray-3">Choose the categories you see in the GitHub Pull Requests and Issues tree view. Customize it and make sure you never lose track of PRs again.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/gqBDz5cFeSc frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">16</span> <h1 class="ml-3 mb-2 lh-condensed">Code Reviews</h1> <p class="mb-4 color-gray-3">View PRs. Check out branches. Add comments. Merge and delete branches from the editor.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/RFonwEAZCPo frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">17</span> <h1 class="ml-3 mb-2 lh-condensed">Time Travel</h1> <p class="mb-4 color-gray-3">You can see the Git commit history of a specific file in the Timeline view. Choosing a commit opens up the diff view of the changes from that commit. Easily copy the commit Id or commit message to help you go to important points in your code's </p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/github?WT.mc_id=vscode-gcom-cxa">GitHub extension for VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/BQv5eqLLGX8 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">18</span> <h1 class="ml-3 mb-2 lh-condensed">GitLens</h1> <p class="mb-4 color-gray-3">Get in-line blame annotations and hover information for recent commits, search through commits, visualize and compare commits across branches, and so much more. <a href='https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens?WT.mc_id=vscode-gcom-cxa'>GitLens</a> is a must-have extension if you're using version control in VS Code.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens?WT.mc_id=vscode-gcom-cxa">GitLens extension</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/_cMHkFXw3qc frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">19</span> <h1 class="ml-3 mb-2 lh-condensed">Sign Commits</h1> <p class="mb-4 color-gray-3">Use the integrated terminal in VS Code for advanced actions like GPG signing your commits so you can get that big green "verified" badge.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/2ISu2KTPzuQ frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> <div class="list-container"> <div class="d-flex flex-column flex-md-row flex-items-center"> <div class="flex-1 video-description"> <span class="video-counter">20</span> <h1 class="ml-3 mb-2 lh-condensed">Check Under The Hood</h1> <p class="mb-4 color-gray-3">Curious to see the Git commands VS Code is doing? You can always peek under the hood. The full output of what VS Code is doing with Git is always available for you in case you need it.</p> <div class="text-md-right"> <a class="video-cta not-underline-none" href="https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=vscode-gcom-cxa">Using Git in VS Code</a> </div> </div> <div class="flex-grow-0 p-4 video-container"> <div class="iframe-container"> <iframe src=https://www.youtube-nocookie.com/embed/L3tCzFc77A8 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> <hr class="my-8 mx-auto col-md-1"> </div> <div class="col-md-6 mx-auto text-center text-gray-lighter"> <p> <a href="https://help.github.com/articles/github-privacy-statement/" class="mr-4">Privacy Policy</a> </p> </div> <footer class="mb-6 px-3 text-gray text-center alt-text-small"> <p>© 2022 GitHub, Inc. All rights reserved.</p> </footer> </body> </html>