GitHub Classroom and VSCode Extension

Published Aug 12 2021 11:45 PM 1,984 Views
Microsoft

Visual Studio Code and GitHub Classroom for a seamless teaching and learning experience with our latest extension. Visual Studio Code extensions let you add additional tooling to your base installation to best support your workflow. This GitHub Classroom extension for Visual Studio Code provides a simplified introduction to Git, GitHub Classroom, and Visual Studio Code, while providing students with key GitHub Classroom capabilities, like integrated autograding and live collaboration.

Learn with Visual Studio Code

Image displaying Student Learning Loop workflow via Visual Studio Code extension

GitHub Classroom aims to make it as simple as possible for students to get started with GitHub. As a part of this effort, our extension for Visual Studio Code provides a student-centric experience focused on making it even easier for students to manage their assignments.

Students can either self-install the extension and import their assignments, or use the one-click “Open in Visual Studio Code” experience from any assignment in which a teacher enables Visual Studio Code as an editor.

Once in the extension, students can browse their code, edit, and commit changes, submit their assignment, and see their integrated autograding results. Also, for group projects and office hours, students can use Microsoft Live Share to collaborate with their group members and/or TAs!

Read more on how to get started in the GitHub Classroom docs!

screenshot of "introduction to Python" in Visual Studio Code extension

Teach with Visual Studio Code

Image of Teaching Loop workflow using GitHub Classroom Visual Studio Code extension

Rather than spending a lot of time in office hours setting up student machines, The GitHub teams have added an option for teachers to include a magic “Open in Visual Studio Code” button on student assignments. Once a student clicks this button, the process will handle installing Visual Studio Code and the extension if needed. It will then open up directly to that assignment, utilizing Visual Studio Code as the preferred editor for the students assignment, As a educator you simply need to select the Visual Studio Code option when creating a new assignment.

Screenshot of Visual Studio Code option

Now, all student repositories will include the badge below!

Screenshot showing Visual Studio Code badge

Get started today

As a educator or student, you can install the extension today via the Visual Studio Code Marketplace!

Educators can also experiment with creating Visual Studio Code enabled assignments by creating a new assignment via GitHub Classroom.

If you interested in all things GitHub head over to the GitHub Blog

1 Comment
%3CLINGO-SUB%20id%3D%22lingo-sub-2644197%22%20slang%3D%22en-US%22%3EGitHub%20Classroom%20and%20VSCode%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2644197%22%20slang%3D%22en-US%22%3E%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CA%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3E%20Visual%20Studio%20Code%3C%2FA%3E%20and%3CA%20href%3D%22http%3A%2F%2Fclassroom.github.com%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3E%20GitHub%20Classroom%3C%2FA%3E%20for%20a%20seamless%20teaching%20and%20learning%20experience%20with%20our%20latest%26nbsp%3B%3CA%20style%3D%22color%3A%20%230366d6%3B%20text-decoration-line%3A%20none%3B%22%20href%3D%22https%3A%2F%2Faka.ms%2Fclassroom-vscode-ext%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eextension.%3C%2FA%3E%20Visual%20Studio%20Code%20extensions%20let%20you%20add%20additional%20tooling%20to%20your%20base%20installation%20to%20best%20support%20your%20workflow.%20This%20GitHub%20Classroom%20extension%20for%20Visual%20Studio%20Code%20provides%20a%20simplified%20introduction%20to%20Git%2C%20GitHub%20Classroom%2C%20and%20Visual%20Studio%20Code%2C%20while%20providing%20students%20with%20key%20GitHub%20Classroom%20capabilities%2C%20like%20integrated%20autograding%20and%20live%20collaboration.%3C%2FP%3E%0A%3CH2%20id%3D%22learn-with-visual-studio-code%22%20style%3D%22margin-bottom%3A%2016px%3B%20font-weight%3A%20600%3B%20font-size%3A%201.5em%3B%20font-family%3A%20'Inter%20UI'%2C%20sans-serif%3B%20line-height%3A%201.25%3B%20padding-bottom%3A%200.3em%3B%20border-bottom%3A%201px%20solid%20%23eaecef%3B%20color%3A%20%2324292e%3B%22%20id%3D%22toc-hId--382001776%22%20id%3D%22toc-hId--382001776%22%20id%3D%22toc-hId--382001776%22%20id%3D%22toc-hId--382001776%22%3ELearn%20with%20Visual%20Studio%20Code%3C%2FH2%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CIMG%20style%3D%22box-sizing%3A%20content-box%3B%20border-style%3A%20none%3B%22%20class%3D%22alignleft%20size-large%20wp-image-59332%22%20src%3D%22https%3A%2F%2Fgithub.blog%2Fwp-content%2Fuploads%2F2021%2F08%2FGitHub-Classroom-VS-Code_fig-1-1.png%3Fw%3D1024%26amp%3Bresize%3D1024%252C559%22%20border%3D%220%22%20alt%3D%22Image%20displaying%20Student%20Learning%20Loop%20workflow%20via%20Visual%20Studio%20Code%20extension%22%20width%3D%221024%22%20height%3D%22559%22%20data-recalc-dims%3D%221%22%20%2F%3E%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3EGitHub%20Classroom%20aims%20to%20make%20it%20as%20simple%20as%20possible%20for%20students%20to%20get%20started%20with%20GitHub.%20As%20a%20part%20of%20this%20effort%2C%20our%20extension%20for%20Visual%20Studio%20Code%20provides%20a%20student-centric%20experience%20focused%20on%20making%20it%20even%20easier%20for%20students%20to%20manage%20their%20assignments.%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3EStudents%20can%20either%20self-install%20the%20extension%20and%20import%20their%20assignments%2C%20or%20use%20the%20one-click%20%E2%80%9COpen%20in%20Visual%20Studio%20Code%E2%80%9D%20experience%20from%20any%20assignment%20in%20which%20a%20teacher%20enables%20Visual%20Studio%20Code%20as%20an%20editor.%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3EOnce%20in%20the%20extension%2C%20students%20can%20browse%20their%20code%2C%20edit%2C%20and%20commit%20changes%2C%20submit%20their%20assignment%2C%20and%20see%20their%20integrated%20autograding%20results.%20Also%2C%20for%20group%20projects%20and%20office%20hours%2C%20students%20can%20use%26nbsp%3B%3CA%20style%3D%22color%3A%20%230366d6%3B%20text-decoration-line%3A%20none%3B%22%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%2Flearn%2Fcollaboration%2Flive-share%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20Live%20Share%3C%2FA%3E%26nbsp%3Bto%20collaborate%20with%20their%20group%20members%20and%2For%20TAs!%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3ERead%20more%20on%20how%20to%20get%20started%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Fclassroom-vscode-docs%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EGitHub%20Classroom%26nbsp%3Bdocs%3C%2FA%3E!%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CIMG%20style%3D%22box-sizing%3A%20content-box%3B%20border-style%3A%20none%3B%22%20class%3D%22alignleft%20size-large%20wp-image-59333%22%20src%3D%22https%3A%2F%2Fgithub.blog%2Fwp-content%2Fuploads%2F2021%2F08%2FGitHub-Classroom-VS-Code_fig-2.png%3Fw%3D1024%26amp%3Bresize%3D1024%252C869%22%20border%3D%220%22%20alt%3D%22screenshot%20of%20%26quot%3Bintroduction%20to%20Python%26quot%3B%20in%20Visual%20Studio%20Code%20extension%22%20width%3D%221024%22%20height%3D%22869%22%20data-recalc-dims%3D%221%22%20%2F%3E%3C%2FP%3E%0A%3CH2%20id%3D%22teach-with-visual-studio-code%22%20style%3D%22margin-bottom%3A%2016px%3B%20font-weight%3A%20600%3B%20font-size%3A%201.5em%3B%20font-family%3A%20'Inter%20UI'%2C%20sans-serif%3B%20line-height%3A%201.25%3B%20padding-bottom%3A%200.3em%3B%20border-bottom%3A%201px%20solid%20%23eaecef%3B%20color%3A%20%2324292e%3B%22%20id%3D%22toc-hId-2105511057%22%20id%3D%22toc-hId-2105511057%22%20id%3D%22toc-hId-2105511057%22%20id%3D%22toc-hId-2105511057%22%3ETeach%20with%20Visual%20Studio%20Code%3C%2FH2%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CIMG%20style%3D%22box-sizing%3A%20content-box%3B%20border-style%3A%20none%3B%22%20class%3D%22alignleft%20size-large%20wp-image-59334%22%20src%3D%22https%3A%2F%2Fgithub.blog%2Fwp-content%2Fuploads%2F2021%2F08%2FGitHub-Classroom-VS-Code_fig-3.png%3Fw%3D1024%26amp%3Bresize%3D1024%252C519%22%20border%3D%220%22%20alt%3D%22Image%20of%20Teaching%20Loop%20workflow%20using%20GitHub%20Classroom%20Visual%20Studio%20Code%20extension%22%20width%3D%221024%22%20height%3D%22519%22%20data-recalc-dims%3D%221%22%20%2F%3E%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3ERather%20than%20spending%20a%20lot%20of%20time%20in%20office%20hours%20setting%20up%20student%20machines%2C%20The%20GitHub%20teams%20have%20added%20an%20option%20for%20teachers%20to%20include%20a%20magic%20%E2%80%9COpen%20in%20Visual%20Studio%20Code%E2%80%9D%20button%20on%20student%20assignments.%20Once%20a%20student%20clicks%20this%20button%2C%20the%20process%20will%20handle%20installing%20Visual%20Studio%20Code%20and%20the%20extension%20if%20needed.%20It%20will%20then%20open%20up%20directly%20to%20that%20assignment%2C%20utilizing%20Visual%20Studio%20Code%20as%20the%20preferred%20editor%20for%20the%20students%20assignment%2C%20As%20a%20educator%20you%20simply%20need%20to%20select%20the%20Visual%20Studio%20Code%20option%20when%20creating%20a%20new%20assignment.%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CIMG%20style%3D%22box-sizing%3A%20content-box%3B%20border-style%3A%20none%3B%22%20class%3D%22alignleft%20size-large%20wp-image-59335%22%20src%3D%22https%3A%2F%2Fgithub.blog%2Fwp-content%2Fuploads%2F2021%2F08%2FGitHub-Classroom-VS-Code_fig-4.png%3Fw%3D1024%26amp%3Bresize%3D1024%252C743%22%20border%3D%220%22%20alt%3D%22Screenshot%20of%20Visual%20Studio%20Code%20option%22%20width%3D%221024%22%20height%3D%22743%22%20data-recalc-dims%3D%221%22%20%2F%3E%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3ENow%2C%20all%20student%20repositories%20will%20include%20the%20badge%20below!%3C%2FP%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3E%3CIMG%20style%3D%22box-sizing%3A%20content-box%3B%20border-style%3A%20none%3B%22%20class%3D%22alignleft%20size-large%20wp-image-59337%22%20src%3D%22https%3A%2F%2Fgithub.blog%2Fwp-content%2Fuploads%2F2021%2F08%2FGitHub-Classroom-VS-Code_fig-5.png%3Fw%3D1024%26amp%3Bresize%3D1024%252C678%22%20border%3D%220%22%20alt%3D%22Screenshot%20showing%20Visual%20Studio%20Code%20badge%22%20width%3D%221024%22%20height%3D%22678%22%20data-recalc-dims%3D%221%22%20%2F%3E%3C%2FP%3E%0A%3CH2%20id%3D%22get-started-today%22%20style%3D%22margin-bottom%3A%2016px%3B%20font-weight%3A%20600%3B%20font-size%3A%201.5em%3B%20font-family%3A%20'Inter%20UI'%2C%20sans-serif%3B%20line-height%3A%201.25%3B%20padding-bottom%3A%200.3em%3B%20border-bottom%3A%201px%20solid%20%23eaecef%3B%20color%3A%20%2324292e%3B%22%20id%3D%22toc-hId-298056594%22%20id%3D%22toc-hId-298056594%22%20id%3D%22toc-hId-298056594%22%20id%3D%22toc-hId-298056594%22%3EGet%20started%20today%3C%2FH2%3E%0A%3CP%20style%3D%22margin-bottom%3A%2016px%3B%20line-height%3A%201.5%3B%20color%3A%20%232f363d%3B%20font-family%3A%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%22%3EAs%20a%20educator%20or%20student%2C%20you%20can%20install%20the%20extension%20today%20via%20the%26nbsp%3B%3CA%20style%3D%22color%3A%20%230366d6%3B%20text-decoration-line%3A%20none%3B%22%20href%3D%22https%3A%2F%2Faka.ms%2Fclassroom-vscode-ext%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EVisual%20Studio%20Code%20Marketplace%3C%2FA%3E!%20%3CBR%20%2F%3E%3CBR%20%2F%3EEducators%20can%20also%20experiment%20with%20creating%20Visual%20Studio%20Code%20enabled%20assignments%20by%20creating%20a%20new%20assignment%20via%20%3CA%20href%3D%22http%3A%2F%2Fclassroom.github.com%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EGitHub%20Classroom%3C%2FA%3E.%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20you%20interested%20in%20all%20things%20GitHub%20head%20over%20to%20the%20%3CA%20href%3D%22https%3A%2F%2Fgithub.blog%2F%3FWT.mc_id%3Dacademic-38333-leestott%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EGitHub%20Blog%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2644197%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EStudents%20learning%20computer%20science%20are%20met%20with%20numerous%20challenges%20beyond%20just%20the%20course%20material.%20Complex%20tooling%2C%20confusing%20setup%2C%20and%20overwhelming%20systems%20can%20frustrate%20students%20and%20teachers%20alike%20before%20even%20starting%20their%20coursework.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2644197%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EClassroom%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EEducator%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Efaculty%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Egit%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EGitHub%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Estudent%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EVisual%20Studio%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EVSCode%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2644260%22%20slang%3D%22en-US%22%3ERe%3A%20GitHub%20Classroom%20and%20VSCode%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2644260%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F210546%22%20target%3D%22_blank%22%3E%40Lee%20Stott%3C%2FA%3E%26nbsp%3Bfor%20Sharing%20with%20the%20Community%26nbsp%3B%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fhtml%2F%408341BD79091AF36AA2A09063B554B5CD%2Fimages%2Femoticons%2Fsmile_40x40.gif%22%20alt%3D%22%3Asmile%3A%22%20title%3D%22%3Asmile%3A%22%20%2F%3E%3CBR%20%2F%3EI%20will%20share%20this%20with%20Education%20in%20the%20Netherlands%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Co-Authors
Version history
Last update:
‎Aug 12 2021 11:50 PM
Updated by: