Home
%3CLINGO-SUB%20id%3D%22lingo-sub-1407787%22%20slang%3D%22en-US%22%3EVisual%20Studio%20Code%20as%20Interactive%20Learning%20Environment%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1407787%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EVisual%20Studio%20Code%3C%2FA%3E%20is%20a%20source%20code%20editor%20developed%26nbsp%3B%20by%20Microsoft%20for%20Windows%2C%20%3CBR%20%2F%3ELinux%20and%20MacOS%20Visual%20Studio%20Code%20is%20customizable%2C%20users%20can%20change%20the%20editor's%20theme%2C%20keyboard%20shortcuts%2C%20and%20preferences.%20Visual%20Studio%20code%20is%20a%20lightweight%20editor%20that%20has%20all%20the%20features%20you%20will%20find%20in%20IDEs.%26nbsp%3BInstead%20of%20just%20being%20a%20text%20you%20have%20an%20embedded%20terminal%2C%20you%20have%20Git%20integration%2C%20you%20have%20color%20coding%2C%20you%20have%20all%20the%20features%20you%20expect%20from%20an%20editor.%20The%20benefit%20of%20using%20something%20like%20visual%20studio%20code%20is%20that%20you%20learn%20good%20coding%20practices%20while%20you%20are%20using%20the%20editor.%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EVisual%20studio%20code%20also%20a%20has%20a%20huge%20ecosystem%20of%201st%20party%20and%203rd%20party%20extensions%20that%20help%20you%20become%20a%20better%20developer.%26nbsp%3BVisual%20Studio%20code%20its%20very%20extensible.%20You%20can%20build%20Visual%20Studio%20extensions%20and%20release%20them%20in%20the%20visual%20studio%20marketplace%20for%20other%20developers%20to%20use.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EIf%20your%20interested%20in%20%3CA%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%2Fapi%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Edeveloping%20an%20extension%3C%2FA%3E%20you%20can%20use%20Typescript%2C%20Html%2C%20CSS%20to%20make%20the%20extension%20and%20make%20the%20editor%20specific%20to%20you.%26nbsp%3BThe%20greatest%20thing%20about%20it%20is%20that%20is%20Open%20sourced%20and%20based%20on%20several%20open%20source%20projects%2C%20so%20it%E2%80%99s%20a%20combined%20effort%20from%20the%20community%20to%20build%20a%20lightweight%20editor%20that%20gives%20you%20comprehensive%20feature%20set.%20Visual%20Studio%20code%20is%20highly%20configurable%20with%20different%20themes%2C%20font%20and%20a%20its%20great%20to%20see%20users%20making%20their%20editors%20individual%20to%20them%20by%20just%20tweaking%20a%20few%20things.%20So%20I%20want%20to%20focus%20on%20two%20new%20%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2FVSCode%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EVisual%20Studio%20MarketPlace%3C%2FA%3E%26nbsp%3Bextensions%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvsls-contrib.gistfs%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3E%20GistPad%3C%2FA%3E%20and%20%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvsls-contrib.codetour%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3ECode%20Tour%3C%2FA%3E.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1167652555%22%20id%3D%22toc-hId-1167652555%22%3EWhat%20is%20Gist%26nbsp%3B%3C%2FH3%3E%0A%3CP%3ESo%20a%20-ERR%3AREF-NOT-FOUND-Gist%20allows%20you%20to%20store%20code%20snippets%20without%20having%20to%20create%20a%20full%20fledged%20repository%20on%20GitHub%2C%20Gists%20are%20great%20for%20quickly%20sharing%20pieces%20of%20code%20with%20other%20or%20demonstrating%20techniques%20and%20solution%20that%20don't%20need%20a%20full%20repo.%26nbsp%3B%20Gists%20function%20like%20a%20repo%20in%20a%20lot%20of%20ways%20you%20can%20fork%20them%20clone%20them%20and%20you%20can%20view%20workflow%20on%20a%20single%20Gist%20in%20a%20simple%20way.%20You%20can%20create%20Gists%20on%20%5B%23%24dp21%5D%3CA%20href%3D%22http%3A%2F%2Fgists.github.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fgists.github.com%3C%2FA%3E%26nbsp%3B%20and%20you%20can%20have%20public%20or%20private%20Gists%2C%20all%20public%20gists%20can%20be%20found%20by%20anyone%20on%20the%20discover%20page.%26nbsp%3B%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--639801908%22%20id%3D%22toc-hId--639801908%22%3EWhat%20is%20GistPad%3C%2FH3%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvsls-contrib.gistfs%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGistpad%3C%2FA%3E%26nbsp%3Bis%20a%20Visual%20Studio%20Code%20extension%20which%20has%20been%20developed%20to%20simply%20allow%20you%20to%20manage%20Gists%20from%20with%20the%20editor.%20You%20can%20open%2C%20create%2C%20delete%2C%20fork%20and%20star%20and%20even%20clone%20Gists%20and%20seamlessly%20begin%20editing%20files%2C%20sharing%20code%20snippets%20or%20working%20with%20others.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1847710925%22%20id%3D%22toc-hId-1847710925%22%3EWhat%20is%20CodeTour%3C%2FH3%3E%0A%3CP%3E-ERR%3AREF-NOT-FOUND-CodeTour%20is%20another%20Visual%20Studio%20Code%20extension%2C%20code%20tour%20allows%20you%20to%20record%20and%20playback%20guided%20walkthroughs%20of%20your%20codebases.%26nbsp%3B%20A%20%22code%20tour%22%20is%20simply%20a%20series%20of%20interactive%20steps%2C%20each%20of%20which%20are%20associated%20with%20a%20specific%20directory%2C%20or%20file%2Fline%2C%20and%20include%20a%20description%20of%20the%20respective%20code%20the%20code%20store%20is%20created%20as%20JSON%20file%20which%20is%20a%20associated%20to%20your%20code%20base.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EA%20Code%20base%20with%20a%20code%20tour%20included%20allows%20developers%20to%20clone%20a%20repo%2C%20and%20then%20immediately%20start%20learning%2C%20and%20interacting%20with%20the%20code.%20Tours%20can%20either%20be%20checked%20into%20a%20repo%2C%20to%20enable%20sharing%20with%20other%20contributors%2C%20or%20exported%20to%20a%20%22tour%20file%22%2C%20which%20allows%20anyone%20to%20replay%20the%20same%20tour%2C%20without%20having%20to%20clone%20any%20code.%20So%20Code%20tours%20could%20be%20a%20interesting%20solution%20for%20a%20tutorials%20or%20project%20work%20where%20you%20want%20to%20show%20others%20specific%20aspects%20of%20your%20code.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-40256462%22%20id%3D%22toc-hId-40256462%22%3EDemo%20Video%26nbsp%3B%3C%2FH3%3E%0A%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22video-embed-center%20video-embed%22%3E%3CIFRAME%20class%3D%22embedly-embed%22%20src%3D%22https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fplayer.vimeo.com%252Fvideo%252F420964118%253Fapp_id%253D122963%26amp%3Bdntp%3D1%26amp%3Bdisplay_name%3DVimeo%26amp%3Burl%3Dhttps%253A%252F%252Fvimeo.com%252F420964118%26amp%3Bimage%3Dhttps%253A%252F%252Fi.vimeocdn.com%252Fvideo%252F896439339_1280.jpg%26amp%3Bkey%3Db0d40caa4f094c68be7c29880b16f56e%26amp%3Btype%3Dtext%252Fhtml%26amp%3Bschema%3Dvimeo%22%20width%3D%22600%22%20height%3D%22337%22%20scrolling%3D%22no%22%20title%3D%22Vimeo%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELove%20to%20know%20what%20you%20think%20about%20these%20tools%20and%20if%20they%20could%20help%20within%20your%20classes%2C%20labs%20or%20tutorials%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1407787%22%20slang%3D%22en-US%22%3E%3CP%3EOne%20of%20the%20best%20ways%20of%20learning%20programming%26nbsp%3Bis%20to%20take%20interactive%20learning%20exercises.%20I%20want%20to%20share%20some%20details%20on%20two%20Visual%20Studio%20Code%20Extensions.%20GistPad%20and%20Code%20Tour%20and%20how%20they%20can%20be%20used%20in%20Visual%20Studio.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22vscodeextensions.PNG%22%20style%3D%22width%3A%20886px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F193496iDA578B1236C6A69B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22vscodeextensions.PNG%22%20alt%3D%22vscodeextensions.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1407787%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECodeTour%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EGistpad%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EGists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Elearning%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EVisual%20Studio%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EVS%20Code%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Microsoft

Visual Studio Code is a source code editor developed  by Microsoft for Windows, Linux and MacOS Visual Studio Code is customizable, users can change the editor's theme, keyboard shortcuts, and preferences. Visual Studio code is a lightweight editor that has all the features you will find in IDEs. Instead of just being a text you have an embedded terminal, you have Git integration, you have color coding, you have all the features you expect from an editor. The benefit of using something like visual studio code is that you learn good coding practices while you are using the editor.


Visual studio code also a has a huge ecosystem of 1st party and 3rd party extensions that help you become a better developer. Visual Studio code its very extensible. You can build Visual Studio extensions and release them in the visual studio marketplace for other developers to use. 


If your interested in developing an extension you can use Typescript, Html, CSS to make the extension and make the editor specific to you. The greatest thing about it is that is Open sourced and based on several open source projects, so it’s a combined effort from the community to build a lightweight editor that gives you comprehensive feature set. Visual Studio code is highly configurable with different themes, font and a its great to see users making their editors individual to them by just tweaking a few things. So I want to focus on two new Visual Studio MarketPlace extensions  GistPad and Code Tour.

What is Gist 

So a Gist allows you to store code snippets without having to create a full fledged repository on GitHub, Gists are great for quickly sharing pieces of code with other or demonstrating techniques and solution that don't need a full repo.  Gists function like a repo in a lot of ways you can fork them clone them and you can view workflow on a single Gist in a simple way. You can create Gists on http://gists.github.com  and you can have public or private Gists, all public gists can be found by anyone on the discover page. 

What is GistPad

Gistpad is a Visual Studio Code extension which has been developed to simply allow you to manage Gists from with the editor. You can open, create, delete, fork and star and even clone Gists and seamlessly begin editing files, sharing code snippets or working with others. 

 

What is CodeTour

CodeTour is another Visual Studio Code extension, code tour allows you to record and playback guided walkthroughs of your codebases.  A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code the code store is created as JSON file which is a associated to your code base.

 

A Code base with a code tour included allows developers to clone a repo, and then immediately start learning, and interacting with the code. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code. So Code tours could be a interesting solution for a tutorials or project work where you want to show others specific aspects of your code. 

 

Demo Video 

 

Love to know what you think about these tools and if they could help within your classes, labs or tutorials?

For a more detailed overview of code tour see the previous blog https://techcommunity.microsoft.com/t5/educator-developer-blog/codetour-vscode-extension-allows-you-...