Dissecting VSCode Python extension by a dumb approach
Breaking things (one more time) to understand how they work
During all this time working at zooplus, I’ve been working with VSCode and mostly writing Python code.
In almost those 2 years and a half I’ve seen how the extensions for the editor I’ve been using on a daily basis have been modified, adding new features and improving the existent ones. In my desire to understand why things works, especially related to VSCode Python extension, I decided to fork the extension repository and went down into the rabbit hole as Alice in Wonderland did.
Let’s be honest. Couple of days ago before writing this I had no clue about the project’s hierarchy nor the most basic things (at the moment of writing this I’m lost yet) but I have to admit the project is really well organized both the Python and the Typescript part. So the problem is not the project, it’s my current knowledge about it.
In order to avoid you suffer headaches trying to get your first things modified, let me show you how to achieve basic things.
Assuming you’ve already installed the VSCode Python extension, once you’ve opened your project and opened a Python file, the extension is automatically loaded and you can see it in the status bar that appears at the bottom of the window:
The thing is, what happens when you click on this status bar element? It allows you to change the current Python interpreter and select another one. Which is nice for obvious reasons but, what if we change the default behavior by another one? Like for example create a new file.
I know what you’re thinking: What a dumb feature this guy is suggesting me. The key thing is understand this type of things are the ones that will you grasp the code faster. Little by little, keep calm.
To achieve it, let’s go first to the
src/client/interpreter/display/index.ts file and take a look to line 77. There we can see there is an assignment to
this.statusBar.command🤔 of the
Commands.Set_Interpreter🤔. Based on the class definition,
this.statusBar is a
StatusBarItem, a class that imported from
vscode, the IDE’s core library.
What if we go to were this
Commands.Set_Interpreter is declared?
There, apart from see that command we’ll see many others. For example, the one we initially talked about, the
CreateNewFile command. What if we change the command passed to our
statusBar and use this one?
After that change we only have to compile the extension with the
npm run package (it’ll take a couple of minutes) and the VSIX file will be generated in the root folder of the project. Then, let’s install it (Extensions > Three-dotted button > Install from VSIX…) and reload the IDE.
Then, we only need to test our new cool feature. Let’s open any Python file and the extension will automatically be loaded in the status bar. Then click on the “select Python interpreter button” and…
We’ll see the new empty file is opened in the editor instead of allow us to select a different Python interpreter! 🎉 🎉
Again, this exercise can be a bit stupid thing but thanks to this dumb approach we’ve made our first change in the extension + many other interesting questions came:
- We’ve seen the
commandproperty needs to be a string to identify the command to execute but, where is the command implemented? what if I put another string of a not existent command, what would happen?
- Where all the rest of the aforementioned commands are used in the code and how can I modified its behavior as we’ve done with this example?
As you probably imagine, I don’t have the answer for those questions (yet), I’ll just have to pull the thread a bit more.