Using in Visual Studio Code
AI that understands your codebase in VS Code
This feature is only available for our 10X Developer Plan. Visit the pricing page or billing documentation to learn more about our paid plans.
- 1.Open your project’s folder using Visual Studio Code.
- 2.Bito uses AI to create an index of your project’s codebase. It enables Bito to understand the code and provide relevant answers. There are three ways to start the indexing process:
- When you open a new project, a popup box will appear through which Bito asks you whether you want to enable indexing of this project or not. Click on the “Enable” button to start the indexing process. You can also skip this step by clicking the “Maybe later” button. You can always index the project later if you want.
- In the bottom-left of Bito plug-in pane, hover your mouse cursor over this icon. You can also enable indexing from here by clicking on the “Click to enable it” text.
- Another option is to open the "Manage Repos" tab by clicking the laptop icon in the top-right corner of the Bito plugin pane.
- From here you can start the indexing process by clicking on the “Start Indexing” button. Here, you will also see the total indexable size of the repository. Read more about What is Indexable Size? in our Frequently Asked Questions page for "AI that understands your codebase" feature.
Bito usually takes around 12 minutes per each 10MB of code to understand your repo.
Bito will still work correctly if you don’t enable indexing of your project. However, in that case, Bito will only be able to provide general answers.
If you have previously indexed some projects using Bito then they will show in the “Other projects” section.
Index building is aborted if the user logs out or if the user's subscription is canceled (downgraded from a paid plan to a free plan).
- 3.Let’s start the indexing process by using any of the above-mentioned methods.
- 4.The status will now be updated to “Indexing in progress...” instead of “Not Indexed”. You will also see the real-time indexing progress for the current folder, based on the number of files indexed.
In case you close the VS Code while the indexing is in progress then don’t worry. The indexing will be paused and will automatically continue from where it left off when you reopen VS Code. Currently, the indexing will resume 5-10 minutes after reopening the IDE.
The progress indicator for the other folders is updated every 5 minutes.
- 5.Once the indexing is complete, the status will be updated from “Indexing in progress...” to “Indexed”, and will look like this.
- 6.Now you can ask any question regarding your codebase by adding the keyword "my code" to your AI requests in the Bito chatbox. Bito is ready to answer them!
Example: in my code explain the file apiUser.js
Additional keywords for various languages are listed on the Available Keywords page. Also, here are some Example Questions.
- 7.In case you ever want to delete an index then you can do that by clicking on this three dots button and then clicking the “Delete” button.
Index deletion is allowed even if the index is in progress or in a paused state.
- 8.A warning popup box will open in the bottom of Bito’s plugin pane. You can either click on the “Delete” button to delete the project’s index from your system or click on the “Cancel” button to go back.
For the sake of this tutorial, we’ve created a simple “Music Player using JavaScript”.
Here’s how it looks:
We have added a bunch of songs to this project. The song details like name, artist, image, and the music file name are stored in a file called music-list.js
Let’s ask Bito to list names of all song artists used in my code
As you can see, Bito gave the correct answer by utilizing its understanding of our repository.
Similarly, we can ask any coding-related question like find bugs, improve code, add new features, etc.
Our music player is working fine, but we don’t have any option to mute/unmute the song.
Let’s ask Bito to add this feature.
Here’s the question I used:
In my code how can i add a button to mute and unmute the song? By default, set this button to unmute. Also, use the same design as existing buttons in UI.
After adding the code suggested by Bito, here’s how the music player looks when it starts (unmuted).
And when muted:
Here’s a link to the conversation with Bito AI. You can also download the source code for this JavaScript Music Player from GitHub or try the live demo.
Last modified 3d ago