CodeTour is a free and open source VS Code plugin to create guided code walkthroughs. Here you can use this plugin to create a user journey by guiding a user with different instructions. This is very similar to interactive user guides that you usually see on web apps when you sign up. CodeTour does the same thing but to a piece of code and inside Visual Studio Code.
With CodeTour, you can create step-by-step guide and it saves all the steps in the sidebar just like table contents. A user can click on any step and a popup will appear at a certain part of the code, explaining it. You can create the tour for a specific branch of the code and then export the file. Send the CodeTour file to anyone to whom you want to explain your code.
Free VS Code Plugin to Create Guided Code Walkthroughs: CodeTour
Install this plugin from VS Code marketplace and then just wait for to appear in the main IDE. Next, you open a code repository you want to work on and then you will see a “Record Tour” button there to start it.
Give your tour a name and then click on the “Add tour step…” option from the left pane. It will ask you to specify a name for the tour and then you can simply start adding the steps. In the step, you usually have to enter a description or explanation about the current code segment.
To add a new step, just right-click on the tour name and then select “Add Tour Step”. The rest of the process is the same. Alternatively, you can click on the line number to add a tour step at that particular location.
Add as many steps you want in the current code and it will save them all. To jump to any step, you just click on its name and it will take you there. This is as simple as that.
Later if you want then you can also export the current tor steps to a .tour file. You can later import this file back or send it to someone whom you want to explain your code.
In this way, you can use this simple and powerful VS Code plugin to create interactive code walkthroughs and export them. The process is simple and straightforward and you can use this inside your own remote condign teams with ease.
Final thoughts:
Creating code walkthroughs can be challenging. It is often done with the help of videos and screenshots but if you don’t have time to do that, then you can just take help of this VS Code plugin. Record all the steps linearly and export the .tour file to send to your teammates.
